You're here: Home / PHP /

Displaying Sequential Images with Pagination

Jun 22, 2008

If you have sequential images like:

image-1.jpg image-2.jpg ... image-n.jpg

Display it nicely with this code. It displays your images with the pagination.

<?php
/* setup variables */
$imgpath    = 'img';
$imgprefix  = 'image-';
$imgext     = '.jpg';
$imgcount   = 3;
$currpage   = (empty($_GET['page'])) ? 1 : $_GET['page'];
$pagination = get_pagination($imgcount, $currpage);

/* function to create pagination links */
function get_pagination($total, $current)
{
    $pg = '';
    
    if ($current > 1) {
        $pg .= "<a href=\"{$_SERVER['PHP_SELF']}?page=" 
            .  ($current-1) . "\">Prev</a>"; 
    }

    $pg .= '<select id="page">';
    
    for($i = 1 ; $i <= $total ; $i++) {
        if ($i == $current)
            $pg .= "<option value=\"$i\" selected>$i</option>";
        else
            $pg .= "<option value=\"$i\">$i</option>";
    }
    
    $pg .= '</select>';
    
    if ($current < $total) {
        $pg .= "<a href=\"{$_SERVER['PHP_SELF']}?page=" 
            .  ($current+1) . "\">Next</a>"; 
    }
    
    return($pg);
}
?>

<html>
<head>
<script type="text/javascript">
window.onload = function() {
    var page = document.getElementById('page');
    page.onchange = function() {
        document.location.href = "<?=$_SERVER['PHP_SELF']?>?page=" + page.value;    
    }
}
</script>
</head>
<body>
 <h2>Page: <?=$currpage?></h2>
 <div id="show-img">
  <img src="<?=$imgpath?>/<?=$imgprefix?><?=$currpage?><?=$imgext?>" border="0" alt="">
 </div>
 <div id="pagination">Go to page: <?=$pagination?></div>
</body>
</html>

Keywords: display images, sequential images, php

Share: del.icio.us logo Save to del.icio.us digg logo Digg this!

Displaying Sequential Images with Pagination

Add your comment