Dynamic Drive DHTML Scripts- PHP Photo Album script

Home Image Effects Image Galleries and Viewers Here

PHP Photo Album script

Author: Dynamic Drive

Note: Updated Feb 22nd, 06'. Added ability to order images by date (ascending or descending). The default is "by file name", alphabetically.

Description: This is a PHP enhanced Photo Album script that automates the retrieval of all images within a specific directory to show, with links to cycle through each batch of images. It's based on the original Photo Album script, though uses PHP to automatically populate the script with all images within a directory. As you upload or modify images within the directory, the script automatically adapts! Some attributes of this script are:

Uses an external PHP file to retrieve all images within a directory to show on the fly.
Customize the album's dimensions as desired, such as 3 by 2 images, 4 by 5 images etc.
Ability to sort the display order of the images by file date (ascending or descending). The default is "by file name" (alphabetically). New
The script automatically builds navigational links to allow the viewer to cycle between "batches" of images.
Each batch of images are only downloaded when they are viewed.
Each image is hyperlinked to itself or to a larger version of the image, and the link can optionally be set to open in a popup window. (note)
CSS based styling for easy customization and very lightweight code.

This script requires that your server is capable of running a PHP file (to retrieve the image file names of a specific directory), though the pages themselves that will display the photo album can be any regular HTML page.

Demo (links are set to open in a popup window):

Credits: Images for illustrative purposes only, obtained from Jaguar.com

Directions

Step 1: Download "getpics.php" (right click, and select "Save As"), and be sure to remove the .txt extension at the end upon downloading! Then, upload this file to the SAME directory on your server containing all the images you wish the Photo Album script to display, for example, http://www.mysite.com/gallery/. This PHP script will get the file names of all images within this directory, and return it back to the Photo Album script to use to display.

Step 2: Add the following CSS to the <head> section of your page:

Step 3: Add the below HTML code to the <BODY> section of your page where you wish the photo album to appear:

Select All
<script src="http://www.mysite.com/gallery/getpics.php" type="text/javascript"></script> <script type="text/javascript"> /*********************************************** * PHP Photo Album script- © Dynamic Drive DHTML code library (www.dynamicdrive.com) * Visit http://www.dynamicDrive.com for hundreds of DHTML scripts * This notice must stay intact for legal use ***********************************************/ var dimension="3x2" //Specify dimension of gallery (number of images shown), such as 4x2, 3x1 etc var imagepath="http://www.mysite.com/gallery/" //Absolute path to image directory. Include trailing slash (/) var href_target="new" //Enter target attribute of links, if applicable //Toggle popup link setting: popupsetting[0 or 1, "pop up window attributes" (if 1)] var popupsetting=[1, "width=500px, height=400px, scrollbars, resizable"] //Toggle image description: descriptionprefix[0 or 1, "Text to show" (if 1)] var descriptionprefix=[1, "Photo "] //Sort images by date? ("asc", "desc", or "") //"desc" for example causes the newest images to show up first in the gallery //"" disables this feature, so images are sorted by file name (default) var gsortorder="desc" //By default, each image hyperlinks to itself. //However, if you wish them to link to larger versions of themselves //Specify the directory in which the larger images are located //The file names of these large images should mirror those of the original //Enter a blank string ("") to disable this option var targetlinkdir="http://www.mysite.com/largegallery/" /////No need to edit beyond here/////////////////// function sortbydate(a, b){ //Sort images function if (gsortorder=="asc") //sort by file date: older to newer return new Date(a[1])-new Date(b[1]) else if (gsortorder=="desc") //sort by file date: newer to older return new Date(b[1])-new Date(a[1]) } if (gsortorder=="asc" || gsortorder=="desc") galleryarray.sort(sortbydate) var totalslots=dimension.split("x")[0]*dimension.split("x")[1] function buildimage(i){ var imagecompletepath=(targetlinkdir!="")? targetlinkdir+galleryarray[i][0] : imagepath+galleryarray[i][0] var tempcontainer='<a href="'+imagecompletepath+'" target="'+href_target+'" onClick="return popuplinkfunc(this)">' tempcontainer+='<img src="'+imagepath+galleryarray[i][0]+'" title="'+galleryarray[i][0]+' ['+galleryarray[i][1]+']" />' tempcontainer+='</a><br />' tempcontainer+=(descriptionprefix[0]==1)? descriptionprefix[1]+(i+1) : "" return tempcontainer } function jumptopage(p){ var startpoint=(p-1)*totalslots var y=1; for (i=0; i<totalslots; i++){ document.getElementById("slide"+i).innerHTML=(typeof galleryarray[startpoint+i]!="undefined")? buildimage(startpoint+i) : "" } while(document.getElementById("navlink"+y)!=null){ document.getElementById("navlink"+y).className="" y++ } document.getElementById("navlink"+p).className="current" } var curimage=0 for (y=0; y<dimension.split("x")[1]; y++){ for (x=0; x<dimension.split("x")[0]; x++){ if (curimage<galleryarray.length) document.write('<div id="slide'+curimage+'" class="slideshow">'+buildimage(curimage)+'</div>') curimage++ } document.write('<br style="clear: left" />') } function popuplinkfunc(imgsrc){ if (popupsetting[0]==1){ var popwin=open(imgsrc.href, "popwin", popupsetting[1]) popwin.focus() return false } else return true } </script>  <div id="navlinks"> <script type="text/javascript"> for (i=1; i<Math.ceil(galleryarray.length/totalslots)+1; i++) document.write('<a id="navlink'+i+'" href="javascript:jumptopage('+i+')\">Page'+i+'</a> ') document.getElementById("navlink1").className="current" </script> </div>

You're almost there- now be sure that the reference to the PHP file inside the code of Step 3 is correct:

<script src="http://www.mysite.com/gallery/getpics.php" type="text/javascript"></script>

where "http://www.mysite.com/gallery/getpics.php" correctly refers to the location of the PHP script on your server, and "gallery" is in fact the directory containing all the images you wish to be shown. Be sure the variable "imagepath" is set up in a similar fashion as well.

All that's left now is to configure a few more options within the code of Step 3 per the comments, such as whether the links should open in a popup window, the text to display underneath each image (ie Photo 1, Photo 2 etc) etc.

Enjoy!

Notes

By default, each image within the gallery simply links to itself. However, if you wish them to link to larger versions of themselves, you can specify an alternate directory in which the larger images are located. The file names of these large images should mirror those of the original. To do this, change the variable of Step 3:

var targetlinkdir=""

to something like:

var targetlinkdir="http://www.mysite.com/largegallery/"

This will cause the script to use the directory above instead when loading the image associated with the thumbnail. Obviously you'll need to create an enlarged version of each image, upload them to this directory and maintaining the same file names as the original in order for this to work.