PHPJavascript

Web Development Guide – My Personal Library of Tutorials and Scripts

Photo gallery with next previous navigation

April26

Download the zip file

Next Previous Navigation system similar to a photo gallery. Build a photo gallery with next previous navigation system.

As PHPJavascript.com is all about dynamic websites, my script is written in PHP (PHP is my best friend in the world of programming).

Code

Explanation

  1. First make a folder and save lets say 5 images in it. Name the images 1.jpg, 2.jpg, 3.jpg, 4.jpg and 5.jpg respectively
  2. declare $total=5 where 5 is the no of images you have
  3. declare $i value. if $i value is already set than get that value else make $i=1
    if(isset($_REQUEST["i"])) $i=$_REQUEST["i"]; else $i=1;
  4. declare img tag <img src=<?echo $i?>.jpg> where $i stores the name of the image followed by the extension “.jpg”
  5. Now for next previous navigation declare variables $previous and $next. $next=$i+1; $previous=$i-1;
  6. Add previous and next link around the image tag with validation.
    <? if($previous>0) {?> <a href=”photogallery.php?&i=<? echo $previous;?>”>Previous</a> <? } ?>
    <img src=”<?echo $i?>.jpg”>
    <? if($next<=$total) { ?> <a href=”photogallery.php?&i=<? echo $next;?>”>Next</a> <? } ?>
  7. We are using url to transfer the value of $i (photogallery.php?&i=<? echo $next;?>)
  8. if $previous value is less than 0 than remove previous link and if next value is more than the total no of images than remove next link
  9. Hope that was easy to understand and implement
posted under PHP

Email will not be published

Website example

Your Comment:

 

3,063 spam comments
blocked by
Akismet