Cool Javascript Slideshow with Crossfade

Version 1.4

Last updated on
Subscribe to Internet Tips and Tools Feed

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: 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

dlc_b

Download

Download
coolslide.js
Downloaded 0 times.
This script is provided for free but please consider making a donation to help with server costs and other expenses.

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:

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:

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

Download
photos.bat
Downloaded 0 times.
This script is provided for free but please consider making a donation to help with server costs and other expenses.

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:

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

dir /b /od *.jpg *.gif *png >> %filename%

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:

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

dlc_b

Download

Download
pwaslide.js
Downloaded 0 times.
This script is provided for free but please consider making a donation to help with server costs and other expenses.

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:

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.
dlc_b

Download

Download
phpslide.zip
Downloaded 0 times.
This script is provided for free but please consider making a donation to help with server costs and other expenses.

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:

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

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

Back to www.seabreezecomputers.com
Subscribe to Internet Tips and Tools Feed        

User Comments

There are 135 comments.

Displaying first 50 comments.

1. Posted By: WayNerd1 - wgrebe@handcrafthomes.net - April 16, 2009, 11:07 am
I tried your coolslide program. I'm having trouble with it though. I am running it in test mode and it shows the "LOADING" progress bar and then the var details of each slide, but the slide itself does not display. Any thoughts?
Thanks!




Slideshow_04.jpg
Slideshow_05.jpg
Slideshow_06.jpg
Slideshow_07.jpg
Slideshow_08.jpg
Slideshow_09.jpg
Slideshow_10.jpg
Slideshow_11.jpg
Slideshow_12.jpg
Slideshow_13.jpg
Slideshow_14.jpg
Slideshow_15.jpg


2. Posted By: bobbel - - May 18, 2009, 3:34 am
Hi,
I downloaded and run your php-version but the pan effect does not work. The picture should move from right to left with pan(left), shouldn't it?
Regards,
bobbel

3. Posted By: shirl - - May 19, 2009, 8:23 pm
hi, i also have no luck in getting the javascript to work

just the loading line then nothing..
please help


4. Posted By: Jeff - - May 27, 2009, 5:25 pm
I would need to see examples of you web pages in order to diagnose the problems. One person did send me an example and the problem was that they put coolslide.js in a js folder and called it from there. This will not work because then coolslide.js will think that the images are in the js folder or a subfolder of js. You should keep coolslide.js in your main folder along with the HTML document that calls it.

5. Posted By: jb - - June 26, 2009, 6:04 am
works great thanks!

question, if i wanted to modify the acceptable photo sizes how would I do that?

thanks,
jb

6. Posted By: Jeff - - June 30, 2009, 6:36 pm
Hi Jb. Open coolslide.js or pwaslide.js (depending on which edition you are using and edit the line that looks like:

var photosize = 512; // width to show photos at

Jeff

7. Posted By: whisperinghill - - July 16, 2009, 8:50 am
I just tried the PHP version and love it. Though I tried adding two (2) slide shows to a single page one called chislide.php and the other called yorkslide.php and added the java script with the correct .php. But it only wants to display one slide show, interesting.

Also, is there a way to add a hyperlink to the slide show?

8. Posted By: TJ - - July 19, 2009, 11:25 am
This code works great, except that every 3 or 6th image is seen as invisible. I'm trying to have a simple slideshow play images.. no effects, just transitions. I commented out the loading bar section as it was getting hung up on it.

Can you help?

This is the link:
regenhouse.com/index.html

and your altered code is here:
regenhouse.com/coolslide.js

Thanks!



9. Posted By: Jeff - - July 22, 2009, 12:56 pm
Hi whisperinghill,

Yes, I doubt that two slideshows would work because the function names would be the same, so it wouldn't know what it was dealing with. Do you mean a link by clicking on the slideshow or in a comment for a photo?

I tried putting an anchor tag around the script like this:

<A href="www.google.com">

</A>

But all that did was make the caption box into a link that went to google.com. So you would have to edit the script and you could put a onClick="location.href=' statement for the pictureholder div. The line to change in the phpslide.php version would be line 1325 or line 1225 in the coolslide.js. It currently looks like:

document.write('<div id="pictureholder" class="pictureholder"'+

Change to:

document.write('<div onClick="location.href=\'http://www.google.com\'" id="pictureholder" class="pictureholder"'+

Jeff

10. Posted By: Jeff - - July 22, 2009, 1:05 pm
Hi TJ,

I went to the website but I did not see any slideshow. I took a look at the coolslide.js file you edited and there is one line that you should change:

var trans_amount = 1000; // amount of steps for transitions

1000 is way to large for the amount of steps for transitions. Especially if you are switching photos every 5 seconds. I would put the transition steps down to 20.

Jeff
http://www.seabreezecomputers.com

11. Posted By: whisperinghill - - August 16, 2009, 11:49 am
Evertime I tried to allow the exif comments to be placed in the caption block I get a error.

If I place "$get_exif = 0" then no error, but also no captions in the block

These are obviously key to the comments being displayed.

$get_exif = 1; // 0 = Do not load exif description data from jpg's; 1 = load exif descriptions from jpg's

$display_caption = 1; // 0 = No caption; 1 = Display efix jpg Description below photo


What am I messing up?

Thanks
Bud

12. Posted By: Jeff - - August 16, 2009, 4:06 pm
Hi Bud. Sorry about that. Your PHP was probably not compiled with Exif enabled. Please see the information at:
www.seabreezecomputers.com/gallery/?cat=5&item=2

Jeff
www.seabreezecomputers.com

13. Posted By: Chihiro Uchida - - September 4, 2009, 11:12 am
Hi,

Thank for the nice script!

Although, it is working not for me.

Oh, it works in the Firefox, but only some problem in Internet Explorer.

OK, here is report:

I use small pictures, 300px X 150px.

And I use "Crossfade" and no effects.

And "Quality" is 70

Everytime, new picture appear with crossfade is fine.

But there is a flashing of old picture for one ms.

I try change "Flicker" value from 500, 600 to 1000 and even 3000.

It is the same always, there is flash of old picture when new picture appear.

This only happen in Internet Explorer, in the Firefox it work great.

Please help.

Thank!

14. Posted By: Jeff - - September 5, 2009, 11:13 pm
Hi Chihiro Uchida. Sorry I can't help you with the flickering problem without a link to the site where you have the script running.

15. Posted By: Michael - - December 20, 2009, 10:04 pm
Hi, Jeff,
Just want to say thanks for the script.

Michael


16. Posted By: Fern - - December 27, 2009, 8:47 pm
HI Jeff,

I used your script for PWA content on my site and it works great on regular browsers. On the iphone, it seem like it gets stuck on the first transition and it just loops that one. Feel free to look if you wish: http://www.traceyandfernando.com

thanks!
Fern

17. Posted By: Alex - - January 28, 2010, 7:57 pm
It loads a little slow eventhough I am using the php version but it could just be the size and resolution of my >40 images.

But I want to tell you thanks and amazing work. People like you make the web it is.

18. Posted By: Jeff - - February 7, 2010, 12:50 pm
Hi Fern,

The slideshow script does usually work on the iphone. I'm kind of grasping at straws here, cause I looked at your code and it seems like it should work. But there are couple of things you could try:

1. In your HTML file on line 11 you have . But then you never close the div, instead on line 18 you close a center tag, but the center tag was never created. So you might try changing line 11 to just or you might try changing line 18 to

2. I also noticed that the album you are loading must not be public, because it doesn't show up under your fcorrado account on PWA. And you are using an authkey to access it in the slideshow script. I would recommend trying to load a different album that is set to public and see if iPhone can display it.

Jeff
www.seabreezecomputers.com

19. Posted By: Jeff - - February 7, 2010, 12:53 pm
Hi Alex,

I'm glad you found it useful. I am sorry it is loading slow. As you say, it may be the size of the images. For the web it is usually good practice to resize images to 800x600 at the very largest. Some slideshows only display images at 640x480.

The script loads 5 images in the background before displaying. I found this to be the best strategy for displaying the images for about 5 seconds. However, if you are displaying the images for a longer period of time you might be able to change the amount of images it loads before displaying them. You can easily do this in a function called init_show()

If you are using the php version on line 317 of the script you will see:

for (i = 0; i < pictures.length && i < 5; i++)

Change the 5 to another number like 3 if you would like to only cache about 3 images before it displays the first one.

Jeff
www.seabreezecomputers.com

20. Posted By: thom - - March 7, 2010, 7:53 pm
hi. I've tried to use the PHP solution and am having difficulties.
www.bayvalleycc.org/indextest2.html called phpslide.php exactly as you stated to but the three pictures in my directory do not display.
If you could review and let me know what's going on, I'd really appreciate it. I've tried a few php solutions and none seem to work :( php does work on the server as i've been able to send back text with a test php script.


21. Posted By: Jeff - - March 10, 2010, 5:09 pm
A couple of things.

1. Where are your pictures at? For some reason you are calling the script with:
src="announcements/phpslide.php"
so that means on line 17 of the script, where it is asking for the folder for the images, it will
look in announcements and then that folder. Such as "accouncements/images". So what
are you specifing in line 17? If your images are in www.bayvalleycc.org/images then
you should put phpslide.php in the root www folder on the server.

2. Change line 50 back to:
$cur_pic = 0;
or you can put 1 or 2. This is a number here not a filename.

Jeff
www.seabreezecomputers.com

22. Posted By: Vlad M. - - March 22, 2010, 12:13 am
ofcourse, first of all, kudos for this great script!
the "header" instructions that you left commented in the script do not work because they are after the respective imagejpg(), imagepng() etc instructions. if moved at the beginning of the display_image() function they work great with one curios exception: the "Header('Content-Length: '. $size);" line seems to somehow delay the display of the images greatly, whether by breaking your scripts ability to start displaying before loading all the images or by some other reason that is beyond me. removing it solved the issue and made everything work flawlessly. so its "case solved" :)

the other thing that i would very much like and think would take your script from great to awesome is also a little beyond my grasp of php, but im sure is well within yours: server-side caching of the resized images. in the particular case im using it in, the original images may be in huge resolution, and processing the images each and every time do

23. Posted By: Vlad M. - - March 22, 2010, 12:17 am
..esn't only create serious server overhead, it seems to me completly superfluous.

thank you for this, whether you decide to act on my sugestions or not :)
cheers!

24. Posted By: Jeff - - March 22, 2010, 2:12 pm
Vlad,

Thanks for the info. You are right. the Header statements should come first before any output. Also as you stated the line "Header('Content-Length: '. $size);" does not work becaue $size has not been defined. Anyway, I moved the headers to the top of the function leaving out content-length, and it seems to load the images more quickly. I have not figured out yet how to get the correct filesize of a dynamic image in php. Sending the content-length may make it perform even better. But maybe not.

As for your other idea about server-side caching: I really have no idea how to do that or even if it is possible. The only option I know of is resizing the images before uploading them to server if they are really huge. Possibly even using different images for the slideshow then what you are using to display in other context.

Jeff
www.seabreezecomputers.com

25. Posted By: Vlad M. - - March 22, 2010, 10:16 pm
the server-side caching is logically quite simple, yet, as i said, beyond my grasp of php: make the display_image() function first check if the resized file already exists in the, let's say, "thumbs" folder relative to the current location. if it exists, simply echo it to the javascipt. if not, create it, and then echo it.( good info )
seeing as this script works based on the literal content of folders, and literal filenames, i believe this will be quite easy for you :)
thanks again!

26. Posted By: Vlad M. - - March 22, 2010, 10:26 pm
i forgot :)
as of my understanding of browser cache, sending the correct content-length will definitely NOT speed thing up, but it will protect the script from generating the following error: if an image on the server is changed with a different one OF THE SAME FILENAME, in this configuration, the script will tell the browser info that will make it use the cached, incorrect one. adding the content-length will prevent this, seeing as two different images having the same filesize is extremly unlikely :)

27. Posted By: Vlad M. - - March 22, 2010, 11:01 pm
all this obviously leaves you with the following dilema: what if a picture is changed with one of the same filename on the server and yet the resized image for that respective filename already exists? the best idea of how to deal with this that i can come up with is making the server remake the resized images every once in a while, based on a configurable variable for time. checking the filesize every time will definitely create some worst server overhead than that implied by not changing anything. :)
cheers!

28. Posted By: Vlad M. - - March 22, 2010, 11:16 pm
..or maybe you could check somehow if the image has changed using something that will not drain server resources, metadata, exif, or wahtever.. i do not understand this stuff. you're the proficient one :)

29. Posted By: Vlad M. - - March 22, 2010, 11:57 pm
ok, after some thought, i think ive come up with the solution: implement the original files size either in the name of the resized file or in in the exif(whatevet the hell that is) of the resized file and then check against it when deciding whether to redo the resizing or use the existing resized file. whitchever method will create the least server overhead in your opinion should be the good one.
cheers!

30. Posted By: Jeff - - March 23, 2010, 12:56 pm
I see what you are saying. Actually the script never saves the images to disk. It dynamically changes the size of the images in server memory and outputs it to the client. The reason I did it that way is I didn't want the users of the script to have to know how to change folder permissions to allow saving. I can see what you are saying about server overhead though. It could save time and overhead by loading a smaller version of the file on the server side. Something to think about, but I doubt I will be able to program it anytime soon.

In the meantime I would hope that users of the script would resize their images to something like 1024x768 or 800x600 before uploading them to the server. That makes uploading the pictures much quicker also. They could use a batch program like FastStone Photo Resizer. www.faststone.org/FSResizerDetail.htm

Jeff
www.seabreezecomputers.com

31. Posted By: Vlad M. - - March 23, 2010, 1:54 pm
cool. the server-side caching part was just food for thought to begin with. the website i used it on is hosted on a powerful server that will never host anything else, and so it will always be limited by bandwith, not processing power. please take a look and tell me what you think( website ). but i would definitely love to see this great script taken to perfection! :)
and, to be sincere, i don't agree with your logic: whoever has the know-how to succesfuly implement your script(the php one), will definitely also know how to set folder permissions. after all, it's as easy as "777" :)

32. Posted By: John - odools77@hotmail.com - April 6, 2010, 9:35 pm
I'm having trouble keeping my pictures in one spot. They fly in from all over the page and cover up text in other columns. I put the slideshow in the middle column of a 3 column webpage. Yours stays nicely in the one spot. How can i fix that? I did not change any of your code. Also is there a way to get rid of the box underneath the slideshow? Thank you for the help.

33. Posted By: john - odools77@hotmail.com - April 6, 2010, 9:38 pm
I forgot to mention, I am using the regular slideshow, not the php

34. Posted By: ahoutzer - - April 28, 2010, 3:17 pm
I am having trouble running the PWA script. Just like another post, it works fine in Safari on my laptop, but on an iPad the transition from one pic to the next gets stuck and then loops back and does the same pics over again. Site is bsatroop120.net, and the slideshow is on the right side, scroll down some.

TIA, and thanks for the script in any case!!!

35. Posted By: ahoutzer - - May 11, 2010, 7:21 am
A follow-up:

My site is working now, on the iPad as well as my laptop's browser. I did some clean-up on the page where the slideshow is, which included some stray tags without closing tags. Once these were gone, the slideshow script worked correctly on iPad as well as other platforms.

36. Posted By: Curt - - June 9, 2010, 2:02 pm
I am just getting my web page debugged before I publish it. Thanks for the code (Javascript). I have pictures. They crossfade great and continue to cycle indefinitely. One thing I noticed was that after the 9th picture there is a five second delay before it goes back to the first picture (I have the switch photos set at 5 seconds). How do you set it so there is no delay between the last picture and the first picture? Thanks. And thanks again for some excellent work.

37. Posted By: Curt - - June 9, 2010, 2:06 pm
I figured it out. There was a space between the last image name and the command. Stared at it for at least 30 minutes before I saw it!

38. Posted By: Isaiah - - July 19, 2010, 1:45 pm
I have a quick question on linking the images to a URL. In my senerio, I would like to have each image linking out to a differant page. Would this be possible to add to the script and if so how would I do it?

Thanks

39. Posted By: mastermp2 - - July 26, 2010, 2:41 am
Good scripts.

However the last one (the php one) doesn't seem to work. I have checked and I can't find anything wrong in my code

40. Posted By: mastermp2 - - July 26, 2010, 4:04 am
Forget what I wrote earlier.... I was testing to much stuff in the same file and that kinda made interference.

It works now

41. Posted By: savy - - August 13, 2010, 1:44 am
HI Jeff
I am trying to write a javascript for a slide show in picasa using both the public as well as private albums of mine and for this I tried you script.But its not working. I changed the parts that needed to be changed. Only the name bar is displayed but no photos are displayed. Please help

42. Posted By: Marek - - August 23, 2010, 12:04 pm
I'd like to use your super cool script on my blog. Is there a way to somehow put the whole script onto web page? Without a need for having the javascript file on a server.

43. Posted By: Jeff - - August 23, 2010, 2:17 pm
Marek,

That depends on many factors. Like what kind of blog or website are you using? If the service you are using does not allow uploading of a javascript file then most likely the answer is no because they probably wouldn't allow execution of javascript in an HTML file either.

Jeff
www.seabreezecomputers.com

44. Posted By: jojo911 - - September 6, 2010, 12:54 am
I am testing the PHP version of your slideshow, and it won't display anything. I have created a new virtual site, and simply placed some images in images/ directory, and placed a simple html/php file in the root directory as follows:
..





..

Do I need to create any CSS classes or is it supposed to be a HTML file only? I have missing something very simple I expect, but can't see it. Could you send me some sample code pleas. Thank you.

45. Posted By: firewalker - - September 26, 2010, 12:21 pm
Is there any way to make the images "clickable"? E.g. open the link that may exists in the caption (href=...).

Thanks you for your great code.

46. Posted By: Jeff - - September 27, 2010, 1:09 pm
@firewalker,

Yes, you can make a click on an image go to a url now. But it only works in the javascript regular edition at the moment. Download coolslide.js again from the script page. In the textarea box you can add
image4.jpg##<url=http://www.url.com>

Jeff
www.seabreezecomputers.com

47. Posted By: firewalker - - September 27, 2010, 2:10 pm
Thanks you very much!

48. Posted By: dogpaw - - December 16, 2010, 2:14 pm
How can I configure the js to stop the slideshow at the end of the last photo/image?

thanks

49. Posted By: Jeff - - December 16, 2010, 5:23 pm
@dogpaw

Instructions for stopping slide show after last image:
I am assuming that you are using the javascript version of cool slideshow. In coolslide.js there is a function called changepic() near the end. On line 1196 you will want to add a line that says:

return;

So the code in the surrounding area will look like:

if (cur_pic == pictures_length)
{
return;
cur_pic = 0;
if (randomize_photos == 1)
shuffle_photos();
//setup_functions(); // to randomize the transitions and effects again
}


Jeff
http://www.seabreezecomputers.com

50. Posted By: dogpaw - - December 17, 2010, 9:57 am
I appreciate the suggestion but now it's doing two behaviors.

1) There is a "box" (empty outline) just below the image area.

2) The two images display properly as expected and then the image area is blank after the second/last image disappears.

thanks