Categories:

Home / Free JavaScripts / Image Slideshows & Galleries / Here

Cut & Paste Dynamic PHP Picture Viewer (version 1.0)

Credit: JavaScript Kit

Note: Updated Dec 21st. Fixed bug with script not correctly retrieving the images if the web page and the PHP script are not in the same directory.

Description: This script combines PHP with JavaScript to let you easily display all pictures within a directory without having to input their file names into the script! An external PHP file takes care of all the manual labour, by retrieving the list of images inside the directory and passing it onto the viewer script. Even the select menu used to choose the image to display is automatically generated. And last but not least, in IE and Firefox, a fade effect is applied each time an image is shown. Spiffy!

To use this script, your server simply has to support PHP, as this script references an external PHP file to get the images of the containing directory. The page that will show the pictures itself does NOT have to be a PHP page (ie: .htm works as well).

Example:


Directions:

Step 1: Insert the below CSS and script into the HEAD section of your page:

Step 2: Add the below HTML code to the BODY where you want the viewer to be shown:

Step 3: Finally, here comes the magic external PHP file:

  1. Download "getpics.txt" (right click, and choose "Save As"), then change its name to "getpics.php" before uploading to your server.
  2. Upload this file to the directory containing all the images to be shown using this script.
  3. Inside the script of Step 1, change the reference inside:

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

    to correctly point to where the external PHP file is located.
That's it! The external PHP file will get the file names of all images within the directory it's in (.gif, .jpg, or .png), and pass it on to the JavaScript to display the images.
JavaScript Tools:
Site Info

CopyRight 1998-2012 JavaScript Kit. NO PART may be reproduced without author's permission.