Cut & Paste Full Screen Image Slideshow (w/ auto read images from directory)
|
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:
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. |