Dynamic Image Gallery and Slideshow

Ajax Image Gallery

The updated version of the script is available here.

This extremely lightweight JavaScript image gallery and slideshow script clocks in under 3kb packed and includes a number of cool features. Recently I was looking for a nice existing script for a client project. I wanted something elegant, simple and lightweight. What I found were a number of scripts built on JavaScript frameworks and a few others that really lacked any appealing interface or were over 30kb. I challenged myself to build a full-featured slideshow gallery under 4kb. Hopefully I will be add a few more features to the script soon and make it a little mode user-friendly.

Here is an example of the markup…

<div id="gallery">
<div id="imagearea">
<div id="image">
<a href="javascript:slideShow.nav(-1)" id="previmg"></a>
<a href="javascript:slideShow.nav(1)" id="nextimg"></a>
</div>
</div>
<div id="thumbwrapper">
<div id="thumbarea">
<ul id="thumbs">
<li value="1"><img src="thumbs/1.jpg" alt="" /></li>
<li value="2"><img src="thumbs/2.jpg" alt="" /></li>
<li value="3"><img src="thumbs/3.jpg" alt="" /></li>
<li value="4"><img src="thumbs/4.jpg" alt="" /></li>
<li value="5"><img src="thumbs/5.jpg" alt="" /></li>
</ul>
</div>
</div>
</div>

The list section is the important element to the gallery. Each li has a value property that is set to the name of the full-size image. The interface is very flexible and can easily be altered in the HTML and CSS.

You will also need to setup the variables below and include the slideshow JavaScript…

var imgid = 'image'; // id of image div //
var imgdir = 'fullsize'; // full-size image directory //
var imgext = '.jpg'; // full-size image extension //
var thumbid = 'thumbs'; // id of the thumbnail container //
var auto = true; // automatic rotation toggle //
var autodelay = 5; // seconds before the image rotates //

This script isn’t completely polished yet but I wanted to go ahead and get it out there for anyone that can put it to use. It has been tested in all major browsers and is available free of charge for both personal or commercial projects under the creative commons license. Community support is available here. Paid support is also available, contact me for details.

Click here for the demo.

Click here to download the source.

Update 5/16/2008 – Updated CSS and added outline:none for the next and previous links.
Update 5/26/2008 – Updated the CSS to resolve an issue with resizing the window in IE6. Thanks to Jon Stoski for reporting.
Update 5/28/2008 – Pushed script inside global namespace. Fixed a couple IE related bugs.

Posted by Michael in AJAX, Design, JavaScript on May 15, 2008

G

personally i think you are selling a load of crap, the download file is not even close to 3kb, you are not talking about the include files you only talk about the html.
nice try but real webdevvers do it official style
http://www.leigeber.com Michael

@G – The zip file includes all the images included in the demo. I put these scripts out because I want to help other people. I am not selling anything here, sorry I don’t fit your bill of a “real webdevver”.
http://urbandude.com Bryan Peters

@G – Two clues that you don’t know what you’re talking about: you used the words “real webdevvers” and you left an anonymous comment.

Thanks for sharing the code Michael!
http://www.bram.us/ Bramus!

And where’s the Ajax in all of this? Ah yes, the title says so … it MUST be Ajax then!

(yes, that’s between < sarc > tags!)
http://www.leigeber.com Michael

@Bramus – Perhaps not Ajax in the truest sense of the word, no. The images are loaded as they are called and not all at once as they are in many similar scripts. There is no question the term “Ajax” has gained a broader meaning than its true definition, like it or not. In my opinion “Ajax” pretty accurately identifies the gallery as dynamic in nature, I meant no harm by it. The post title has been changed.
http://nophysic.com/ Louis

I like the fact that the JS is very small — reminds me of moo.fx and the good old days.

Though, I think it’s a little misguiding that the “next photo arrow” still appears when you are looking at the last photo of an album.

Thank you for sharing this little script anyway
http://www.leigeber.com Michael

@Louis – Thanks for the feedback, I thought it would be easier than clicking back through the previous images to get to the beginning. If anyone wants to second that the arrow should not be present on the last image I will take it out.
Neil

Michael, this is really impressive. Thank you very much for sharing it. Really appreciated.
http://www.hi-powered.com Ian

Thanks very much for this. Great work. I don’t understand why anyone gets critical about this as it is done free of charge. I agree with Neil, much appreciated.
http://www.ninjoomla.com Daniel

Michael, this is a great piece of work.

It’s light, looks good, and seems to be solidly coded.

Thanks for releasing it.

I personally like the arrow to go back to the start, so I vote to keep it.

If people as thick as G, and don’t know how to look inside a zip file before deciding how big something is, are the “real webdevvers” I hope I never become one.
http://www.theaccused.co.uk/ Andrew Mason

You might want to add outline: none; to the links to prevent Firefox from outlining the right and left links with a dotted outline.
http://gljakal.com/protoaspx/ Loris

Thanks for sharing.
One minor note: in your style.css you should add the rule “outline: none;” to your #previmg and #nextimg so they won’t show the focus rectangle when they are clicked in Firefox.
http://shemcreeksc.com/ BillyG

I didn’t peak into the code, but assuming it is that small, nice job! I was getting hung up when using the navigation arrows though.

Oh, nice house too!
Pingback: Dynamic Image Gallery e Slideshow di immagini : sastgroup.com
http://www.ezuk.org Ezuk

Very nice. I think I’ll be using this one. Thank you!
Sean

Nice slideshow! Thanks for sharing it with everyone! I’m amazed at how negative people can be!

Sean
captain

Thanks for this. Very nice and simple. Well done.
http://www.leigeber.com Michael

Thanks for all the positive feedback. I have updated the script with the outline:none, thanks for the suggestion. @BillyG – I will try to replicate the error and resolve, thanks for reporting.
http://www.videomusicdownloader.com wisnoe

hi nice ajax script.
would you merging your script into JQuery? i think your script will be more simple & flexible with JQuery. thanks for sharing it.
http://www.leigeber.com Michael

@wisnoe – I definately plan to incorporate this into jQuery along with most, if not all, of the other scripts I have written. I am a big jQuery fan and jQuery scripts have been requested many times already. Definitely on the to-do list, thanks for the suggestion.
http://3makestuff.com Aaron Bassett

Great wee script….& for the record I see the packed version at 2,914Bytes!
But rather than just showing thumbnails to users without CSS/Javascript why not link the thumbnails to the large images, then you could use the href of that link to determine the large image location.

That way your large images would be viewable by everyone and you wouldn’t be shoe-horned into keeping all large images in the same folder or naming them the same as the small image & finally they could all have different extensions
http://www.leigeber.com Michael

@Aaron – Thanks for the feedback. Want to make sure I am following you correctly… are you suggesting that I remove the dynamic loading and just hyperlink to the image location?
http://www.vernontgerzen.com The Real Trevor

This is pretty sweet. Now, I’m one of those people that knows enough to be dangerous but not enough to really cause any serious damage.
I noticed you changed the title from AJAX to Dynamic. Does that mean that it still pulls the images without ever needing to reload the page? I really like your demo and for myself I would think a couple things.
I was thinking that it would be awesome if when you selected a picture or gave a picture focus by using the arrows that it would give the thumbnail focus too. Maybe the slide transition could move to a certain spot and have a particular outline/border given via CSS. Also, it would be nice to be able to use any size image (roughly). Allow for resizing the image viewing area depending on the image size.
I think your script is awesome so I’m not trying to bag on it. Those things just sounded like good options for myself.
Keep up the good work man
http://www.leigeber.com Michael

@The Real Trevor – I changed the title due to the Bramus’ objection to my use of the term. The images are still pulled in dynamically. I had thought of your first suggestion and will definitely include it in version 2. I had not thought of the second but will definitely consider it as well. My goal with the first version was to make something simple and lightweight. The next version will have many more features and be more user-friendly. Check back over the next week or two for the update. Thanks for the feedback.
Rob

Terrific work. Simple and appealing. Thanks for releasing this to the public

Rob
Pingback: links for 2008-05-17 | JeremiahTolbert.com
Pingback: links for 2008-05-17 « toonz
Ray SF

Great work, Michael!
2 suggestions:

1) Can you make the Left/Right ARROWS
only appear when User hovers over the BIG photo?
In fact, the User could go:
– Forward, to next photo by simply clicking on the Right border
OR
– Back, to prev. photo by simply clicking on the Left border

2) Allow optional short CAPTIONS @bottom of BIG pic.
(text over a semi-transparent gray band, would look very nice…).

Thanks!!
http://www.leigeber.com Michael

@Ray – Thanks for the feedback. I have the arrows visible so a user quickly knows that they have that navigation option. You can easily alter that by removing the background images through the CSS. Your second suggestion is planned for the next version which I will have up soon.
http://www.freebieslinkshare.com achmadbiz

Wow , great ….
Just want to ask. Is it possible mouse hover (not click) as action trigger to display the large image ?
Pingback: Freak-Log™ #12 — Freak Group
http://www.leigeber.com Michael

@achmadbiz – Absolutely, all you need to do is t[i].onclick on line 27 of slide.js to t[i].onmouseover. Shoot me an email if you have any problems.
http://www.freebieslinkshare.com achmadbiz

Yup, i’ve tested and it works, many thanks to you… God bless you …
Pingback: Visual-Blast Media
Alex

I don´t use sequencial numeric image names, but dinamic filenames.
is possible?

thanks!
alexandre (brazil)
http://www.leigeber.com Michael

@Alex – You can use any filename you want, I just happened to use sequential names in my demo. Enjoy.
Pingback: Daily Blog Post 05/20/2008 « Murratore’s Weblog
Pingback: Galería de imágenes ultraliviana — Tablosign
http://www.realasponse.com Just Listed Postcards Guy

I’m going to post this on my blog…very Nice! Thanks for sharing
John

Michael

Your slideshow looks great. I have a questions/suggestion. Is it possible to have each of the big picture hyperlink to a specific page when click on?

Thanks,
John
http://www.leigeber.com Michael

@John – Absolutely, anything is possible You would need to pass in an additional parameter to the getImg function for the url and then either dynamically add an a element to the DOM or just modify the href on a pre-existing a element. You could also do the window.location method directly on the image's onclick event. Shoot me an email if you have any questions.
http://www.net1.cc lancey

One word only: FABULOUS! Keep up the good work, Michael!
Pingback: Una completa galería de imágenes javascript en tan solo 8KB | Adictos a la red
http://www.mlk83.com Matt

when hovering over the thumbs, is it possible to increase the speed? where in the script, can I find it?
http://www.leigeber.com Michael

@Matt- Sure, sorry it is not so clearly identifiable since I was going for ultra-compact on this script. The st and ss variables at the top of the script define the slider timer and the slider speed, the ss being how quickly the function is called in succession and the ss is how many pixels the div moves on each function call. The combination of both of these determines the speed and fluidity.
http://www.mlk83.com Matt

awesome, thanks for your help – great script by the way!!
http://joshellington.com Josh Ellington

This is wonderful! I was planning on building my own gallery as well, since I ran into the same problems as you (bloated, ugly code). You’ve done a great job. Keep up the good work.
Pingback: Dynamic image gallery and slideshow | Fluid Web - webdesign blog
Abhijeet Musale

I have selected ajax enabled website & add code along with javascript files.
But li tag cannot access value property, so i have seen only images. Slideshow
doesn’t work at all. can u tell ,e where is the problem?
Pingback: OneDesign| Dynamic Image Slideshow
snoop

great script – we like these little guys!

3 small comments:
1) i agree about the direct link to the larger images from the thumbnail lists, makes for better scalability. hopefully yu would still be able to load it dynamically (much like lightbox and co)

2) between loading the large photos – there is that annoying white screen with the loading icon. any way to not have to see the white screen would be good (maybe show the loding icon, but not make the previous photo leave till the new one is ready)

3) make some kid of an arrow for the thumbnail scroller, so that folks no there are more options, hidden.

cheers!!
http://www.leigeber.com Michael

@Abhijeet Musale – Shoot me the link to your project and I will take a look.

@snoop – I helped a couple others incorporate linking the other day, you can view the demo at http://sandbox.leigeber.com/slideshow2/ You can definitely alter the behavior of the transition, it would not be very difficult. Shoot me an email if you need help. I definitely plan on adding your number 3 to the next version which I have already started coding. It will be a large improvement. Thanks for all your suggestions.
John

@ Michael – thanks for your help with the hyperlink, it works great!
Pingback: F-LOG-GE » Blog Archive » Lightbox-Matrix
http://www.coleendunkley.com coleen

This is simple and very elegant. Thank-you!

I don’t know what I’m doing wrong but the slider doesn’t go beyond the eighth image for me. It just goes to number 8 and stops… I’ll send an email with a link to my project. along with the code I’m using.
http://trio.unl.edu TRIO IT Support

This is simplitastic !!!

I have a request for one minor tweak When I navigate from one image to another using the right and the left arrow, the images in the slider pane does not change i.e. they are not in sync. If the images in the slider pane will keep in sync with the images being showcased, it will be a great improvement from a usability standpoint.

Keep up your good work.
http://www.leigeber.com Michael

@Trio – Thanks for the suggestion, it is on the list for v2 which I hope to release in the next week or two.
http://jonstoski.com Jon Stoski

Hey there,

I like your little javascript viewer, its nicely done. KUDOS!
I noticed a problem while trying it out: when resizing my window (IE6) the main display area stays stationary while the rest of the control area shifts with the changing window size. FYI
Also a personal opinion about focus and the image slideshow: I don’t mind the slideshow effect before I use the arrows to control the picture, however once I use the image controls the slideshow rotation should stop. It feels like the computer is taking control back, IMO
http://www.leigeber.com Michael

@Jon – Thanks for reporting the IE6 issue. I recreated the issue, corrected it and have updated the post. As for the second suggestion, I did consider that. I decided to let it continue but that could easily be altered and I will weigh the issue out a bit more for V2.
Adrian

Thanks for this Michael, It really is a shmick little bunch of code, and also very flexible. Much smaller and neater than a flash or silverlight solution and best of all, easy to update for all of our little n00b clients!
Thanks again!
Damien

I’m truely saddened by the first few comments and overjoyed to see that the majority can appreciate the work you have put in here and then given freely to the community.

It’s quality contributions like yours that continue to raise the bar for developers like myself.

Thank you.
tim…

Nice man.

Haven’t tried, but would this work with a .mov or something – guess you’d need to include the embed script inside the <li> tag.??

And, how would I stop the slideshow altogether? So it’s just a click to view type scenario.?

thanks, good work.
T…
tim…

Actually, all I want is the scrolling images which I’d attach a URL to. Anyone got a clue where I could get a script like that?

Sorry, I’m just a dumb designer.

T…
Pingback: Bildergallerie Slideshow mit Ajax und Javascript for free » » pixey.de
http://www.leigeber.com Michael

@tim – The script could no doubt be modified to work with mov files. You can stop the slideshow once it has started by calling the slideShow.cncl function. As for your second question… I don’t know of anything pre-packaged like that. Your best bet is to modify my script. Shoot me an email if you run into any problems.
Axertion

Is there a way to configure this to grab a set of images from a directory? Even for the thumbnails? That would be amazing if it were possible. Let me know, I really want to set that up
http://www.leigeber.com Michael

@Axertion – JavaScript does not have the ability directly to accomplish what you are asking. You could however use PHP and return JSON to the JavaScript to build out the list. I will put it on the list of addons for v2. Thanks for the suggestion.
Jillian

If you double click on a thumbnail that’s not currently displayed as the large image, it sort of freaks out and stops. Probably not a major issue, and I’m not even sure why I thought to try it, but I figured it was worth noting.

Otherwise, I like what I see. Contrary to some other people’s comments, I like that the slideshow doesn’t stop at the last picture and loops back to the first, and I also like that it keeps rotating even after you use the arrows. There’s already too many slideshows out there with a bunch of complex options, I like the simplicity of this one.
http://www.leigeber.com Michael

@Jillian – Thanks for the comments. I will take a look into the issue you described and keep your thoughts regarding the functionality in mind for v2.
http://mleugim.hi5.com leugim

muy bonitooo, pero pienso que estaría mejor si las flechas serían de otra forma, otro estilo… buen trabajo!
http://www.leigeber.com Michael

@leugim – Gracias. Le invitamos a cambiar el interfaz.
Axertion

Yea man, I know JS couldn’t do this :/, I’m trying to create a PHP method but I can’t seem to get it to work. If its not to difficult is there anyway I can get this soon? Thanks
http://www.leigeber.com Michael

@Axertion – I have an overloaded plate for this weekend but next week I will be hitting v2 hard and will include this PHP option. Sorry for the long wait.
Axertion

@Micheal. This version is great for me so far, but the li value doesn’t work as expected in my case. I have it named right. Name your price to have this PHP directory feature setup ASAP. Thanks
http://trail7.com jeremy

nice! I wish more people would create lightweight apps with code versus images and plugins more often!
http://www.leigeber.com Michael

@Axertion – Shoot me an email with what you have so far and I will take a look when I get a chance.
Pingback: Discover The Best Of The Web In May 2008 - Opensource, Free and Useful Online Resources for Designers and Developers
Pingback: JavaScript sin frameworks / acualicio.us
Jeremy F.

Michael, you are da BOMB!!! For anyone else who’s wondering about how his script and code works, it’s AWESOME!!! Plus, if you have any questions, he’s totally willing and fast about getting help to you. Some might think this a fluff piece, but I honestly have nothing but praise for this guy.
THANKS MICHAEL!! YOU ROCK!!!!!
A suggestion for your next Mod to this?? Maybe put the scrolling thumbs on the left and make them scroll up and down? just a thought, I know I could use it on a few of my other sites. Thanks!
Pingback: Best Design Articles from May 2008
Axertion

Hey man, I figured out how to list the thumbnails based on a directory using PHP. But since I started using this I’ve been having trouble with the fullsize images showing. I dunno if the directory looking isn’t working. So I made the directory the exact same as the thumbnails and it still isn’t working. It should because:

A) <li value=”imagename”><img src=”imagename.jpg”></li>

B) the defined directory is the exact same as the thumbnails meaning the image names are 100% exact. Any ideas?

I’ll email you the pages I’m working on, thanks…
http://wuduwudu.com styxGH

thnx a lot man.. i’ve been looking for a lightweight version for a project i’m about to undertake.. its people like you who have made me what i am today.. like the others we still waiting to see your implementation of php.. i’d try it out
l8r man..
sagar

Hi Michael,
this is very nice and simple to understand. but javascript in this gallery may be support in all browsers?
http://www.leigeber.com Michael

@sagar – The JavaScript is tested working in IE6+, Firefox, Opera and Safari. Of course whether the user has JS enabled will also play a part.
http://none smith

I too would be interested in seeing v2 with descriptive text overlays and separate links for each picture. Looks great though.
cong

Hi ML. I have downloaded source. My website have folder imagenews/thumbnail for upload pictueres when i show pictures on website is not run. it only run under’s images. I don’t know ‘”thumbs” what do it do?
Please help me.
http://www.leigeber.com Michael

@cong- It sounds like you need to change the imgdir parameter to match with your folder structure. if you can’t get it worked out shoot me an email.
http://andrewbrowne.ca Andrew

Hi–will likely use this to showcase some projects, I’ll let you know how it works out. Cheers!
Danny

This is really nice ..can you use it in wordpress?? Ill try anyway..
Thanks this is really nice.
http://www.leigeber.com Michael

@Danny – Absolutely you can use it within WordPress.
http://prismdesigns.co.uk Jaswinder Virdee

really frickin nice but could you add something or enhance it to work better on an iphone would be perfect for a webapp im thinkin of making
Skribz

How would you go about adding more pictures to the slideshow?
http://www.leigeber.com Michael

@Skribz – Just add more thumbnails in the unordered list.
Help

Is is possible use images that are saved in mysql db + and using php to display it?
http://www.leigeber.com Michael

@Help – Sure, I know at least one other has done this and it will be native functionality in v2 which hopefully I will have time to release in the next week or two. Basically you would set up a loop and build out the markup for the unordered list, real easy stuff.
Help

Michael it would be fantastic if you could post something up. i like your current viewer, however all my images are saved in mysql, i know how to access them, but not sure how to incorporate to your app.
Deepika

Michael, excellent reusable script. Good job. But one suggestion as well as need solution as quickly as possible. when left and right arrows are moved then the thumbnails should be in sync with the large image. Is it possible? If so, then how? Thanks in advance
http://www.leigeber.com Michael

@Deepika – It can definitely be done and will be part of the upcoming version 2 but as of today that code is not complete.
http://askmeupifyourinterested;-) b-rad

hey I think that was some helpful info in general to maybe someone just getting started out. But overall a little outdated. I think you could really pump this up if you explained how to utilize this technique to interact with a database, or an automated PHP scripted XML file of some sort. That’s the whole point in structuring things like this is to develop something a client can add content to. It’s in a good format for further development.
http://www.ufo-games.com Ludo

Thx this great !

I think i found a little bug though: If there is a “underscore” ( _ ) in the name of the fullsize image, it wont display.
http://www.ufo-games.com Ludo

Ignore my last comment, my problem had nothing to do with the underscore. In fact i have to use 1.jpg, 2.jpg and so on for it to work. If i rename the image and modify the html with another name for the fullsize image it wont work. ( ex: <li value=”tutu”><img src=”thumbs/1.jpg” width=”179″ height=”100″ alt=”" /></li> wont display tutu.jpg )

Anyway still a very nice script.
http://www.leigeber.com Michael

@b-rad – This will be in version 2, definitely on its way.

@Ludo – The value parameter can easily be changed to the id parameter to allow greater flexability. This is also in version 2 that will be released soon. Shoot me an email if you need help getting it working sooner.
http://blog.accessko.nl Martin

Thx for this slideshow it looks very good, keep the good work and don’t bother the criticism from some users.
Tosin

How can I use this to fetch image from a php mysql database.
http://www.leigeber.com Michael

@Tosin – That functionality will be native to v2. It is very simple actually, you would need to create a loop for your results from the database and build out the list elements. Very basic stuff.
Kevin

Michael – Awesome script. Thanks for making this available to the public!

I do have one question: when you click either arrow, you eventually get to the end and have to click the opposite arrow. Is there any way to make the images loop infinitely?
http://www.leigeber.com Michael

@Kevin – Thanks. Not sure how you are seeing that. The script should function as you describe… maybe I am not understanding the question.
Kevin

Oops, you’re right it does loop. I clicked the arrow twice in a row and it froze the sideshow. It’s pretty easy to freeze (the double click issue)
http://www.leigeber.com Michael

@Kevin – Yes, I have run into that. I believe I have solved it in v2 so hopefully it will be gone soon.
elvis

I think this website is great. I found a lot of treasures.

The thumbs needs arrows on the right and left. I did not know it moves until I hover.

Thanks and keep up the good work.
http://www.michaelross.co.uk Agentwigs

Hi there, Great script! I’m having issues adding more than 64 images. When I add the 65th image (of 68) the scroller stops working. Any tips?

Thanks, Michael

Further to that, do you have any tips for vertical images?
http://www.leigeber.com Michael

@Agentwigs – You probably need to update the width of the #thumbs id in the CSS to a value greater than 10000px. Shoot me an email if that doesn’t work.
Pingback: Kleine JavaScript Bildergalerie - Gery’s Blog
marca

Hey, when is the new version comming – im dying to test it. Please let me know when to expect it.. thx for amazing work!!
http://www.leigeber.com Michael

@marca – Been very busy as I am moving in a week and taking a new job. Will definitely spend a little time on it next week. It is pretty high up on the list.
http://www.leigeber.com Michael

@hd – This will be part of version 2, in the meantime you could definitely customize the script to add the functionality.
http://www.pricewatch.org.uk Jim

I haven’t tested this out yet, but it certainly seems to work very nicely on my Firefox 3.
Yo

First, I want to say Congratulations on a awesome script. Thanks! for sharing. I am having a problem though, I resized the image gallery and everything works in firefox but in IE 7 for some reason the hover area where you scroll the thumbnail images seem to be off. It seems that the hover areas to scroll the thumbnail are to the right of where it should be. Am I doing something wrong? In firefox it works fine but in IE7 it is off. Thanks in advance.
nita

Thanks for sharing the code and it is pretty simple to modify. I would like to add the url to the images, so when they click on the image it goes to a particular page. Is there a easy way to do this.
http://www.leigeber.com Michael

@nita – Take a look at http://sandbox.leigeber.com/slideshow2/ where I helped someone else do the same thing. Shoot me an email if you can’t get it figured out or need help.
Nita

Mike, in this slideshow2 it looks like no matter whichever image you click on it goes to the same page? Am I understanding it wrong? I want each image to go to different urls. Also where can I find the java script for this above mentioned page(slideshow2).

Thanks Mike.
Pingback: Ajax ile resim galerileri ve slide show oluşturun : Sinan Elver | Blog
Didier

Hi,

Interesting script – but I’m unable to use it with alphabetic filenames – it only works with files with numbers… Did you plan to make some changes to allow filenames with letters ?
A+
http://www.leigeber.com Michael

@nita – You can define the link, they just all share the same test link for the demo. You can check out the JavaScript at http://sandbox.leigeber.com/slideshow2/slide.js.

@Didier – Check out the link I gave to nita http://sandbox.leigeber.com/slideshow2/. You can define images with any names. The next version of this script will also have that functionality.
Nita

Thanks Mike. I was just about to play with the existing code. Will let you know how it goes.
Nita

Mike, I noticed that the previous and next button doesn’t seem to be working ok with slideshow2.
Edwin

I was having trouble getting the large images to show. You demo was working but when I placed it on my page it failed
I changed line 12 in slide.js to the following

var id=t[i].getAttribute(‘value’); tar[i]=id;

The previous code was giving back a value of ‘-1′. No idea why the demo worked and mine failed.
I’m using your code in a jsp environment to let people create their own slide shows. Thanks a million for the code.
Edwin

Does this use caching or that handled by the browser, it seems to download connect to the image/server each time it loads according to the status bar
http://www.leigeber.com Michael

@Nita – I will dig into it a bit, hopefully I can get some time soon and get v2 completed and resolve any open issues.

@Edwin – Shoot me a link I would love to check it out. As for the caching, the browser should handle that. I have not run into an issue with caching thus far. Once the image is added it should never be downloaded again.
Sarab

Mike, I have noticed one problem with the javascript. The image slider(thumbnails) at the bottom breaks if the number of images is 12 or more. Don’t know why this thing is happening rest everything works great..good work
Sarab

Mike, I tried adding scroll buttons both sides of the thumbnail slider,but it didn’t work properly. Can you help me with tht. Thanks
Nita

Hi Mike, this is what I did using your JS code. It is very slow when I browse, not sure why. Here is the link:http://www.naperville-lib.org/index1.htm Also it looks different in mozilla.

Thanks
Nita

Mike, looping is not correct either. It does the first round properly and next time it loops from the second one.
James

is there a way I can add 2 sections for scrolling images? I’d like to have images up top and bellow but I seem to not be getting something right.
Nita

Mike, I was able to fix the code and it is working fine now, both previos and next button and also scrolling. thanks a lot for sharing the code with us. I like it very much.
http://www.leigeber.com Michael

@Sarab – I have not seen that before, can you email me a link? I will take a look. If you explain your second request a bit better I would be glad to help when I get some time.

@Nita – Sorry for not getting back with you sooner, glad you worked it out. Just shoot me an email if you run into anything else.

@James – It can definitely be done, shoot me a link with what you have and I will try and point you in the right direction.
Sarab

Hi Mike..I increases the width of thumb div and it worked..But there is another problem i am facing now.. I am trying to align the image vertically @ the middle and center can you help me out with tht.
Thank you
http://www.leigeber.com Michael

@Sarab – I need a link to look into it.
Sarab

Hi Mike..Thanks for getting back. Heres the link–>http://np.ospreymedialp.com/PhotoGalleryBackup/PhotoGallery/slideshow/Default2.aspx . I want to align the image in the center and middle. Thanks
Sarab

Mike
The script works fine for big images but the small images are not placed vertically in the middle of the control. I tried changing the css a little bit but no luck with that.Your help will be appreciated.
Thanks
Nita

Hi Mike, thats ok. can we open up the link in a new window? How to pass on the target attribute. I might be wrong, for one of the images I had a pretty long url, at this time it was not displaying the next image. So I created a temp page and in the temp page I am redirecting using window.open.
Have a nice weekend!
James

Mike
here is a link to the gallery http://www.360-studios.com/kids I was able to add another row but wasn’t scrollable. Also have you seen anyone making these rows vertical? I’d like to make a row vertical on each side but figured making 2 horizontal would be enough for now.
Maxim

Great work!
But I can’t upload more than 55 images
Why?
Kimberly

Thanks so much for sharing. This is just what I was looking for. I tweaked it to use for my own stuff and it looks great. I was able to use an iframe feature for it as well so it will work well in the website when it’s done. Thanks again…really appreciate it
http://www.leigeber.com Michael

@Sarab – Let me know if you did not get me email.

@Nita – The JavaScript is just building out the link using standard DOM, if you look through the code you will see where it is being done and you can tweak it to open in a new window.

@Maxim – You probably just need to increase the width of the #thumbs in the CSS. Shoot me a message if you have problems.
Mala

Great work!
thanks for the script ,
Actually i’m using this script in asp.net using c# and the thumb images are coming from database , upto tat point every thing is wroking when i click the thumb to get enlarge image is not wroking .

Plz help me if possible!!
Thanks
Tom

Beautiful script – lightweight, fast-loading – just what I was looking for. Thanks!
http://www.leigeber.com Michael

@Mala – I will need more info, code and a link. Shoot me an email with the details.
liucan

Thank you for your DEMO . But. I am on IE7. Clicking the picture will present the dotted line frame. Is this a essential one?

If there are new editions, will you please send a EMAIL to me: cancanliunx_c110@hotmail.com. Thank you again. .
Bobbie

Great script! thanks so much
I am also having an issue getting my images to center horizontally in the image area. I have portrait and landscape images and would jsut like them to all be centered. Any help with this would be wonderful.
Thanks so much
http://www.leigeber.com Michael

@Bobbie – You might be able to work out the solution by using margin:0 auto on the image for the width but the height or the image would need to be calculated with the JavaScript, subtracted from the height of the container, and then divided by two. Shoot me an email if you can’t get it worked out.
yankee

First let me say thank you for posting this. I really don’t understand people like G. You didn’t have to share this, again thanks.

Now to my problem, it’s late on the 4th and I’m trying figure out how to use unique (non-sequential) names for the large images and am failing. Might be too tired to see it but help would be appreciated.
http://www.doshtime.com Jay

This looks great and my question is gonna sound pretty stupid amongst experienced web designers, but i am an absolute beginner. I just wanted to ask if someone could walk me through implementing this into a simple html webpage. What code do i need to place in my index.html, to actually call your script to appear.
Cant wait to get this working, appologies for sounding stupid, but we all have to start somewhere .. thanks
http://www.leigeber.com Michael

@Jay – If you download the zip you should get a pretty barebones example that you can migrate into your project. Shoot me an email if you have any specific questions come up.
http://www.leigeber.com Michael

@Yankee – The current demo was created using numerics in mind. You might give http://sandbox.leigeber.com/slideshow2/ a try where you can use any kind of filename as well as links. Version 2 will also resolve the limitation.
Ihechi

This is great stuff!

Thanks a bunch for sharing with us Michael.

I just have a little issue.

This bit below is conflicting with the onload event handler currently on my site:
<BODY onLoad=”initScrolling( );” >
window.onload=function(){slideShow.init(); slideShow.lim()};

Any way to reconcile the two?

I will appreciate a response.

Thank you again for this great code.
nita

Mike, I am having a problem. in IE 7 most of the time when I replace with new images, it doesn’t display one of the three images in the thumbnail section. It gives ci.id is null error. It works fine in Mozilla. Here is the link:http://www.naperville-lib.org/
I change the images quite often aleast twice a week, with new urls.

Thanks.
http://www.leigeber.com Michael

@Ihechi – You need to create one onload function that calls the two current onload functions. If that doesn’t make sense shoot me an email.

@nita – I am not seeing the error right now. Shoot me an email if you have an example currently giving the error and I will dig into it.
Sascha

thanks much for sharing… =)

cool stuff, but cpu usage is very high =(
Mark

You mentioned earlier that you know of someone else that is using a php/mysql to create a slideshow. Do you have that website or their contact information. I have tried several different ways to get the images to output but nothing seems to work. This is a really cool tool. Thanks.
Sascha

i forgot to say that i used the version mentioned at http//:…/slideshow2/
also the rotation breaks between pig 2 and 3 and the buttons dont work anymore while being at this position.

thanks and greetz again: Sascha
Pingback: DON’T MEASURE: The Best Design Articles from May 2008 | Dalton Trent's Blog
marco

Hello!

I would be interested in only the part where the thumbnails flowing .. and each link to a web page .. can you help me? Thank you
http://www.meubleenligne.fr Xavier

Hi,
Thank you for this beautiful script. You said it will be possible to add a caption for each full size image displayed. But, I’m not able yet to display this. Would you help me ?
PS: Excuse my english, i’m an ignorant french boy
http://www.leigeber.com Michael

@Mark – Send me what you have and I will take a look. Should not be a difficult thing to achieve.

@Sascha – Sorry for the trouble, I will look at the script and update it.

@marco – Shoot me an email, would not be difficult.

@Xavier – Send me what you have and I will help you wrap it up.
http://thesaleslist.com Jonathan

Hi Michael,
Really nice gallery/Slide-Show you’ve put together, but is there any way to get it to pause for viewing an image and then restart again on request.

Great job though!
http://www.spokeo.com People Search Dude

Right on! This is so perfect! I’ve been looking for an image gallery that would do something like this. I still having trouble with the caption part but I’ll get it.

Thank again.
John

Is it possible for this script to work with remote images? The thumbs work no problem but the main photo doesn’t ever load.
Matt

Great script. I’m disgusted with the people who feel a need to complain about someone’s free contribution to the web community. Back under your rock, you!
john

One more question, any reason why this wouldn’t work? Again, thumbnails show up fine, but the main photo never loads.

<div id=”thumbwrapper”>
<div id=”thumbarea”>
<ul id=”thumbs”>
<li value=”38467867_1″><img src=”maarPhotos/38467867_1.jpg” width=”140″ height=”105″ /></li>
<li value=”38467867_2″><img src=”maarPhotos/38467867_2.jpg” width=”140″ height=”105″ /></li>

<li value=”38467867_3″><img src=”maarPhotos/38467867_3.jpg” width=”140″ height=”105″ /></li>
<li value=”38467867_4″><img src=”maarPhotos/38467867_4.jpg” width=”140″ height=”105″ /></li>
<li value=”38467867_5″><img src=”maarPhotos/38467867_5.jpg” width=”140″ height=”105″ /></li>
<li value=”38467867_6″><img src=”maarPhotos/38467867_6.jpg” width=”140″ height=”105″ /></li>
<li value=”38467867_7″><img src=”maarPhotos/38467867_7.jpg” width=”140″ height=”105″ /></li>
<li value=”38467867_8″><img src=”maarPhotos/38467867_8.jpg” width=”140″ height=”105″ /></li>
<li value=”38467867_9″><img src=”maarPhotos/38467867_9.jpg” width=”140″ height=”105″ /></li>
<li value=”38467867_10″><img src=”maarPhotos/38467867_10.jpg” width=”140″ height=”105″ /></li>
</ul>

</div>
</div>
</div>
<script type=”text/javascript”>
var imgid = ‘image’;
var imgdir = ‘maarPhotos’;
var imgext = ‘.jpg’;
var thumbid = ‘thumbs’;
var auto = true;
var autodelay = 5;
</script>
bheema

Terrific work. Simple and appealing. Thanks for releasing this to the public
Jeff

Great script.
One request. As I don’t want to show the thumbnails (instead I show 1, 2, 3,…), is it possible to have the javascript update the <li> with class=”selected” for examble, so I can add css to bold the currently displayed thumbnail?
Ganesh

Nice work.
What is the usage policy for your scripts?
Are there any copyright notices that should tag along with the scripts/ css?
How about the images that you have added? Can I customize any of these?
-Ganesh
Pingback: 100 Scripts and Script Resources | OpenJason
http://www.leigeber.com Michael

@John – Remote images would need to be handled a little differently since it is pulling them dynamically. Shoot me an email with a link for your second question.

@Jeff – Sure it is possible with some modifications. It really depends on your comfort level with JavaScript but it should not be difficult.

@Ganesh – Use as you see fit, absolutely no resitrictions. Please don’t take credit for my work though.
Eihwaz

Great stuff!
I see some people getting trouble with getting it to work with data, coming from php, I’ve had this issue too, for some reason the first version just didn’t work with non-numeric filenames, and I suck at JavaScript. Version 2 solved my problems – works like a charm. The only thing I had to do to make it work with my file structure (that looks like this: “pictures/products/fullsize” and “pictures/products/thumbnails”) was declare another var in <script></script> part of the code like this:
var imgid = ‘image’;
var imgroot = ‘pictures/products’
{other vars here}
Then in the actual JavaScript code by Michael I found this line:
i.src = imgdir + ‘/’ + is;
And changed it to:
i.src = imgroot + ‘/’ + imgdir + ‘/’ + is;
(Please note that this JavaScript code is from the second version of the gallery, the one that uses <li id=”blahblah.jpg”> instead of <li value=”blahblah”>), so it would look for files in the appropriate folder.
Again, don’t get critical, I suck at JavaScript and I know that, but I found the way to solve my problem without asking Michael to solve it for me.
And I can’t thank enough to author for his truly amazing work, contributed for free.

P.S.: Quote
“And where’s the Ajax in all of this? Ah yes, the title says so … it MUST be Ajax then!”
There’s a russian saying: “It says “pennis” on the shed’s wall, but there are firewoods inside”. I don’t think a person should care what technology was used to make something that works well and exactly as expected, you got what you wanted to get – a dynamic gallery without page reloads, why do you so eagerly need “Ajax” label on it?
Greetings from Russia, keep up the good work, Michael!
Operator

awesome script.. seriously

im sure its been mentioned before but i want to also request that the next version include a way to have descriptions for the images, either on them, or under them (hopefully make it easy to move it around). that would be sweet!
Operator

oh yea… a pause feature would be great
Jeff

Michael,
1. Re highlighting which thumbnail is currently being displayed, any help is appreciated. My javascript is near non existent. I know php but no javascript.
2. Can the script be modified such that it downloads the next image fully (but hidden) before switching the picture, such that to the user it is a seamless no delay change from one picture to the next (instead of showing the loading animation for a few seconds)?
Pingback: Focusing on Javascript (#3 of 3) « DGS about JAVA, Javascript
Pingback: Focusing on Javascript (#3 of 3) « AjAX and JavaScript
Tom Lee

This is great job, thank you so much for all your work.
I have one question to ask. My images file is coming from different path.
Where i need to change for “fullsize” and “thumbs” images files.

thanks
Sandeep

It’s really wonderfull, I was trying XML and other things, but this seems to very easy, simple, beauty – NO DOUBT ABOUT IT.

Thanks for releasing it.
Sandeep

Can these images be made copy protected? Please let me know
Ceres

This is fantastic, looks really good!

I tried it myself, but I can’t seem to get the bigger image to work, the thumbnails seem to be fine, but the bigger image never loads up… I was just wondering why this is…

I was reading the reply you gave to someone who had the same problem earlier:

“@John – Remote images would need to be handled a little differently since it is pulling them dynamically.”

I’m afraid I don’t understand how to handle them differently i’m not very experienced with javascript I was wondering if you could please help me understand/fix the problem?

Thankyou
http://jream.com Jesse

Hey this is awesome thanks dude Im going to play with it
http://student.missouristate.edu/d/david323/drew/thumbnailpages/achorusline2.html David Kaimann

I really like this gallery! I have been trying to find a gallery that works well in many browsers, including IE 8 (be warned…IE 8 is a NIGHTMARE).

I made a few small changes to the code to get this to work for me. For some reason, IE 8 will not hide the <li> thumb pictures at all, no matter what CSS modifications I tried. Instead, I decided to expand the thumbs area to allow for many images until this issue is resolved with Microsoft (if they decide to fix this issue).

Check it out! http://student.missouristate.edu/d/david323/drew/thumbnailpages/achorusline2.html

Thanks again!
http://www.leigeber.com Michael

@Jeff – The highlighting will be done in v2, with some JavaScript knowledge you should be able to figure it out. Sure you could load the next image too, look at the nav function… you will see where it checks for the next image. You would need to check to see if the slideshow extends that far and then fall the getimg function to preload it.

@Tom Lee – The thumbnail directory will be hardcoded in your markup. You can see the full size directory in the example script.

@Sandeep – Sure, you would just need a script to disallow left clicking. A Google search should give you back some free scripts, not much to it.

@Ceres – Send me an email with more details and a link. I don’t think I am getting the whole picture.

@David Kaimann – Thanks for pointing that out. It was a known issue when I developed the script. I fully anticipate Microsoft to remedy the issue by release… then again you never know
Willie

You told Tim on May 29th that he could stop the slide show by calling the slideShow.cncl function. Can you show me what that code might look like?

I guess the ultimate would be to have a combo pause/play button. Thanks!

Looks great by-the-way. Here’s my version http://www.newleafland.net/dev/before-and-after.html.

Please let me know as soon as possible.
Charlotte

Thanks for taking the time to post your code with a working demo!
You are a shining example that knowledge should be shared

Thanks
http://www.tomdt.net Tom DG

Been looking for a solid foundation. I’m working on a next-gen photo-gallery, just stopped working on it, gonna use yours.
JuanCarlos

Hi can someone help me pls?
im just triying to place 3 slideshows on the same page, i work with CSS and HTML, but not JavaScript,
when I duplicate the divs only one “imagearea” loads the image, but the duplicate slideshow does not.
so how do I make the script to load separate slideshows?

Thanks Michael for sharing this I think is great and thanks for any help.
Jeff

Finally got highlighting the currently displayed thumbnail to work (don’t know any javascript, so alot of trial and error)

Added this function:
highlight:function(id){
var l=t.length, ctr;
for(ctr=0;ctr<l;ctr++){
if(parseInt(id)===t[ctr].value){
t[ctr].setAttribute(“class”, “selected”);
}
else{
t[ctr].removeAttribute(“class”);
}
}
}

And added a call to this function at the bottom of getimg function:
this.highlight(id);
Jeff

Still want to get preloading next image in the background before fadeout of current image. Any help is welcomed.
http://gladwing.com Gladwin

Michael , thanks for the scripts.. This is nice….
Bernd

I combine these script with ligthbox-script. You can see a example here: http://www.friesenhof-altmark.de/bildergalerie.php
It works fine, but really I need only the code to scroll the images in a div-container. Who can help me?
Thanks
Bernd
http://www.kellyfowler.com/CMD/ Kel

I’m having the same issue as John (where the thumbs would load, but the main image won’t). Can you let me know what might be wrong? The URL is http://www.kellyfowler.com/CMD/. Any help is greatly appreciated!
Willie

Hey Jeff, I just changed the background and image to black and it’s much better. You are welcome to use my black loadeing.gif (http://www.newleafland.net/dev/images/loading.gif) I also discovered by using the tip Michael gave on May 18th above (change t[i].onclick on line 27 of slide.js to t[i].onmouseover ) the images load really quickly as you scroll them to the left. Not sure why but check it out http://www.newleafland.net/dev/before-and-after.html

Hope that helps. Anyone have any ideas on play/pause button idea?

Thanks all.
Willie

Hey I moved the above link and had to change the onmouseover back to onclick. The client said it was freakin out if you moved things around too much. Anyway it’s here now http://www.newleafland.net/before-and-after.html and here http://www.newleafland.net/portfolio.html . Enjoy!

Any sign of Michael? I am still looking for the play/pause button answer. Don’t mind getting it from anyone else if you want to chime in. Thanks.
Jeff

Willie, just changing the colour of loading to black doesn’t quite provide the solution that I hope for. Sure it looks nicer with black loading animation but my intention is to now show the loading animation at all. The idea is to load the next image (but hidden), once the next image is fully loaded, then fade-out the current image and fade-in the next image.
No idea how to do this.
Gerardo

Verry good! I am going to use this a lot!
THX!!
http://www.sun.ru Inga

Michael, thanks for your pretty script. I use it at estsp.ru (at russian)

Anyway, I have a question: how I can do result photo at left of my page, and thumbnails viewer at other place of page? Thank you.
http://www.leigeber.com Michael

@Willie – Looks like your demo is down. You should be able to call the function like slideShow.cncl(); The pause/play is in the works.

@JuanCarlos – The script does not currently support multiple instances. On the todo list to resolve.

@Jeff – Thanks for sharing, as for the preloading… you would need to modify the getimg function. You would need to check if there is another image in the loop and if it exists then also add it to the DOM for access later. Shoot me an email if you can’t get it worked out and I will look at it in the next couple days.a

@Bernd – You can just remove the functions you don’t need from my script. Shoot me an email if you can’t get it figured out.

@Kel – I am not seeing where you are implementing the script. Maybe I am overlooking it? Shoot me an email.

@Inga – You should be able to move the large image container around freely. Let me know if you are having trouble.
Willie

Demo’s are down because the site is live now.

http://www.newleafland.net Check Portfolio and Before and Afters.

I tried <a href=”javascript:slideShow.cncl();”>STOP</a> and it did not work. Am I missing something?
http://www.srilankawebdesign.com Piyal

we use this one for our web design gallery. really good.
http://joesspace.com Joseph

This is brilliant js/css work. I just took a look at Willie’s implementation of this code on http://www.newleafland.net — very nice job.
hardddisk

I saw a lots of people criticizing Mike specially in the beginning of this blog. Mike did this for free with no strings attached. we should be all thankful for people like him who try to teach and learn at the same time.

Thank you Mike I really like what you did.
Carlos Henrique

Hey Michael!
Congratulations and thanks for sharing the code. I’ve been looking for something very similar, but still have some question.
I am new with these things and would like to ask you if I can do something like you did with ASP.net (VB). I don’t need the thumbnails. all I need is query the database (Access) and show the pictures in a single square (or frame) which will change each 5 seconds to the next one. I don’t need the “Previous” and “Next” buttons either.
Can you help me, please.
Thanks again
Nuno Oliveira

Hi guys,
for people asking for a play/pause feature, I think I found it:), at least is working with me http://www.stt.org.pt/slideshow/# (soon will be off)

add this function in slide.js file

function pausePlay(){

auto = !auto;
if (auto) {
autoSlide()
} else {
clearInterval(ia.timer);
}
}

then in the index.html add this line

<a href=”#” onclick=”pausePlay ();”>Pause/Play</a>

and voila, that is it

cheers,
Nuno.
Nuno Oliveira

Ok I’ve updated the script, after a while of using we dont’t know if it’s in pause or play, so I updated the script to show what mode should we switch.

add in slide.js (replace the other function)

function pausePlay(){
var pPlay = document.getElementById(‘playPause’) ;
auto = !auto;
if (auto) {
pPlay.innerHTML = “Pause”;
autoSlide();

} else {
pPlay.innerHTML = “Play”;
clearInterval(ia.timer);

}
}

in the index.html replace the old link with this one

<a href=”#” onclick=”pausePlay ();” >
<strong id=”playPause” >Play</strong>
</a>

cheers,
Nuno.
Dani

Hi, Michael You’ve done a great job! Thank you for sharing it with us!
I encountered some problems while modifying the source code to fit my web page, but I managed to fix them.
It would be nice to see the newest version asap.
Jib Thomas

Hi, Michela

Suggest me how can I take the image name dynamically(means from database).
Vlad

Is it possible to redirect the user to another page when clicking the enlarged image?
Anyway, great job.
bruno

Hi Michael yours website is so marvelous.
I am trying to implemented yours slide show javascript into my web.

My question is can i add alt text into the slide image.Cos alt text can only appear in the scroll image not in the slide image.

Help me to do this please.thanks before.
bruno

Hi Nuno thanks for your play n pause script.

I just try your script but it can’t be play n pause . Not only that the image cannot appear just only the loading gif.

Can you help me please?
http://mss.co.ke Paul S

My site is under development so I’ve password protected it from Google. Please see:
http://www.diveinkenya.net/dive-photos
username: aqua
password: v

I have used your image gallery on this page and you can see that it works beautifully in all major browsers (as far as I can tell)… except firefox.

If you load up in FF you’ll see that the intervals are about 15 seconds instead of 5 and the cross fades are very jumpy. I think this is because I have the flash fish going at the same time so it’s messing up firefox’s javascript timer?

Can anyone else confirm they are experiencing the same issue on my site and is there something I can do to help it?
http://mss.co.ke Paul S

Oh yeah, one other thing… if you click next it kicks off the cross fade to the next image. But in the second it takes to cross fade if you click next again it hangs. This should be really easy to fix, the easiest way is to simply put in a flag that gets set to true when a transition starts and false again when its done, so when the flag is true simply ignore any requests for next/prev.
The downside of this is that if people want to hit next 5 times quickly to get to the 5th or 6th picture then it’ll ignore them, it’ll just move to the 2nd picture. I’d say that’s fine behaviour, but if you want to allow the quick clicks then the other solution would be to add extra code to your click event so when prev/next are clicked then first kill the cross fade effect (stop the timer and what ever else is going on) and service the latest click.

Hope this helps
http://mss.co.ke Paul S

@G – how amazingly rude. If you were a “real webdevver” who does it “official style” you’d know how to unzip a package and find the packed.js file inside which weighs in at no other than 3.00KB as Michael said.

You just got faced official style!
http://mss.co.ke Paul S

WHITE BLOCKS IN JPEGS IN IE6/7

I know everyone already loves what Microsoft has achieved with its superb array of web browsers but here’s another reason to love them:
http://www.alexjudd.com/?p=5

This is a must read for anyone using Michael’s script + JPEGs
Nuno Oliveira

@Bruno – if you follow this link http://www.stt.org.pt/slideshow/# you will see it working.
So what what exactly your problem is?
http://www.leigeber.com Michael

@Willie – Sorry shouldhave looked before I spoke. You can add a function “stop:function(){clearInterval(ia.timer)}” and call it to stop the slideshow.

@Nuno – Thanks for sharing.

@Vlad – I helped someone with that before. Take a look at http://sandbox.leigeber.com/slideshow2/

@bruno – Sure, take a look at the script where the image is being created in the DOM, just use the setAttribute method to add an alt tag.

@Paul – It looks like a CPU usage issue. My next version (if I can ever get time to wrap it up) is a little more CPU friendly but you will still see some degredation with FF when combining with Flash. It isn’t too bad on my PC but on others I am sure it would be.
Vlad

I have another problem. On my web form i have this slide show and another javascript control(separate js files). The problem is that i can’t get them to work at the same time. If i include both js files, only one control will work, but separately they both work perfectly.
nog

thank you,is great
@G,have you find a real reason for your existance?
bruno

@Nuno
Thanks Nuno its work perfect.
Many thank for your reply bro.GBU.
m.yosri

i tried to make it work dynamically by injecting the <li> tags after an onclick event then calling the slideShow.init(); it retrieved the thumbnails but couldn’t retrieve the full size images, although in the page source every thing looks just fine and all the <li> tags are correctly formatted, any help ?
Paul

its doesn’t working with subdirs, for example:

var imgdir = ‘fullsize/a’;
var thumbid = ‘thumbs/a’;

how i can fix it ?
Nuno

@Paul – Yes it works, I have it working with subdirs, maybe you are missing something or the problem is not the subdirs
Rohit

Hi dear, i am a student here in India. I was trying to use the nice script which you have provided. I am facing some problem in getting the slide Show Work.

It is working perfectly fine with locally stored images. But when i give url of remote images. Thumb bar comes but in the image area slide show does not start. Only a rotating circle keeps coming.

Then i replaced first image in <li> items by a local image. Slide Show gets on with first local image. But it is not able to load other remote images.

Kindly help!!
Lysdexic

Michael, Great script. )

Thanks for all the effort you are putting into this.

I hope to use the basic script in a photography site. I’m hoping to integrate a cart so that prints of a selected image can be purchased via paypal.

I’m hoping to do the whole thing in basic javascript without relying on a bulky framework.

Lysdexic
cris

nice code , but you shouldnt call it ajas as youre not using the XHR object. Anyway very nice.
steve

hey im liking this man. Im a graphic designer but more the print side of things, anyway to get rid of the thumbs and just have the main image with the arrows? thanks
steve

hey, also, anyway to get rid of the automatic rotation of the iamges? Sorry, im not trying to butcher what you have thanks for your help
Nita

I have modified Mike’s script on our website at http://www.naperville-lib.org.
Everybody loves it.
Nuno

@steve – read the previous comments and you will find how to stop the image rotation
Alex

Hi, Michael! Many thanks for a great script! Short question: what shoud i do to align an image that is smaller than the field size in the center of the frame? In my case it’s always stays in the left upper corner of the gallery.
http://www.zenstudios.ca Zen Studios

Hi Michael,
I would like to have the thumbnails scroll automatically when page loads: Onload event. Except I’m not sure how to call it.
Also I would like to slow down t he speed of the thumbnails onMouseover. Please help.

Great script but lacks supporting documentation . code comments.

Thanks again!
Colin

Hi Michael

Great script; I thought my JS was reasonable but I’m struggling with bits of this!I’m finding that if I use images which are larger than your demo ones, they don’t resize down to fit inside the image area and overflow. Thumbnails obey CSS fine, but for some reason main image doesn’t? Am I missing something obvious?

Oh, I’ve added basic scrollers to the thumbs without any problem, just using some CSS and your graphics & logic for now –

Add a couple of DIVs -

<div id=”thumbwrapper”>
<div id=”thumbarea”>
<div class=”thumbnav” id=”prevthumb”></div>
<div class=”thumbnav” id=”nextthumb”></div>
<ul id=”thumbs”>

</ul>
</div>
</div>

And CSS is -

.thumbnav {position:absolute; height:100px; width:48px; z-index:100; outline:none; cursor:pointer}
#prevthumb {left:0; background:url(images/ico_left.gif) left center no-repeat; border-left:5px solid #000;opacity:0.4; filter:alpha(opacity=40)}
#prevthumb:hover {opacity:8; filter:alpha(opacity=80)}
#nextthumb {right:0; background:url(images/ico_right.gif) right center no-repeat; border-right:5px solid #000;opacity:0.3; filter:alpha(opacity=30)}
#nextthumb:hover {opacity:7; filter:alpha(opacity=70)}

Hope that helps others till your new version is ready.
http://www.whitefirvalley.com/ Ivaylo Tinchev

I modified your script and it works on http://www.whitefirvalley.com/ now. Thanks!
John

Hi,

The slideshow is great! I am just trying to add the hightlight function mentioned above but it doesnt seem to work. Everytime I try, the slideshow stops working. I dont know much about js. I would really appreciate it if I could get some help adding this function to the slide.js file.

Thanks in advance!
Abdul Barek

Hi,Great!! works,I appreciate you for releasing it to world.

Best Regards
Abdul Barek
Web developer,teksymmetry,Dhaka
Saiim

Great Job !
I want to use this script in Joomla, so is it possible to have it in php/mysql version. Could someone help me ? Thanks indeed !
Scott

I think this is great, you did a awesome job and it is very much appreciated. I dont understand why some people feel they have to put down others, especially when that person has put in a lot of hard work and offers the result of their efforts for other people to use free of charge. Your effort is much appreciated by many.
Daniel Arnolf

Thank you for giving away such a good script. Anyone that develops JS scripts knows exactly how time consuming and frustrating can be to get this kind of components running smoothly.
I actually expanded your script to be XML driven to work with multiple galleries.
I really appreciate your contribution.
James

i noticed that if you click the left or right arrow too fast, it freezes in between images and doesn’t ever advance. and you can’t click a right or left arrow to advance it out. you can click a thumbnail to unfreeze it though.
Taris

First, thanks for a great script, and for extending it to include links.

I found a small error in slideshow2, slide2.js (for adding a link to the image)
In function getimg, the line “i.id=id” (after appending children section) should be “i.id=is” after this fix it works perfectly.

Thanks!
http://mural.uv.es/berol/rsf/galeria_es.html Juan A.

Hi Michael

Thanks for sharing so interesting script. I implemented the ZIP file into my web page (a NGO web page) and although the thumbs work the main image does not load.

the link is

http://mural.uv.es/berol/rsf/galeria_es.html

Could you help me please? I’m sure I’m doing something wrong
Pingback: Garuna Web Designer » Blog Archive » Dynamic Image Gallery and Slideshow
Pingback: Javascript image gallery roundup | Mike Meisner
tmo

Do you have a version of slide.js that is commented? I am particularly interested in how you are creating the scroll effect for the thumbnails as I am converting it to a vertical list instead of a horizontal.
eddie

I would realy like to use this solution but cant intergrate it into my current webpage as i am not a dev. Can someone advise or suggest where I could go to get this intergrated on my current web page
http://ommultimidia.com/8081ofilme Naluh

Man, this code is simply perfect.
Perfect.
I’ve never seen anything like this before. Thank you very much. My thanking on the page.
stephan

does the script require that the image names be 1.jpg, 2.jpg, and so on? I’m having a hard time grabbing the full size image from the folder where it’s located. the images are named p1.jpg, p2.jpg etc.

much obliged, this is a quality script.
stephan

nevermind, I switched to the slideshow2 script which allowed me to change out the “value” in the <li> tag to an “id”. much better. still can’t get the arrows to function (I think it’s a z-index issue) but overall I’m so excited about this script, thanks again for your hard work!
http://pranavgupta.wordpress.com Pranav

Hi, Itr very nice, I have added this in my webiste and working wonderfully. Thanks
http://n/a Mihai

Thanks a lot for the script!

Some may be a bit confused about the term “dynamic”, thinking that of an automatic scan of the image folder(s).

You still need to edit the index.html file, to include all the pictures.

@Paul on 26 Aug 2008

Again, it may seem comfusing, but to make it work with subdirs:

<li value=”1″><img src=”thumbs/a/1.jpg” width=”179″ height=”100″ alt=”" /></li>

…
var imgdir = ‘fullsize/a’;
var thumbid = ‘thumbs’;
…

The confusing part comes from the variable thumbid. It is set to only ‘thumbs’, even though I moved my thumbnails into the subfolder ‘a’.
I hope this helps.
Socola

subfodler problem, please help!
this is the directory to my thumbs and thumb image name as ATSA00000.jpg, ATSA00001.jpg, ATSA00002.jpg, etc…

<li value=”1″><img src=”../Gallery/motherday2007/thumbs/ATSA00000.jpg” width=”179″ height=”100″ alt=”" /></li>

below is the javascript and inside the fullsize the image also name as ATSA00000.jpg, ATSA00001.jpg, ATSA00002.jpg, etc…
the script and the css files are under directory of “../Gallery/style.css”
Some how the fullsize image didn’t load:- can you please tell me what I did wrong.

<script type=”text/javascript”>
var imgid = ‘image’;
var imgdir = ‘../Gallery/motherday2007/fullsize’;
var imgext = ‘.jpg’;
var thumbid = ‘thumbs’;
var auto = true;
var autodelay = 5;
</script>
<script type=”text/javascript” src=”../Gallery/slide.js”></script>

http://hoithanhphoenix.com/navigator/motherday2007.html

thanks for the great script,
http://rebelcitymusic.com ckyeu

Why are people hating for no reason…

Thanks for it… I love it
Socola

Oh, I got the image to load. The name of the image have to be 1.jpg, 2, 3, no letter on it. otherwise it won’t load.

Micheal, can you please show me how do I center the image?

thanks,
sona

I want to use this slideshow but facing some problems. i cann’t use more than five images, if i rename the image to more than one character then fullimage is not visible
please help!
Susmith

Thanks a lot for the wonderful script. I am an independent web developer and your scripts have been invaluable in all my assignments. Hold me to my promise of a donation once the money starts trickling (if not flowing) in.
Cheers,
-Susmith
jCook

Hey, Great Script.

I am also having proplems aligning the images center. Margin left and right at auto wont work.

Please help
Christian

I don’t want to use the auto slide function, so I have tried to turn it to false but when I does that, I can see that Internet explorer makes an error.

What is the opposite of true? ;o)
Nano

Cool stuff! I want to modify the script, could anyone explain me the means of variables. Thx
fignewtn

Nice. gallery. thanks a lot. is there any way to make the whole thing a bit smaller? im trying to make it fit my page layout. Some text to describe the images would work well too.

THnks a bunch
Seafroggie

Hi there!

Thank you for your script. I saw in the previous comments that some people were not so thankful. What the heck, I think it’s a nice gift! But I would like to ask the same question as the previous person, how can I change the size of the whole thing. Also for my page it’s too big…
Pingback: Most Wanted Ajax Techniques: 50+ Ajax Examples and Tutorials | Noupe
Pingback: Most Wanted Ajax Techniques: 50+ Ajax Examples and Tutorials | SulVision
Pingback: Ajaxian » Groups of 50+ Ajax Examples
Pingback: Most Wanted Ajax Techniques « Program2.0
Pingback: +50 Ejemplos en Ajax | ProyectoAurora.com
tom

1) how does one implement image captions??

2) how is it possible to not display thumbs if we don’t want to??

3) how can the arrows’ opacity be varied to make them more ‘transparent’??

4) how does one change the overall size??

5) are all images required to be the same size??

6) will this script work inside an asp.net page?? some scripts don’t.

Thank you, Tom
http://www.maxistuudio.fie.ee LeRoi

7) How can I use not only .jpg, but few pic formats in the same gallery?
What to do, when the full size pictures and thumbs placed in the same folder?
Jay

Hi

I have this code. My Images are not numbers they are words. The thumb nail appears file but the Big picture does not.
If I change the value to a Number then it works.
Please help

<div id=”gallery”>
<div id=”thumbwrapper”>
<div id=”thumbarea”>
<ul id=”thumbs”>
<li value=”9″><img src=”uploads/thumbs/a.Jpeg” width=”100″ height=”150″ alt=”" /></li>
</ul>
</div>
</div>
<div id=”imagearea”>
<div id=”image”>
<a href=”javascript:slideShow.nav(-1)” class=”imgnav ” id=”previmg”></a>
<a href=”javascript:slideShow.nav(1)” class=”imgnav ” id=”nextimg”></a>
</div>
</div>
</div>

<script type=”text/javascript”>
var imgid = ‘image’;
var imgdir = ‘uploads/fullsize’;
var imgext = ‘.Jpeg’;
var thumbid = ‘thumbs’;
var auto = false;
var autodelay = 5;
</script>
<script type=”text/javascript” src=”js/slide.js”></script>
Joi

1) If I change the value of <li> to a number it works but if it is a character it does not
2) If I want to pass a link with images so that when I click on the BIG image it opens to the specified link in another window then how to do that??

pls help
Pingback: Most Wanted Ajax Techniques: 50+ Examples and Tutorials | SulVision
Ruana

Some people never are satisfied. They don’t know when to shut their mouth, don’t know how to be grateful AND don’t know how to make it better either!
They never learned that talking is silver and shut-the-fuck-up up is gold – especially when it’s as uncalled-forand disagreeable as in this case.

If you’re unable to appreciate what is offered to you here (for FREE!) just leave – and don’t waste other peoples time and webspace.
Ruana

Sorry, I didn’t realze that my post will be placed at the bottom – I was referring to one of the very first (perhaps the first?) posting here. It came from one “Gd” (G on 15 May 2008 at 12:28 pm ). To the other writers: no offense intended.
sebastian

This is a create script. It really saved my bacon, I can tell you. Thank you very very much.

The only thing that’s causing me a bit of bother is that I can’t seem to get 2 bits of javascript to work on the same page. I have a menu that works with one bit of javascript, and when I add this one to the page the first one stops working. I’m not a developer, probably obviously. Is there some kind of secret to getting two different javascripts working?

Otherwise, this is amazing. You just may be one of my new heroes.
sebastian

Oh, sorry. Just after I wrote my last comment above, I thought I might be able to combine both scripts into one javascript file. It worked. There might be a better way of doing it, but this seems to work for me. By reading the code of the web geniuses (like Michael here), there’s a chance I could get half-way competent. Great script. Thank you.
peter gloder

Hello, I try your this slide show, it run very nice. But I have problem that if I have img extension format has two:.jpg,.bmp. How can I extern your code to run it?? Thanks..
Randy

I have an issue that was mentioned by someone above. It works perfect upon setup, however, in IE7, when I replace an image, but keep the same file name, IE does not display the newer image. If I change the file name(and matching value) the old image still remains and then you cannot even click on it. (Even after clearing cache several times.)

It works perfect in other browsers(can you believe?). I am only testing it on local, so it is not live anywhere. If you get a chance, please try swapping an image to see it for yourself.

I do love the slideshow! It has the BEST features I have ever found after extensive Googling. This is why I want this to work so bad because I will use it in every site I build!

Please ignore all ignorant comments as you are a very thoughtful person for posting this!

On a side note: Why do people complain about file sizes and such when it comes to a SLIDESHOW!!? Are they keeping their images under 4k? Would they move to Las Vegas and complain about all the lights? What do they expect?

Thanks!

Randy
Tariq Momani

I try use your gallery in my website it’s work fine in FF but in IE the bar ot thumb image not move for the hidden images plz can you help me in that ??

at all it’s so nice work
thnx
http://www.2ndvizion.com Michael S.

Great work on the photo gallery! I am having the same issue that Yo(post on the 22nd of June) and a couple other peeps are having. I did modify the css to make it 510px wide and I changed the arrow images, but I don’t think I did anything that would mess with the scroll effect. It is only happening in IE. Works like a charm in FF. Any ideas?
Pradeep

Hi Michael,

Your gallery is nice.

I’m using your gallery in one my websites. Please help me out with some javascript problem.

I want my images center aligned.

I searched all JS tuts, I didnt find solution. I’m not so good coder.

I have reduced size of the image. I have not reduced the “gallery” width.

Just tell me, what javaScript code i should use to make images center aligned? and where should i put?

Waiting for your reply.
Joel

Thank you for writing this script, great work!!

I think it works great and it looks very professional, I’m not sure what people are talking about and they should shut up or show us what they can do.

I appreciate the time and effort put forward to make something and I am grateful that you are sharing it with others.
NewToCoding

Hello all Im 14 yrs old and i am new to coding. I downloaded the zip file and tested the html file and it works! which is cool. But y does IE prompt me about active x? is there a program running on the page??? Please help. I want use this code but without having my friends see this active x stuff, how can i do that?? Thanks alot guys for any answers.
http://www.leigeber.com Michael

Comments are now going to be closed. This post is getting way too long. A new version of this script with many improvements/new features is scheduled to be released on 11/30/2008.