Cool Javascript Slideshow with Crossfade

This is a test of Cool Javascript Slideshow with Crossfade. An easy way to do a slideshow without using flash. The other nice thing about it is you don't have to specify absolute coordinates for the top and left corner of the DIV's that hold the images. Instead the DIV can fall nicely into the document.

This technique uses two "absolute" positioned IMGs inside of one "relative" positioned DIV. That way the two images that are being used for the crossfade effect are positioned at the top left corner of the "relative" positioned DIV. Some other crossfade javascript scripts require that you use DIV's that are "absolute" positioned.

Features

• Transitions: Crossfade, Zoom, Wipe and Slide.
• Photo Effects: Zoomin, Zoomout and Pan.
• Ability to retrieve photos from your Picasa Web Albums account.
• Turn description display on or off (Captions).
• Specify size of slideshow.
• Tested to work in IE 6.0, Netscape 7.1, Safari 3.0, Firefox 1.5+

There are three editions of the Cool Javascript Slideshow. Click on an edition below or scroll down:

1. Cool Javascript Slideshow Regular Edition

2. Cool Javascript Slideshow Picasa Web Albums Edition

3. Cool Javascript Slideshow PHP Edition

1. Cool Javascript Slideshow Regular Edition

Download the script by right clicking on it and click on "Save As..." coolslide.js

Edit the javascript and change the variables inside such as:

// You may edit the variables below:
var folder = 'images/'; // if your photos are in a different folder specify it here
// example: var folder = 'images/'; 
// or same folder as js file then: var folder = '';
var phwidth = 512; // pictureholder width
var phheight = 384; // pictureholder height
// pictureholder DIV also has the class 'pictureholder' so you can add CSS border etc.
var photosize = 512; // width to show photos at
// Valid sizes are: 32, 48, 64, 72, 144, 160, 200, 288, 320, 400, 512, 576, 640, 720, 800
var seconds = 5; // switch photos n seconds
var randomize_photos = 0; // 0 = Do not randomize photos; 1 = Randomize photos
var display_caption = 1; // 0 = No caption; 1 = Display Picasa Description below photo
var caption_height = 50; // How many pixels high for caption box if on
var caption_border = 1; // Caption border pixels
// captionholder DIV has the class 'captionholder' so you can add CSS
var pan_zoom = 1.3;  // how many times to zoom before panning
var trans = "random"; // default transition between photos
var effect = "random"; // default effect on photos

The trans variable stands for transitions. The following trans are possible:
none, random, crossfade, zoom(from), wipe(from), slide(from)
from = upperleft, top, upperright, left, center, right, lowerleft, bottom, lowerright
_{(*slide does not support center)
(**wipe supports left, right, center, top and bottom)}

The effect variable is for photo effects. Possible options are:
none, random, zoomin(to), zoomout(to), pan(to)
to = upperleft, top, upperright, left, center, right, lowerleft, bottom, lowerright
_{(*pan does not support center)}

Copy and paste the following code in your HTML document where you want the slideshow to appear: <script type="text/javascript" language="JavaScript" src="coolslide.js"></script>

For the Photo list make an invisible textarea in the BODY of your HTML document like the one below with each jpg, gif or png listed on a separate line. Make sure the textarea has the id piclist:
<textarea id="piclist" style="visibility:hidden"> image1.jpg image2.jpg image3.gif image4.png </textarea>

or an easier way to make the photolist is to right click on the following batch file and save it to your hard drive in the folder that contains the image files you want in the photolist: photos.bat
It will create a file called photos.txt which will contain the textarea element along with all your images. Then paste the information from photos.txt into the body of your HTML document.

photos.bat contents looks like the following: @echo off set filename=%1 if %1.==. set filename=photos.txt echo ^<textarea id="piclist" style="visibility:hidden"^> > %filename% dir /b /od *.jpg *.gif *png >> %filename% echo ^</textarea^> >> %filename% echo All the jpg, gif and png files from this folder are now listed in %filename% pause

You can edit the batch file if you wish. The important line is:

It basically uses the dir command in basic listing mode /b and orders the list by date /od. You can change the sort method to order by name (alphabetic) by replacing /od with /on. See the dir command help for more options. (Click on Start -> Run. Type in cmd and press ENTER. Type in dir /? and press ENTER.)

You may also specify transitions, effects, and time in the TEXTAREA. If you specify these then they override the default settings above. The format is similar to a combination of HTML and Javascript. Just add the code after each image filename and that photo will be effected by the code. Separate the filename and the code with ##
Examples:
<textarea id="piclist" style="visibility:hidden"> image1.jpg##<time=5> <trans=slide(right)> <effect=zoomin(center)> image2.jpg##This is a photo of the <b>beach</b> nearby image3.gif##Beautiful Sunset <time=6> <trans=crossfade> <effect=zoomout(upperleft)> image4.png </textarea>

time is the amount of seconds to display a photo. Anything else you have in the description including HTML markups will display in the caption box if you have captions turned on.

2. Cool Javascript Slideshow Picasa Web Albums Edition

Download the script by right clicking on it and click on "Save As..." pwaslide.js

Edit the javascript and change the variables inside such as:

// You may edit the variables below:
var username = "yourpicasa"; // username for your picasa web album account
var album = "youralbum"; // name of album (Folder name)
var phwidth = 512; // pictureholder width
var phheight = 384; // pictureholder height
// pictureholder DIV also has the class 'pictureholder' so you can add CSS border etc.
var photosize = 512; // width to show photos at
// Valid sizes are: 32, 48, 64, 72, 144, 160, 200, 288, 320, 400, 512, 576, 640, 720, 800
var seconds = 5; // switch photos n seconds
var randomize_photos = 0; // 0 = Do not randomize photos; 1 = Randomize photos
var display_caption = 1; // 0 = No caption; 1 = Display Picasa Description below photo
var caption_height = 50; // How many pixels high for caption box if on
var caption_border = 1; // Caption border pixels
// captionholder DIV has the class 'captionholder' so you can add CSS
var pan_zoom = 1.3;  // how many times to zoom before panning
var trans = "random"; // default transition between photos
var effect = "random"; // default effect on photos

The trans variable stands for transitions. The following trans are possible:
none, random, crossfade, zoom(from), wipe(from), slide(from)
from = upperleft, top, upperright, left, center, right, lowerleft, bottom, lowerright
_{(*slide does not support center)
(**wipe supports left, right, center, top and bottom)}

The effect variable is for photo effects. Possible options are:
none, random, zoomin(to), zoomout(to), pan(to)
to = upperleft, top, upperright, left, center, right, lowerleft, bottom, lowerright
_{(*pan does not support center)}

Copy and paste the following code in your HTML document where you want the slideshow to appear: <script type="text/javascript" language="JavaScript" src="pwaslide.js"></script>

You may also specify transitions, effects, and time in Picasa Web Albums descriptions. If you specify these then they override the default settings above. The format is similar to a combination of HTML and Javascript. Just add the code to a Photo description in Picasa and that photo will be effected by the code.
Examples:

<trans=crossfade> <effect=zoomin(center)> <time=5> The rest of this line becomes a description.

time is the amount of seconds to display a photo. Anything else you have in the description including HTML markups will display in the caption box if you have captions turned on.

3. Cool Javascript Slideshow PHP Edition

Download the script by right clicking on it and click on "Save As..." phpslide.zip

Once phpslide.zip is on your local hard drive then decompress phpslide.php from it.

Edit phpslide.php and change the variables inside such as:

$folder = "images/"; // if your photos are in a different folder specify it here
// example: var folder = 'images/'; 
// or same folder as this file then: var folder = './';
$photosize = 512; // width to show photos at
$quality = 70; // image quality; 100 = highest quality and largest file size
// keep the quality at 70 or lower if you are getting image flicker because
// of loading of the image files between transitions
$get_exif = 1; // 0 = Do not load exif description data from jpg's; 1 = load exif descriptions from jpg's

$phwidth = 512; // pictureholder width
$phheight = 384; // pictureholder height
$phheight = 384; // pictureholder height
// pictureholder DIV also has the class 'pictureholder' so you can add CSS border etc.
$seconds = 5; // switch photos n seconds
$randomize_photos = 0; // 0 = Do not randomize photos; 1 = Randomize photos
$display_caption = 1; // 0 = No caption; 1 = Display efix jpg Description below photo
$caption_height = 50; // How many pixels high for caption box if on
$caption_border = 1; // Caption border pixels
// captionholder DIV has the class 'captionholder' so you can add CSS
$pan_zoom = 1.3;  // how many times to zoom before panning
$trans = "random"; // default transition between photos
$effect = "random"; // default effect on photos

The trans variable stands for transitions. The following trans are possible:
none, random, crossfade, zoom(from), wipe(from), slide(from)
from = upperleft, top, upperright, left, center, right, lowerleft, bottom, lowerright
_{(*slide does not support center)
(**wipe supports left, right, center, top and bottom)}

The effect variable is for photo effects. Possible options are:
none, random, zoomin(to), zoomout(to), pan(to)
to = upperleft, top, upperright, left, center, right, lowerleft, bottom, lowerright
_{(*pan does not support center)}

Copy and paste the following code in your HTML document where you want the slideshow to appear: <script type="text/javascript" language="JavaScript" src="phpslide.php"></script>

You may also specify transitions, effects, and time in jpg exif photo comments. If you specify these then they override the default settings above. The format is similar to a combination of HTML and Javascript. Just add the code to a Photo description in a JPG exif comment and that photo will be effected by the code.
Examples:

<trans=crossfade> <effect=zoomin(center)> <time=5> The rest of this line becomes a description.

time is the amount of seconds to display a photo. Anything else you have in the description including HTML markups will display in the caption box if you have captions turned on.

To Edit JPG exif Comments

You have a few choices for editing exif jpg photo comments. You can download programs that can edit the comments such as irfanview. In Irfanview open the jpg photo and then click on Image -> Information -> Comment. Then write a comment in the window and click on Write.

You may also use Windows XP to edit a jpg comment. In your images folder right click on the jpg filename and click on Properties. Click on the Summary tab. If it says << Simple click on that so that it says Advanced >>. There you will find a comments field. Click in it and write your comment, including any photo transitions or effects you want. Then click OK.

_{*Note: Windows XP and Irfanview write jpg exif comments in different places on the jpg file. If you write a regular exif comment with Irfanview and also a Windows XP JPG comment then the Windows XP comment will be displayed only. However, if you leave the Windows XP comment blank then the regular exif comment from Irfanview or other software will be displayed.}

Bug Fixes and versions

5/30/09 ver. 1.2. Converted all html tags to lowercase for better compatibility with doctype strict. Added px to end of width, height, top and left styles for compatibility with xhtml.

4/20/09 ver. 1.12c for PHP Edition. Fixed bug where if there is quotes in exif comment or exif title then we need to slash them. Addslashes.

4/14/09 ver. 1.12b for PHP Edition. Had forgot to put width and height for image in imagecreatetruecolor if the set width was bigger than actual image width.

4/13/09 ver. 1.12 Now allows random to be passed as trans or effect in photo description.

4/13/09 ver. 1.11 Fixed possible security problem where the script allowed any function to be passed as trans or effect from a photo description. But now the script checks to make sure it is a real trans, effect and direction.

4/12/09 ver. 1.1 Fixed bug where effect = or trans = with spaces did not work. Now it removes the spaces (Ex: effect=zoomin(center))

4/08/09 ver 1.0 Cool Javascript Slideshow created