SubscribeIt resizes, it transitions, it fades in and out and it's not flash! The new AJAX slideshow on the homepage of my site comes to you courtesy of Scott Upton at Uptonic. This smooth, easy to use delight, is a great toolbox addition, for anyone who considers themselves part of the new breed of AJAX designers and developers.
Looks great.
Pitty it doesn’t work in Firefox. (or should it?)
Jim
you can use simple “hack” to load files from directory:
just put this in javascript section between brackets:
var photoArray = new Array(
<?
function dirList ($directory){
$results = array();
$handler = opendir($directory);
while ($file = readdir($handler)) {
if ($file != '.' && $file != '..')
$results[] = $file;
}
closedir($handler);
return $results;
}
$katalog = (dirList("./images"));
$suma = count ($katalog);
for ($i=0;$i<$suma;$i++)
{
$plik = $katalog[$i];
$size = getimagesize("images/$plik");
$szerokosc = $size[0];
$wysokosc = $size[1];
if ($i==$suma-1) {print "new Array(\"$plik\", \"$szerokosc\", \"$wysokosc\", \"Photo number: $i\")\n"; }else{
print "new Array(\"$plik\", \"$szerokosc\", \"$wysokosc\", \"Photo number: $i\"),\n";}
}
?>
and remember to change filename to something.php, ofcourse it is easy to write the same for database backend what i also done but due to high customization i will not post it here
Hi toliman,
Thanks so much for writing this hack! It looks great. 
Toliman, can you explain this a little more??? I’m confused on what to do.
in oryginal script you must specify what files to load and “hardcode” them to javascript(check size, set size put them in the code etc). this litle “hack” read dynamicly photos from directory “images”, check their height and width, then put them into javascript array. afterall - to update your gallery you need only tu upload files to folder “images”. to install just replace code (from oryginal packaga) between “brackets” in array “photoArray” (maybe i should provide it as patch?). also you should change location of files that shows “loading” from images to other location to prevent them to being part of gallery
This is great. Thank you for sharing. I like the idea of releasing a PATCH, for the javascript hack. I would figure it out eventually, but would save time.
Ok, looking at the code, I see you had to make a few other changes. First, you can’t have the slideshow image folder inside the images folder anymore. Then you have to edit the slideshow.php and ajax-slideshow.css to read from the new directories. Then you have to move that .DS_Store file from the images directory too, anyone know what that even is?! I took the liberty of zipping the working dynamic gallery for download here - http://www.jessejoe.com/ajax-slideshow-dynamic.zip. Thanks a lot toliman!
THANKS!!! That works great!
Glad to help JRBLACK10. The only thing is the fade in and out is realy flickery with larger images. Oh well, guess it can’t be perfect!
Just wanted to post that I updated my version so that the photo captions start on “Photo number: 1” instead of “Photo number: 0” like it was originally. - http://www.jessejoe.com/ajax-slideshow-dynamic.zip .
the package provided by Jesse Jarzynka looks ok. - here is another idea/example of using slideshow.
this is based on mysql and zen gallery (everything you add to zen gallery you will be able to see on slideshow:
<?
function db_connect_readonly ()
{
$conn=mysql_connect("ip.addres.of.mysql", "db_name", "password") or die ("Can't connect to db");
mysql_select_db ("zen") or die ("Can't select db");
return;
}
$albumname=$f;
$query = "select filename from images where albumid = (select id from albums where folder = '$albumname')";
db_connect_readonly();
$result = mysql_query($query) or die ("Query syntax error");
$num_rows = mysql_num_rows($result);
while ($row = mysql_fetch_array($result))
{
$i=$i+1;
$size = getimagesize("albums/$albumname/$row[filename]");
$szerokosc = $size[0];
$wysokosc = $size[1];
if ($i==$num_rows) {
print "new Array(\"$row[filename]\", \"$szerokosc\", \"$wysokosc\", \"Zdjęcie numer: $i\")\n";
}
else
{
print "new Array(\"$row[filename]\", \"$szerokosc\", \"$wysokosc\", \"Zdjęcie numer: $i\"),\n";}
}
?>
also you need to adjust line 28 of oryginal script and replace it with:
var photoDir = “albums/<? print $f;?>/”;
then place allslideshow scripts in zen root folder and point to fe.: slideshow.php?f=yourablubname
live example:
http://www.toliman.pl/ajax/select2.php
oh sorry for polish sentences: you need to change “Zdjęcie numer:” with sth like: “Photo number” or any other you is your flawour
toliman, I really like how your gallery has the thumbnails in the top. Is that part of the Zen Photo code you just posted? If not, could you post how you got that? It’s beautiful!
Scott made a new version here:
http://www.couloir.org/js_slideshow/
now uses script.aculo.us and flash (just for sound)
Wow, that is freakin beautiful, although I don’t hear any sound. Toliman, and plans on telling us what to change to add whole galleries this time??? :o)
the sound is just for a effect when you put the mouse over the picture, its a “blip”
WOW is that slick… Impressive. Nice update. Now, if we had a dynamic gallery listing/menu..... SWEET!
Well I did it again! Using toliman’s original PHP code, and inserting the all JS from js/slideshow.js including the added php into the new version, the new gallery now loads images dynamically! Here’s a download link - http://www.webfilehost.com/download.php?id=8370265&time=1142489837
yes it is in the same file where all other code. it looks exacly like this:
<font face="verdana" size="1">wybierz galerię</font>
http://www.toliman.pl/ajax/zen/i.php?a=Florianska&i=1.jpg&s=thumb
http://www.toliman.pl/ajax/zen/i.php?a=Pauza&i=p7150028.jpg&s=thumb
http://www.toliman.pl/ajax/zen/i.php?a=Jakob&i=img_1886.jpg&s=thumb
http://www.toliman.pl/ajax/zen/i.php?a=Justyna_i_Nadia&i=dscn0555.jpg&s=thumb
http://www.toliman.pl/ajax/zen/i.php?a=Dym&i=p7150028.jpg&s=thumb
so as you can see i am getting thumbs also from zen gallery 
you can try to build it dynamicly by fething albumnames and default thumbs. ajax+php is great just simply play with that!
Jesse Jarzynka,
I tried your source, but I get the following error…
Line 268
Error: ‘myrules’ is undefined
Does this script work on IE?
I wonder if running on my http://LocalHost may be my problem…
JR, that shouldnt matter. I’m on localhost too. The link above is broke now, here’s the new one: http://jessejoe.com/js_slideshow_dynamic.zip
hmmm, are there changes in new one? It still does not work.
I am making an assumption, based on asp knowledge, that there is no real PHP code in the .php file, so I renemed it to .html. Is that my problem, running it as .html instead of php?
Will ftp to my server from home tonight and give it a try as a php file.
Yeah...thats the problem. There’s PHP in the index file, that’s why it’s called index.php. Read toliman’s original post. Everything between <? and ?> is php.
My Bad… :( Sorry did not see the <? in quick scan of code, thought it was all javascript.
türkiyenin çiçe club’ı
internet üzerinden reklam vermenin en kolay yolu
sektör grafik malatya
Hmmm, confused. why does it set an images directory twice? once for the dirlist function, and once as var photoNum..??
Because one is for the javascript code doing all the work, and one is for the php doing the dynamic stuff. I basically just added tolimons code to the existing stuff, I’m not really a programmer. If there’s a way to improve it, let me know.
ah, makes sense. not much of one myself either! 
while we’re at it, one quick question again on the directories. i can’t seem to make any other directory work for this. what kind of path setting do these variables require?
I’m not sure what you mean. The directory name is in 3 spots in index.php, line 50, line 66, and line 72. If you’re on linux you can do sed -ie “s/photos\/01/NEWdirNAME/” index.php and it’ll change all instances of photos/01 to NEWdirNAME.
well, the code says for example that it will pull from the ‘images’ directory. my issue is that i’m trying to pull from another directory from the root, like members/images or something like that. it dies every time, not sure why
I’m not sure which gallery you are using. The original, my first one, or the second updated one. I suspect the first dynamic one. Whatever you are trying to change to is in the index.php file. As long as you have permissions it should work.
you’re right, i was on another version. got the new one and, of course, no love. sigh. i think it might be the fact i’m trying to make it work with expression engine, which isn’t fond of query strings.
*sniff*...so close it seems… i can see my photos now populating the array:
var photoArray = new Array(
new Array("0462f44d1640f1ba61999935863a1044.jpg", “500”, “375”, “Photo number: 1"),
new Array("b741b78c90e769d977fd055cdcee7d5a.jpg", “500”, “333”, “Photo number: 2"),
new Array("0c2cf23c6272d6f0fe2c24916188bf70.jpg", “500”, “333”, “Photo number: 3"),
new Array("3ff82cd6f4b3978af20ae50339a5770a.jpg", “500”, “375”, “Photo number: 4")
);
very exciting. but they just will not load on the page, stuck at the loading icon. any thoughts on this out there?
ok, before i get banned for spamming, i’ve discovered this: it won’t read from any directories outside of its own? can’t be permissions, they’re all the same on my server. weird.
sweet. figured it out finally. had a conflicting onload function in the page. just added another window.load call in the slideshow code and voila.
Hi,
it would be interesting if the slideshow can show automatically the entire gallery...what kind of hack?
Thought you guys might enjoy this:
http://www.couloir.org/
bu siteyi de ekleyin lütfen
dangnab it. it’s working beautifully in firefox, but i’m still getting the same error as jrblack10: ‘myrules’ is undefined. anyone else with this?
brilliant slideshows. i’m impressed. there’s only one drawback in my opinion: the image shouldn’t fade before the new one is loaded..is that possible to achieve? user clicks ‘next’ -> loading rotator appears and in the background the new image is loaded, then the transition happens..
There appears to be a bug in all of these. if an image has a hyphen (ie it is a dated image) it won’t load.
I also wanted to include a couple of flash files in my gallery. Anyone know anything about this?
Ah, never mind, it was trying to index a php file I left on the server.
Still, I’d really like to implement this with inserting html code so i can include flash files & gallerise blog posts…
Any ideas on this?
The .DS_store is a Mac OS hidden file.
if you are using Mac OS X as a server you will encounter this problem *all* the time, therefore you can modify the script to ignore the file.
for ($i=0;$i<$suma;$i++)
{
$count = $i+1;
$plik = $katalog[$i];
if ($plik != “.DS_Store")
{
$size = getimagesize("photos/01/$plik");
$szerokosc = $size[0];
$wysokosc = $size[1];
if ($i==$suma-1)
{
print “new Array(\"$plik\", \"$szerokosc\", \"$wysokosc\", \"Photo number: $count\")\n";
}else{
print “new Array(\"$plik\", \"$szerokosc\", \"$wysokosc\", \"Photo number: $count\"),\n";}
}
}
Hope that helps.
Would there be any way to pre_load the images, perhaps invisibly?
Hi all. I tried as best I could to get this (the original script that is) working, and it works locally on my harddrive perfectly, but once I was done, and uploaded it here: http://www.creativelab.ca/misc/test/locus.html it won’t get past the loading screen… any suggestions? I’d really appreciate any help that anyone can give me on this!!
Hello all. I would like to use this slideshow on my site, but my Web server does not support php. Can I just use it as an HTML file with a list of images? Also, can I put thumbnails of the pictures to click on, as on this site: http://www.capturephoto.com.au/, which uses Scott’s original script? I know nothing about JS. Thanks!
Oops, there should not be a comma after the address. This is the correct one: http://www.capturephoto.com.au/ . Sorry.
Looking for a developer to help us create a photo gallery with navigation, user ratings, advanced interface. Please email me if you have done a gallery before, and be sure to include a link to it.
Hi guys,
I liked this thread very much and I wanted to learn AJAX a little bit and change my existing gallery (menalto v.2 - too heavy for me) into something like Couloir. I added navigation bar (inspired by minishowcase) and updated toliman changes so that everything loads dynamicly. Index page is still to do (I want it like Couloir again) but it works. You can have a look here: http://www.porlasramas.net/gallery and if you want to download the code it’s here (no comments inside the code - sorry): http://www.porlasramas.net/temp/gallery.zip
Thanks!
Rafa
One thing i’d really like to see is the additonal code necessary to make it automatically change the image on a time interval. Anyone have any idea on how it’d be best go about doing this?
ImageWalker allows you to manage your image files visually. It simplifies the process of viewing, cataloguing, and publishing digital images. Its features include; web page creation, thumbnail generation and printing, batch image conversion, slide show and screen saver.
http://www.yaodownload.com/video-design/imageviewers/image-walker_imageviewers.htm
cool stuff! thanks indeed
Yes, having it change on a time interval would be fantastic! Please post if someone figures out how.
I’m having a problem that only shows up in IE (v6 right now - haven’t tested other versions yet). I’m setting up a site with multiple pages, each page having its own slideshow in the header. Each page works great on its own, but as I click back and forth between pages, one of the slideshows will eventually get stuck on the loading animation. It’s not a specific page or image, and the only way to reproduce it is to move back and forth between pages.
I had originally had each page in its own directory, calling the files from the root, but then decided to move all of the slideshow files into each directory. I’ve now put all of the page files in the root. I get the same problem with each set up. No problems with Firefox or Safari.
Any guesses or solutions?
Again, looks great in IE, but a large percent of my visitors use Firefox, so I can’t implement it.
First off great work! One serious problem im running into is the ordering of the images. No matter what i name the /image/*.jpg file to, it seems to randomly select and order. Could someone please explain why?
Thanks!
I couldn’t get the firefox fix to work, but got it to work in IE. The only problem I am having is that my photos don’t show up unless I refresh the page.
http://www.smithindustriestx.com
Just shows loading…
however, if you refresh the screen, images start showing up. Any ideas? Thanks.
- random select: readdir() function doesn’t sort result. Just do sort($results) before return in dirList().
- refresh problem: could be coused by many factors. Don’t have time to look up your code but check those: a) Slideshow.prototype extends properly functions to refresh photo? b) click are managed by Behaviour (set up myrules variable). I remember having problems trying to set up my own javascript for onClick event…
I have updated mine version a little bit. Maybe it could help some of you. Have a look: http://www.porlasramas.net/gallery/
Did someone figure out how to make it automatically change the image on a time interval? It would be very useful.
I’ve had the same problem like Richard had, a bit above at the comments, see “I’m having a problem that only shows up in IE (v6 right now - haven’t tested other versions yet). I’m setting up a site with multiple pages, each page having its own slideshow in the header.”
After trying a lot I asked my colleague Niels, who figured out an easy solution which works very well under IE6 (the problem doesn’t appear FF/Opera):
Just change the “load function”:
// Event listeners for onload and onclick events
/* comment this line out document.getElementById(’Photo’).onload = initFade;*/
/* enter next line instead */
setTimeout(initFade,500);
Works very well with IE6.
Thanx to Travis and Scott for the slidecode!
uh.. setting it on a time interval for autoatic transition between images is easy…
look for the permitNextPrev() function… basically you want it to look soething like this:
permitNextPrev = function(){
if(API.Photo._fadeRunning == false){
clearInterval(adv_timer);
if(photoNum > 1){
setTimeout(’nextPhoto()’, 4000); /* <-- NEW */
}
} else {
return;
}
}
i deleted the navigation caption and set the counter span to hidden, so i can put the images just to rotate automatically in a small square on my page.. because i didnt like the loading image and the next prev buttons…
hope this helps someone
Oscar: Which file did you modify the permitNextPrev function? I am not finding it in the code. Do you have an example online?
Thanks!
Great slideshow !
Look how i adapted it for my personnal portfolio !
mail me for any comments
Just found this site, thanks again for this!
Hi I was wondering if it was possible to detect whether the browser was IE5.5 and above since the current script errors on IE5.
Would it be possible to check the browser type using something like this :
http://bigi.co.il/libs/common/browserdetect_lite
or this :
http://www.bigbold.com/snippets/posts/show/1726
Hi,
I’m trying out Jesse’s updated script (http://jessejoe.com/js_slideshow_dynamic.zip) which works great!
I’m just wondering how I can make it automatically transistion to the next slide.
Oscar mentions to use setTimeout(’nextPhoto()’, 4000); but that was for the orignal script which is not used anymore.
Also is there a way to get the photo to fade out as opposed to hiding and leaving just the loading image screen?
Many thanks
Jesse => “Then you have to move that .DS_Store file from the images directory too, anyone know what that even is?!”
.DS_Store are Mac OS X files used by the finder, they are hidden by default. Windows have similar files but with another name.
Hi, Can someone say me what those functions are used for this php index.php? Seems I cant get it for work because my server php have some fuctions disabled atm. I am using php 5.1.4 but, it doesn’t work. Can someone help me! thx
I have an accordian effect from the Moo.fx effects library, and in all the good browsers (read “not Internet Explorer") the slideshow works perfectly when I hide the divs. However, in IE, when the accordian effect is applied, the current image is still displayed. See the link below.
A fix using PHP isn’t possible - it’s for a client that is insistent on using his hosting provider, and they don’t have PHP.
Here is the site http://waynearmstrongphotography.com/ajax-slideshow/test.htm
Much thanks!
Alec
Does anyone know how to pull a random image from a folder and display it? I am using the jessejoe version (which is great!) but can’t seem to figure it out.
Also does anyone also know how to get comments into pictures that are pulled from folders? I can see how it’s done with the original example, but how could you do it with a folder?
I am new to AJAX and am trying to some things, so… I tried to work with Scott’s work but am having just a little trouble. I really am trying to understand all the code. The trouble I am having is my work continues to show one extra image than what exists...and I think that leads into my next problem, the navigation allows you to “fall of the edge” and consequently crashing to functionality. Can someone help? I didn’t modify much yet so I would think it should function properly.
Thanks...Rob
Forgot the url: http://www.strathmerefishing.org/kids/index.php
does anyone have an example of HOW to add multiple galleries to the js_slideshow - such as on couloir.org and http://www.porlasramas.net? The source code I’ve dug through doesn’t have that functionality. Thanks in advance.
multiple galleries: http://www.porlasramas.net/temp/gallery_multi.zip. As I have already written: don’t have documentation for it. Just look inside the code to figure out how names of the files are converted automatically into descriptions of the photos.
how to do automatic trasition this slideshow? thx
Thanks a ton Rafa… I’ll figure it out from there. Have a great day
coool:)
Thanks a ton Rafa… I’ll figure it out from there. Have a great day
Rafa,
Can you please give an example how to populate Sections and Galleries?
Thanks a lot!
Would there be any way to preload the images, perhaps invisibly?
Ets - Sections and Galleries: I don’t know what you mean. In the zip I have prepared you have an example of sections and galleries. All you have to do is create your own ones. And nothing more: no databases no extra files.
Modpul - preload the images: the zip I had prepared already has it. Only for next image but I have decided that it’s enough…
I love this slideshow, but has anyone noticed this major bug in IE (here’s an example usage, possibly with more details than necessary) :
1. View Page 1, click on link to Slideshow Page from Page 1
2. View slideshow on Slideshow Page (no errors at this point)
3. Press browser back button to return to the referring Page 1
4. Press browser forward button or click link to Slideshow Page
5. Return to Slideshow Page and on return slideshow doesn’t load image, just continues with loader gif indefinitely
Basically, if a user views the slideshow, then another page, then tries to return to the slideshow, the slideshow will not play in IE. I’ve corrected for the cases in which a user returns to the slideshow from a link with a forced browser refresh (which is pretty inelegant). But I can’t think of a way around this bug when a user is using their browser nav buttons (which I assume many would do).
Also, I’ve tested for this on the homepage of this website and get the same error. On the Couloir site I am unable to reproduce it.
Any ideas on this would be great. Am I overlooking something? Has anyone else experienced/replicated this error?
Thx Jesse Jarzynka ! Worx great !
guys, im sorry for the late response.. yes there is an example onlien of the automatic transition
http://www.equitek.com.mx/nueva
btw.. I also load generate the arrays witht the filenames in real time with php or load them from a database, so it is easy to manage the pictures that i want in the slideshow
Do the photos have to be stored on the server? I’m trying to edit it so that I can use photos from flickr, but it won’t load…
oh.. nevermind
inside index.php, for php code you should use:
<?php
?>
and not
<?
?>
Some servers (such as my own) are not configured to handle the ‘shorthand’ php style tags.
Hi Great slideshow - but… does anyone know how to make it possible to put links to web pages in the caption or like the back and forth arrows a button to go to the related web page - i want to have it so there is the picture with a caption underneath - taken from an article on an another page - users can click so thay can go to read the it if they are interested.
Many Thanks
Any tips on how to resize the image if it is bigger than the screen size for Jesse’s updated script (http://jessejoe.com/js_slideshow_dynamic.zip)?
Thanks!
Hi,
Just thought I’d share this modified version with you. I used it to show some travel photos on my personal site. And also use it for a portfolio part of my site as well. I haven’t really got much time to go over the details but you can use the code from the different modified scripts with pleasure (please do not use my graphics or images however).
You can click on the specific images below to get to them. This is hand coded and not dynamic. The sounds effects taken from the slideshow have just been updated to work on the thumbnails. The polaroid effect on the thumbnails is from the A List Apart article
(http://www.alistapart.com/articles/cssdropshadows/)
And of course the link for the slideshow
http://www.johnandrewgarner.com/photos/photos_travel.html
A link to a specific image (view from apartment) :
http://www.johnandrewgarner.com/photos/photos_travel.html#6
Some other similar examples :
http://www.johnandrewgarner.com/portfolios/
Cheers
John
PS : If people are interested I can try and zip the main files together but I’m pretty busy at the moment so please bear with me if it takes me some time to do this.
Hi John,
Very nice modifications you have done...well done.
Im really interested in how you managed to get clicking the thumbnail to change the actual slidehow image but still retain the previous/next link function.
Would you mind sharing how you achieved this?
Many thanks
Hi,
If my memory is correct and I will check further tomorrow it is, this is the code that indicates what is to be displayed when clicking on it :
<a class="thumbnail img” href="#1" id="thmb0">
I seem to remember that id="thmb0" plays a role by passing a value through but you need the #1 part for the browser.
The second image would then need to be :
<a class="thumbnail img” href="#2" id="thmb1"> etc.
As I said I did this by hand and there are only a few pages that will remain the same for me. In view of how this works it seems highly probable that it could be implemented to work dynamically.
Sorry I can’t be more useful, late night. Hope this helps.
John
In use: http://www.paramountcc.com/work.shtml
This script’s CSS doesn’t pass W3C’s validator. Is this just the nature of the beast? The errors are:
* Line: 100 Context : #PrevLink:hover
Invalid number : background Too many values or values are not recognized : transparent url(images/slideshow/prev_rounded_sidebar2.gif) left 50% no-repeat
* Line: 104 Context : #NextLink:hover
Invalid number : background Too many values or values are not recognized : transparent url(images/slideshow/next_rounded_sidebar2.gif) right 50% no-repeat
I have downloaded a number of samples but they will not run on my local computer. Most of the time the php files will not open and when they do I just get the “loading” image.
Is this slideshow for php only? I wanted to use it within a .html file and dynamically load the contents of a folder.
first of all, i want to say thank you soooooooo much, bcoz this ajax slideshow, my community website is updated with a really coool feature…
ok now, can anyone help me with my problem, i don’t do javascript, i try to do it, but i can’t solve the problem here…
please go to http://www.fupei.com/PhotoAlbum-2029.html, in this album i’m using thumbnail for displaying the image, but if you see the javascript in http://www.fupei.com/modules/FUPEIPhotoAlbum/album.php?aid=2029 especially if you see the go0-go100 function, it make the file getting bigger n bigger, is there anyway i can make it more simple, like in php with looping like “for($i=0;$i<=100;$i++)”...??
maybe this is a simple problem about looping, but it’s really drive me crazy :((
thank you soo much for your kind attention…
sorry for my bad english 
Max Kiesler is an award-winning strategic designer and co-founder
and principal of Ideacodes.com, a web consultancy in San Francisco focused on next generation websites. About Max...
Blog Comments