linein designs

A while back we wrote an article on how to fade images in and out from a single directory using jQuery and another plugin, but today we’re going to add…actually we’re going to totally redo the way we did it in the past. The new way should leave a much smaller footprint.

View Demo

First here is what you’ll need before we can get started everything else can be found in the ZIP file below.

• PHP 4 or higher
• Latest version of jQuery

Step 1 – Get image gallery files

Download the project files, unzip them and upload them to your webserver.

Download Image Gallery Files

Step 2 – Change Default Variables in index.php

By default the script will read from an array set in the index.php file so you should be able to upload the files to your webserver and be up and running. But to change these settings, open the file index.php and update the first 14 lines to fit your needs.

The default image array allows you to have a little more control over what images display as well as links on each image and set windows targets. To use the array, just make sure the variable $use_array is set to ‘yes’ (in quotes).

// use a set array of images rather than a directory
$use_array = 'yes'; // set image array values below
$image_array[] = array('image' => 'http://i26.tinypic.com/11l7ls0.jpg', 'link' => 'http://en.wikipedia.org/wiki/Swimming_pool', 'target' => '_new');
$image_array[] = array('image' => 'http://i29.tinypic.com/xp3hns.jpg', 'link' => 'http://en.wikipedia.org/wiki/Cave', 'target' => '');
$image_array[] = array('image' => 'http://i30.tinypic.com/531q3n.jpg');
$image_array[] = array('image' => 'http://i31.tinypic.com/119w28m.jpg');

If you’d rather display images from a single directory, you’ll need to change $image_dir to the absolute directory location on your webserver. (it must be the absolute location for PHP to properly read the directory. And also change the $relative_dir variable to the relative path to your image directory.

// use if reading images from a directory (make sure $use_array is set to 'no' or false
$image_dir = "$_SERVER[DOCUMENT_ROOT]/examples/jquery_gallery/images"; // must be the absolute location for PHP to read the directory
$relative_dir = "/examples/jquery_gallery/images"; // relative image location

Next are the effects variables that change if you want the images to start changing automaticly, how long of a pause between each image and how long the transition fade should be. Below are the default values.

$auto_start = "true"; // change to false if you do not want image to change automaticly.
$pause = 2500; // seconds to pause between each image in milliseconds (1000 = 1 second)
$fade_duration = 500; // transition duration (milliseconds)

Step 3 – Set CSS styles

Just within the body, you’ll see some simple styles that allow you change the DIV that holds the images. Mainly used to just change the border, but you can add almost any style to it if you needed.

Step 4 – Enjoy

Once you’ve got all your variables and the DIV set to display the image gallery, you should be all set to view it working. (by default the DIV has an ID of simplegalley1, so make sure you have a DIV with that ID somewhere on the page)

Please let us know if you have any questions about any of this. And as with many things in life, there are more than one way to do the same thing. So if you have a “better” way of doing this, please let us know in the comments.

For more information on the variable of the simplegallery.js, please visit http://www.dynamicdrive.com/dynamicindex4/simplegallery.htm.

Similar Posts:

• jQuery Loading – Display Images or Text Until Script is Finished
• Fade In and Out Images from a Single Directory Using jQuery (with plugin)
• Display Last.fm’s Recent Tracks on Web Site with PHP Function
• MySQL Full-Text Stopwords Array
• Run Javascript Code After an AJAX Request