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. IMG_0597.JPG##<effect=zoomout(top)><trans=none> P1020259.JPG##<trans=crossfade><effect=zoomin(bottom)><url=http://www.google.com/search?q=Sea+Breeze+Computers> IMG_0188.JPG## Sea Lion - Breakwater Pier<trans=crossfade><effect=pan(left)><url=http://www.seabreezecomputers.com> P1000916.JPG## Otter - Point Lobos<trans=crossfade><effect=zoomin(top)> IMG_1708.JPG##Huckleberry Hill IMG_0920.JPG##Andrew Molera bixby-bridge.jpg## <effect=none>Bixby Bridge

Features

• Transitions: Random, Crossfade, Fadeinout, Zoom, Wipe and Slide.
• Photo Effects: Random, 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+, Chrome, iPhone/iPad iOS, Android

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

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, fadeinout, 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="display:none;"> image1.jpg image2.jpg image3.gif image4.png </textarea>

or an easier way to make the photolist is to download the following batch file and save it to your hard drive in the folder that contains the image files you want in the photolist: dlc_b

Download

photos.bat contents looks like the following: @echo off set filename=%1 if %1.==. set filename=photos.txt echo ^<textarea id="piclist" style="display:none"^> > %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 ##
You may also add a url to any image. If a user clicks on the image then the webpage will switch to that url or web address.
Examples:
<textarea id="piclist" style="display:none;"> 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##<url=http://www.yoururl.com> </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

Click here for a demo of Cool Javascript Slideshow Picasa Web Albums Edition

Download

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 show_all_albums = 0; // 1 = show photos from all picasa albums; 0 = show photos from one album
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, fadeinout, 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

Click here for a demo of Cool Javascript Slideshow PHP Edition

Features of the PHP Verison

• Automatically and dynamically loads images for the slideshow from the folder you specify on the web server.
• Dynamically resizes the photos to the size specified so the regular size photo does not have to be downloaded.
• Can retrieve jpg exif photo comments or jpg iptc captions and display them as captions. The comments can also include transition and photo effects.

Download

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
$get_iptc = 1; // 0 = Do not load iptc description data from jpg's; 1 = load iptc 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, fadeinout, 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 or jpg iptc photo captions. 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 or IPTC Captions

Some PHP versions are not compiled with EXIF functions enabled. This may be the case on your server. So it may be easier to edit IPTC captions rather than compile your PHP with EXIF. To edit IPTC captions you can use a program like irfanview. Open the jpg photo in Irfanview and then click on Image -> Information -> IPTC Info. Then add your photo comments to the Caption field and click on Write. (If you are using a Mac then you can use GraphicConverter for Mac to edit the JPG IPTC Caption of a photo.)

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 EXIF 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/24/2019 - Ver 1.4b for Javascript Edition. You can now display Play/Pause controls.

3/26/2019 ver 1.4a for PHP Edition: Fixed "warning: undefined variable" if PHP is set to display warnings.

11/14/2014 ver 1.4 for all Editions (Javascript Regular, Picasa Web Albums and PHP Editions). Fixed a number of bugs and and added new features:

• Since Internet speeds are faster today the script is now only preloading 3 images instead of 5 before starting the slideshow. Also instead of using window.onload and waiting for everything on the page to load the script starts the slideshow more quickly now.
• Bug fix: If transition was none in description it was causing a bug and breaking the script.
• Bug fix: If crossfade transition was in description it was causing a bug and breaking the script.
• Bug fix: If none effect was in description it was causing a bug and breaking the script.
• Added zoomout_zoom variable for customized how far to zoom in a photo before zoomout(to) photo effect.
• Zoomin and zoomout effects are more smooth now.

9/6/2013 ver 1.2k for Cool Slideshow PHP Edition. Fixed IPTC photo descriptions being overwritten by blank EXIF descriptions.

3/8/2013 ver 1.3e for Cool Javascript Slideshow Regular Edition. Ver 1.2m for PHP Edition. ver 1.12c for Javascript Slideshow Picasa Edition. Crossfade was not working in Internet Explorer 10. IE 10 no longer supports Microsoft's custom legacy opacity filter set as filter:alpha(opacity=50); Instead IE10 now uses the CSS3 standard of opacity. Changed all editions of Cool Slideshow to still allow crossfade by adding the CSS opacity to IE portions of the script.

10/8/2012 ver 1.3d for Cool Javascript Slideshow Regular Edition. Ver 1.2k for PHP Edition. ver 1.12b for Javascript Slideshow Picasa Edition. Added fadeinout transition to all editions. Fixed bug in all edition where if using crossfade the first image is displayed along with a broken image icon in Firefox. Also changed the crossfade function to have 20 steps of opacity instead of 10 for a more visually pleasing crossfade transition.

9/6/2012 ver 1.2j for Cool Slideshow PHP Edition. Now sorting files in alphabetical order with natural sorting (natcasesort)

4/2/2012 ver 1.2i for Cool Slideshow PHP Edition. Added support for transparency in GIF and PNG images.

11/21/11 ver 1.2h for Cool Slideshow PHP Edition. Added support for displaying IPTC photo captions.

8/31/11 ver 1.12a for Javascript Slideshow Picasa Edition. Added new variable show_all_albums. If set to 0 then only the photos specified in the album variable are used. If set to 1 then photos from all your Picasa albums are used in the slideshow.

8/23/11 ver 1.3c for Javascript Slideshow Regular Edition. Fixed bug where URL was becoming lowercase. Now it is in the case you specify and can include = in the url.

12/28/10 Fixed a bug for all versions where if the transition was set to 'none' then the slideshow would be blank for five seconds before displaying the first image.

12/17/10 ver 1.3b for Javascript Slideshow Regular Edition. Changed textarea to use style="display:none" instead of style="visibility:hidden" to avoid leaving invisible extra space on the document.

12/17/10 ver 1.3b for Javascript Slideshow Regular Edition. Now coolslide.js removes all tabs from the piclist textarea.

7/26/10 ver 1.3 for Javascript Slideshow Regular Edition. Added a function for clicking on image to go to a URL (web adddress). In the piclist textarea add <url=http://www.url.com> after the image name.

4/02/10 ver 1.2g for PHP Edition. Removed most 'Notice Undefined variable' errors in PHP if php.ini has 'error_reporting = E_ALL | E_STRICT' set.

4/01/10 ver 1.2f for PHP Edition. Changed eregi to preg_match for PHP 5.3 compatibility.

3/29/10 ver 1.2e for PHP Edition. Script was giving get_exif=0 error even if variable was set to get_exif=0.

2/22/10 ver 1.2d for PHP Edition. Moved headers for caching to top of display_image() function and this improves caching in IE.

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