Categories:

Home / Free JavaScripts / Image Slideshows & Galleries / Here

Cut & Paste Full Screen Image Slideshow (w/ auto read images from directory)

Credit: JavaScript Kit

Description: Full Screen Image Slideshow is a cool slideshow that uses jQuery and PHP to display large images from a directory automatically and using the entire browser window as its canvas! Thumbnails of every image is shown at the bottom of the slideshow for easy viewing on demand. Lets see the list of features of this script:

  • Displays each image within the slideshow using the entire width and height of the browser window. Images are automatically resized and centered.
  • Uses PHP to auto get all images within a specific directory as part of the slideshow images. Simply drop the PHP file portion of the script into the desired directory.
  • Images can be sorted and shown by filename or date.
  • Thumbnail images are generated from a separate directory containing the smaller versions of each image. This minimizes downloading of the larger versions until requested.
  • Script can be set to optionally auto rotate the images every x seconds.

Example: Click here for demo.

Directions

Step 1: Add the following code to the <HEAD> section of a blank page. This is the page you wish to display the slideshow in:

Download the below accompanying .js file, and save it in the same directory as the above page (right click, and select "save as"):

Step 2: Go to the directory within your site that will contain the images you wish to display as part of the slideshow, and unzip the following file's contents into this directory:

fpslideshowphp.zip

It contains the following files:

  • demo.htm
  • fpslideshowvar.php
  • sampleimage1.jpg
  • sampleimage2.jpg
    etc
  • /thumbnails/sampleimage1.jpg
  • /thumbnails/sampleimage1.jpg
    etc

It is fpslideshowvar.php that will read all images within the directory it is in and use them as part of the slideshow. The sub directory thumbnails/ should contain the thumbnail versions of their larger counterparts in the parent folder. The file names of the thumbnails should be identical to the larger images'.

Remember the code of Step 1 above? You should now edit the below line inside it so the URL correctly points to where fpslideshowvar.php is located on your site:

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

That's it! When you go to demo.htm on your site now, you should see the slideshow working on your site displaying the sample images included in the zip file above. To display your own images, delete the sample images and upload your own. Don't forget that you need to also create thumbnail versions of these same images and upload them into the sub directory thumbnails/. A good freeware program to easily do this that I recommend is Mihov Image Resizer.

Additional customizations

Inside fpslideshow.js at the very end you'll find the initialization code that jumps start the script:

fullpageslideshow.init({ //initialize script
 imagesobj: fpslideshowvar, //no need to change. Object variable referencing images as generated inside "fpslideshowvar.php"
 thumbdir: 'thumbnails', //sub directory directly below main images directory containing the thumbnail versions.
 sortby: 'date', //sort by "date" or "filename"
 fadeduration: 1000,
 thumbdimensions:[30,30],
 autorotate:{enabled:false, pause: 4000}
})

Customize this code to change things such as the order of the images when shown (either sorted by filename or date),  dimensions of the thumbnails, and also, whether the slideshow should auto rotate. Here's a description of each option:

option Description
imagesobj The name of the JavaScript object containing the images of the slideshow. This value (fpslideshowvar) is automatically generated inside fpslideshowvar.php  and hence should be left as is.
thumbdir The sub directory beneath the directory where fpslideshowvar.php is contained in that holds the thumbnail images. Default is "thumbnails".
sortby Sets how the images are sorted before being shown. Set to "date" to display descending (newest to oldest), or "filename" ascending (a-Z).
fadeduration The duration of the fade in milliseconds (ie: 1000=1 sec)..
thumbdimensions The dimensions of the thumbnails in pixels. If you have a lot of thumbnails, you'll want to set this to a small value.
aurotate Whether or not the slideshow should auto rotate, plus the pause between images in milliseconds if yes.

JavaScript Tools:
Site Info

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