Animated JavaScript Slideshow – 5KB

JavaScript Slideshow

This dynamic JavaScript slideshow is feature packed and under 5KB. It is the long awaited update to my previous script here. A few new features include description support, link support, no naming restrictions, portrait image support, graceful degradation and active thumbnail status. This script was built ground-up and will soon be included at scriptiny where all my scripts will be added as they are updated, debugged and incorporated in the new TINY namespace. I will also document the scripts more thoroughly and publish multiple examples. I will continue to publish scripts there and support as I have time via the new community forum. I will try and post more frequently here on a wide range of web development related topics.

Here is an example of the markup to build a slideshow…

<ul id="slideshow">
	<li>
		<h3>Image One</h3>
		<span>photos/image-one.jpg</span>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
		<a href="#"><img src="thumbnails/image-one.jpg" alt="Image One" /></a>
	</li>
	<li>
		<h3>Image Two</h3>
		<span>photos/image-two.jpg</span>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
		<img src="thumbnails/image-two.jpg" alt="Image Two" />
	</li>
</ul>

Each “li” above represents an image. The “h3″ content becomes the title for the image and the “p” the description. The “span” content is the path to the fullsize image. If you want to link the image wrap an “a” tag around the “img” tag which is the thumbnail image.

The following are the parameters that can be set on the object… more complete documentation will follow soon. Default values are displayed as (10) and recommended values as [1-20].

Images

imgSpeed = int; (10)
navOpacity = int; (25)
navHover = int; (70)
letterbox = “string”; (#000) required color for letterbox on portrait images
link = “string”; class name for link hover state

Auto Slideshow

auto = boolean; (false)
speed = int; (10)

Information Dialog

info = boolean; (true)
infoID = “string”; required for information dialog
infoSpeed = int; (10)

Thumbnail Slider

thumbs = “string”; id of thumbnail slider, disabled if not set
scrollSpeed = int; [1-20] (5)
thumbOpacity = int; [0-100] (70)
active = “string”; required for thumbnail active border
spacing = int; (5) spacing between thumbnails
left = “string”; id of left navigation link, required for slider
right = “string”; id of right navigation link, required for slider

Here is an example calling the script…

var slideshow=new TINY.slideshow("slideshow");
window.onload=function(){
slideshow.auto=true;
slideshow.speed=5;
slideshow.link="linkhover";
slideshow.info="information";
slideshow.thumbs="slider";
slideshow.left="slideleft";
slideshow.right="slideright";
slideshow.scrollSpeed=4;
slideshow.spacing=5;
slideshow.active="#fff";
slideshow.init('slideshow','image','imgprev','imgnext','imglink');
}

The init function takes 5 parameters (id of the slideshow content placeholder, the id of the image placeholder, the id of the previous image placeholder, the id of the next image placeholder, the id of the image link placeholder).

This script 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.

Posted by Michael in JavaScript on December 21, 2008

http://www.digitaldesignagency.com Kate

I really like this, I currently use lightbox, but will give this a go, thank you.
Antonio

Awesome. I would like to know if some features are supported, and if not I’d like to know if you think it’s possible you’ll add them in near future:

1) when image N is showed, it preloads image N+1, N+2, N+3, etc.?

2) let’s say it preloads (or will preload) k images forward; I’d like to set k as a parameter (e.g. to save bandwidth I’ll set k=1)

3) when the slideshow box is not visible (tab not active, or at least vertical position plus height of the box, outside of the visible window area), I’d like to have a parameter saying “pause_if_not_visible”. E.g. to save bandwidth I’ll set this to “true”.

Finally, let me say you do produce very great quality standalone compact scripts. I expect you’ll be widely known in this niche field (soon, or with time).
Battista

Great! how to create more galleries on the same page?
http://www.leigeber.com Michael

@Antonio – Currently it only loads the fullsize images as needed. It would be fairly simple to preload further ahead although on a broadband connection there would be very little need. I will note this request and consider it for the next release. It would be very difficult to automate the third option since the script would not be aware of all the markup around it. You could set auto to false and then set the auto timer to begin the rotation as part of your visibility script.

@Battista – Create a new slideshow object var slideshow2=new TINY.slideshow(“slideshow2″), assign attributes and then call the init function for the object.
Brad

Michael – very nice extension of the previous slideshow. Many, many thanks for making this available.
http://afas.sk solzenic

great script, but…
1. what about another parameters for witdh and height of image…
2. thumbs could be resized automatically
http://www.leigeber.com Michael

@solzenic – The width and height will currently be determined by the browser since many times, especially if the data is pulled dynamically, they may not be known beforehand. Maybe I am missing some of the rationale behind your second request? You mean resized from the full sized images? That really defeats the dynamic nature of this script which only loads the larger images as they are needed. Else they would all have to be leaded before I could resize. I might consider writing a PHP class to resize the larger images though.
Pingback: javascript Slideshow uygulaması sadece 5 KB! « basarozcan
http://w3.org Mark Up

Nice work – looks nice. I think that you’re missing a closing span tag in your example though.
http://www.leigeber.com Michael

@Mark Up – Thanks, fixed now.
Pingback: links for 2008-12-22 at DeStructUred Blog
Pingback: Free JavaScript Slideshow
Pingback: 5 KB ile ücretsiz Javascript Slayt Gösterisi
http://www.dragnet.se Jonas

Its absolutly perfect! (but may I only suggest three things: be able to save the large image (with a right click) and enable a direct link to the current image and finally instead of animating the information up and down – crossfade it together with the nex image. I think it will be a smoother experience.
http://www.cnizz.com Cnizz Web Development

Now this is just sweet, is this using any sort of library such as mootools or jquery?
http://www.leigeber.com Michael

@Jonas – Thanks for the suggestions. I will see what I can do on your first request. Currently you could just use a link that would open the image or a large version of it, are you referring to something separate/different? I may add your third suggestion as an option in the next release.

@Cnizz – Thank you, it is completely standalone.
http://www.stream.si Stressed Student

Excellent script, will use it on my site, thank you for this.
EWeb

This really does look great, and I applaud not using any JS libraries to make it work. My only suggestion is that instead of manually setting the parameters after calling the TINY.slideshow constructor (i.e., slideshow.auto = true), it’d be a little cleaner to allow an object literal to be passed into the constructor, as in:

var slideshow = new TINY.slideshow({
auto: true,
speed: 5,
link: ‘linkhover’,
….so on and so forth
});

It essentially accomplishes the same thing but it also allows you to process all the passed parameters however you want within your constructor, allowing for some flexibility. For example, you can allow both an id string or a DOM reference for the same parameter, but just adapt accordingly within your constructor.

That’s minor though. This thing is awesome.
http://www.leigeber.com Michael

@Eweb – Excellent suggestion, I agree that would clean things up a bit. I will try and get that reworked today with a couple other tiny bug fixes.
Chris T.

This is fantastic and I adore the improvements over the last version of the slideshow. I’m currently using this on my company’s intranet site to display pictures from our Christmas party. Thanks so much for this free code!
Pingback: Animated Javascript Slideshow | display:inline
http://jawa9000.com jawa9000

Awesome script! The only thing I’d like to see is the wrapper handle both horizontal and vertical images.

PS, can I have the kitchen sink for Xmas?
http://www.leigeber.com Michael

@Chris – Glad to hear its making it into the wild.

@jawa9000 – I have big plans for this script. Of course it handles portrait images now but only with the letterbox. The next version will have the option to auto resize the entire slideshow to any size no matter the size.
http://www.polen.pl Jens

Thank you very much – this is a really great and really flexible tool. I like it very much and will tell many others about!

See you!
http://www.redips.net/javascript/image-animation/ www.redips.net | Image animation with JavaScript

It looks very nice and smooth on FF3. I’m also playing with image animation but in my example, all needed JS lib scripts are hosted on Yahoo. This way, you can have even smaller JS files. Anyway, thank you for a great tool.
Bye!
Kristjan

nice and thans !
what about put height and width on the img tag and js add element.style to div’s depending on the height and width. Then you do not have to resize
Pingback: links for 2008-12-25 « 個人的な雑記
http://ibs-plekhanov.ru StasOn

Thanks! Great slideshow!
However there are some questions on it.
1) There is an issue horizontal images with different height. When one loads first a high image and then a less high one, the image with bigger height can be seen underneath the less high one…
This is what I mean (screenshot) http://img243.imageshack.us/my.php?image=slideshowproblemwk1.jpg

The important thing is that when you load vertical img above a horizontal one everything is fine, the script makes dark backgound.. So I hope it’s easy to fix…

2) Is there any variable to address to star the slideshow not from the first img? (i.e. to start from 5th but the first 4 imgs are still accessible via the slider with thrumbs)

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

@redips – Regardless of where the script is hosted it still has to be downloaded before the object is initialized. I would be careful depending on a 3rd party to host my script, even large companies like Yahoo sometimes have connectivity issues.

@Kristjan – If you were pulling from a database of file system you may not have that information. I will consider making it optional in the next release.

@StatsOn – Thanks for the suggestions. The first should be an easy fix that I will look at and the second will be included in the next major update.
aladin

Hi,
I don’t know how to install that tiny slideshow on my PC ?

Is there a good tip ?

Thanks
http://www.hamroawaaz.com Rahul

This is a cool javascript slide show. have downloaded it.
Pingback: Slevin Web » Slideshow Gratuita in Javascript
http://vodacoagency.com Burak Erdem

It’s a great script but has a very big problem. When it displays the second part of images, the thumbnails don’t slide to right to show the second set of images. As you can see here http://img229.imageshack.us/img229/3391/slideshowqg9.jpg the top image’s thumbnail doesn’t exist at the bottom. That’s because the thumbnails don’t slide to right automatically. I hope you can fix this problem. Other than that, it’s a great script.
http://www.leigeber.com Michael

@Burak – Thanks for the suggestion, that is on the list. I will be posting a mini update soon and will try and include that feature.
Seb

Wow. Perfect.
I would like to use it as a content slider.
Is it possible to remove the bottom thumbnails, as well as the nav icons ?
Fot the nav icons I gusse I could put pixel trans image.
Thanks for your great work.
Ollie

Hey, i’m trying to modify this script.

I want to be able to click the main image and move on to the next image instead of opening the “#” link or any other URL. I’ve been thinking of a few ideas:

1. Remove the image “link.gif” completely and just change the JS to skip image when i click anywhere on the large picture.

2. Edit “link.gif” to be something like <a href=”http://i41.tinypic.com/o00wok.gif”>this</a>, and then make it the same transparency as the side nav images (left.gif and right.gif) or perhaps just appear when i move the mouse close to it. Again, modify the JS to move to the next image on click.

Hope that makes sense! I wondered if you could show me what code to change, since i doubt it’s popular enough to warrant a new parameter/config setting?

Absolutely love the code though; very neat and this website i’m building looks a load more professional thanks to it!
Pingback: Free JavaScript Slideshow (Lightweight-5kb) | Greepit.com - A Handsome Design Blog
ken

Only things I’d wish for is for it to default taking up as much space as possible in the browser (the demo uses maybe half the new browser tab that shows up in FF3) and a way to add a link to other galleries.
Ollie

I have also been trying to combine this script with Lightbox, so that clicking an image link would open it up full size. Sadly, I’m still not sure where the link url is generated in the script; I believe I need to use..
escape(“”)
..where the url is generated, so i could append..
rel=”lightbox”
and have that script take over. Having tried this in a few places, i think there is a conflict between scripts that I am unaware of.

In response to ken, I agree that it doesn’t scale very well when you try and change the dimensions, but as for the linking to separate galleries, I’m using the links in the large image to go to another similar page, where another slideshow gallery appears. Not ideal perhaps, but works fine.. Maybe try that.
Ollie
Bitty

I just want to say thanks for all your hard work. This script is exactly what I’ve been looking for. Any sizing tweaks are trivial to do, and being able to set the options in the web page itself is a huge advantage. I can’t wait to see your updates.
Pingback: Web 2.0 Безплатен JavaScript Slideshow само 5kb
pops

how do you go about incorporating this in an existing website template generated by ms publisher and maintain the layout?? There is an option for HTML code fragments but not sure which parts to include?
Emre Ciksin

Hello,

Excellent slider slideshow.

what i want to ask is it possible to remove bottom scrolling thumbnail slider ?
Thomas

Hi there

Beautiful script. I see, that you use wordpress. Can you make a wp-plugin for the script?

Thomas
Abensur

It’s uncredible !!! It’s so beautiful. Great work. Congratulations.
Max

Excellent work!!
Thanks for this perfect slideshow
+1 for preload k images forward (since I use it with flickr and albums contain more than 80 photos)
Pingback: writing with crayons » Wp-popeye and wp-tinyslideshow plugin
http://www.jwurster.us Jim

This is a great way to display images. Very well done and simple, too. I started working on a plugin for this for wordpress and almost have it. I also started to do a plugin for a jquery popeye script, but that doesn’t seem to implement as easily. There are a few issues that I hope to resolve (descriptions don’t appear and the start slideshow link on the image doesn’t appear to work). But other than that, it works. Check it out <a href=”http://wurster.ws/wordpress/”>here</a>. Any help would be appreciated.
http://www.duzodesign.com Timothy

Wow! And you didn’t use a framework! Very well done! It’s fluid, smooth and elegant. Nice work. Keep it up!
awake

pretty cool stuff… works great on Opera 9 and does not seem to use any major JS framework that I know of.
carlos

this is cool but im into flash right now, flash kicks ass too.
Pingback: Free Javascript Slideshow Under 5KB | DG | RCG
http://www.jwurster.us Jim

Just looked at what I had done for WordPress in IE and it works fine there, but not in FF. In FF, the image descriptions do not show. And in FF, when you mouseover the image, you see an image in the center which is a square box with an arrow pointing to the upper righthand corner. If anyone could help with the FF issues, I would appreciate it.
http://www.dragnet.se Jonas

@Michael – Oh, I can´t wait for the updates! I found that it is only possible to save the large image if I right-click on the lower part of the image. And one more thing – perhaps a gif preloader could help the visitors to understand that a new image is being downloaded?
Best regards
Jonas
Pingback: Quicklinks 02.01.2009 - Thorstens Blog
http://muevetusite.blogspot.com StarClown

Excelente pero, definitivamente me perdí en algo por que no me trabaja. Justamente creo que es por que no sé donde colocar el archivo “scrip.js”?
Todo lo demás ya lo trabajé, solo me resta saber que hacer con ese otro archivo…? Saludos y feliz año nuevo!
diego

Great work! Only 2 questions:
1) when you click to see the next or the previous image the slideshow stops and doesn’t start again. Would it be possible to have the slideshow continuing (as in previous version)?
2) I have problems with ie8: arrows to go forward/back are not working. Everything ok in Firefox.

Thank you!
Pingback: [Web] 連結分享 « 網站製作學習誌
http://www.schoenes-polen.de Jens

Hello!
I’m very happy with this script. But there is one problem I never can solve in IE. Its concerning IE6 and IE7 and in my opinion its source can be the wrapper: on http://www.polen.pl you can see the automatic slideshow on the top. In Firefox everything is perfect. But in IE the full image is 50% in the right. I can adjust it in Firefox by changing the wrapper, but IE don’t reacts. Can someone help me? Thank you very much!
http://www.altdesign.it/ Alt Design

Hi Michael… very impressive and lightweight work.
Maybe i’ve missed some configuration options but i’d like to use it without the left/right scroller function while preserving the onclick thumbnail function. Infact there are cases with a number of thumnail less then 4 where the scroller is not needed.
I want to preserve the thumnail but without the scroller. How can i achive this?
I don’t know if this is a bug but try the following on your example:
1) use 3 thumbnail/images
2) try to scroll right using the relative control
3) bug -> the content (slider div) goes infinitely right

Let me know!
Thank You for sharing.
http://www.altdesign.it/ Alt Design

[Typo:] I mean:
3) … infinitely left

Sorry!
James

For some reason, I cannot get this slideshow to view properly in IE7. For example, go to http://www.nwsrvy.com/pastprojects.html
It views perfectly in Firefox. What am I missing here?

~ James
_rabindrasahara

Hi, I’m highly appreciating to your good works. Sorry, I wanna ask about using this slideshow script. How can I show the thumbnail slider only, and the full images will be shown directly when I clicked the thumbnail. showing full image like Slimbox or Lightbox…
Thanks before…
_rabindrasahara

Hi, I’m highly appreciating to your good works. Sorry, I wanna ask about using this slideshow script. How can I show the thumbnail slider only, and the full images will be shown directly when I clicked the thumbnail. showing full image like Slimbox or Lightbox.

hope you’ll be agreeable to reply to my <a href=”sahara.sukasuka@gmail.com”>email</a>

Thanks before…
http://www.polen.pl Jens

Hello,
thank you very much for this script – great! I had two problems, one I have fixed: It was a problem with the wrapper.
But my second problem is: In Firefox everything is perfect. In IE 6.0 and IE 7.0 the soft layer with text is out of order: Nobody can read the inflowing text, because its flickering and very fast. Can somebody help me?
Thanks a lot!
Pingback: Hermoso y sencillo javascript TinySlideShow | Summarg
http://www.dxnx.co.uk Ben

Awesome script and great lightweight code.

Only problem I’ve run into is in some version of Internet Explorer, if you begin with slideshow and images one size and then later in development make it smaller, the older, larger images are sometimes cached even after clearing temporary files. This means that when you run it the old, larger images are displayed and go over the top of the thumbnails and the borders. That said I think it’s more like to be an Internet Explorer bug than anything else because it doesn’t happen in any other browsers.

In the process of building a Joomla Module based on this which will display a slideshow of images based on which article is currently being viewed.

Great Code!
Walter

Nice work Michael! Is it possible to customize this component to make it like the http://www.ign.com slider or it would do me a lot of trouble? Thanks already!
http://www.rockayseri.net Özgür

Hi! I want use to image slider only bellow band. not full size. How can i do ? sorry for my english
HoUnD

Excellent script, thank you for this.
JoJo

Exactly what I was looking for! Nice work… Wish I know Java as well as you ’cause the first thing I’d do is get the script to resume after activating the prev,next,thumbnail links.

Have a simple solution???

Thanks again for the script.
http://www.hostpipe.co.uk UK Web Design

Wow, a really efficient script. Am also using Lightbox but I think I may give this a go on our next project. A superb resource as well, not very often you get such a great script for free. Thanks.
John Doe

I would like to download it but it looks like we are in front a a dead link here : http://sandbox.leigeber.com/javascript-slideshow/TinySlideshow.zip
Pingback: Ajaxian » Content visualization techniques and views
csb

Very very nice script. Thank you.

I’ve got one question: What’s the best way to alternate between two different galleries on the same page? I’ve tried a couple things but haven’t been able to get the original gallery to stop cycling or reset the thumbs. Can you recommend a “best” way to do this? Thanks again!
Pingback: Content visualization techniques and views | How2Pc
http://www.richarddavies.us Richard Davies

Thank you for this nice script. I do have one suggestion though. The script uses a div with an ID of ‘wrapper’. This is a very common ID often used in CSS layouts. Since there is only supposed to be one element with a particular ID, it’s very likely that your ‘wrapper’ will conflict with an existing ‘wrapper’ element on the page.

I’d suggest that you use some sort of naming convention for your IDs and classes to help ensure their uniqueness. Maybe something like prepending them with ‘tinyss_’ so ‘wrapper’ would become ‘tinyss_wrapper’.
sculuffy

Hi, I love your Image slider. But i have a question is it possible to have 3 image slider in your page. I also used your old image slider and tried to have 3 image slider but it doesn’t work, I know you already answered that it doesn’t work. In this new Image slider, does multiple image slider now works?
Many Thanks and cheers ^_^
Pingback: 11 scripts para hacer Slideshow | La pechuga del Pollo
http://projects.ire-s.com/gaming Ibrar Mirza

Hello I have placed the script on the following site http://projects.ire-s.com/gaming and i want to display the thumbnails on vertical position. How it is possible. Thanks
csb

I’d love to have a wait spinner or something while loading the images. Anyone that can suggest an easy way to do this would be much appreciated. Thanks again for the great script!
Ferit

This script is very nice, but main image href not work ie6 and ie7, only work firefox
Pingback: Muestrario “Slideshow” animado con JavaScript « VIDEOSESION.studio - informática, tecnología, educación, diseño web, diseño gráfico y más…
carlos

hey leigeber, you are missing something :the loading of your script is no good, refresh the webpage and youll see waht i mean(for miiliseconds the gallery doesnt catch the css), your missing something basic.
LORI

Hello Michael.
I felt free to integrated your code into a personal JAlbum skin with some modifications like buttons for “goto begin/end of slider”. Works great. Thank you very much for offering your code.
A remark: the linkhover stuff doesn’t seem to work in IE7.
And finally one question: why are some properties/parameters given as slideshow.xxx=”xxx” and some others as function parameters in slideshow.init().
Greetings from Germany.
LORI
Pingback: Hazır Web Araçları | MuGi Graphic System
buknoy

hi there i just put a link on the image, example:
<a href=”#”><img src=”thumbnails/image-one.jpg” alt=”Image One” /></a>

i put a target=”_blank”

<a href=”http://yahoo.com” target=”_blank”
><img src=”thumbnails/image-one.jpg” alt=”Image One” /></a>

but the problem when i click the thumb, it doesnt goes to seperate window, it opens upon self, do u have any ideas about this guys
http://phpdhcpadmin.sourceforge.net Jas

I agree with one poster that made comment regarding integration of this slideshow to process the ‘rel=lightbox’ attribute.

I have been sifting through the js file trying to find how I could append this attribute for full size images without any luck thus far
http://phpdhcpadmin.sourceforge.net Jas

I think I might have it actually. In the ‘tinyscript.js’ file on line 39 I added this to get the value of the ‘rel’ property:

a.r=$$(‘a’,h)[0].rel?$$(‘a’,h)[0].rel:”;

On line 113 it reads:

if(this.a[s].l!=”){
this.q.onclick=new Function(‘window.location=”‘+this.a[s].l+’”‘);
this.q.onmouseover=new Function(‘this.className=”‘+this.link+’”‘);
this.q.onmouseout=new Function(‘this.className=”"‘);
this.q.style.cursor=’pointer’
}else{
this.q.onclick=this.q.onmouseover=null;
this.q.style.cursor=’default’
}

I have changed this to:

if((this.a[s].l!=”)&&(this.a[s].r!=”)){
//this.q.onclick=new Function(‘location.replace=”‘+this.a[s].l+’ rel=’+this.a[s].r+’”‘);
this.q.onmouseover=new Function(‘this.className=”‘+this.link+’”‘);
this.q.onmouseout=new Function(‘this.className=”"‘);
this.q.style.cursor=’pointer’
}else if((this.a[s].l!=”)&&(this.a[s].r==”)){
this.q.onclick=new Function(‘window.location=”‘+this.a[s].l+’”‘);
this.q.onmouseover=new Function(‘this.className=”‘+this.link+’”‘);
this.q.onmouseout=new Function(‘this.className=”"‘);
this.q.style.cursor=’pointer’
}else{
this.q.onclick=this.q.onmouseover=null;
this.q.style.cursor=’default’
}

Unfortunately I am unable to get the line:

//this.q.onclick=new Function(‘location.replace=”‘+this.a[s].l+’ rel=’+this.a[s].r+’”‘);

To work which is why it is currently commented out. I am however storing the value of the ‘rel’ property in ‘this.a[s].r’ so if someone can fix my statement to work as a valid link we should be able to utilize ‘lighbox’ style popups from this slideshow.

Handy much needed feature but my JS programming skills are somewhat limited.
http://phpdhcpadmin.sourceforge.net Jas

REPLY:hi there i just put a link on the image, example:
<a href=”#”><img src=”thumbnails/image-one.jpg” alt=”Image One” /></a>

i put a target=”_blank”

<a href=”http://yahoo.com” target=”_blank”
><img src=”thumbnails/image-one.jpg” alt=”Image One” /></a>

but the problem when i click the thumb, it doesnt goes to seperate window, it opens upon self, do u have any ideas about this guys

You could do something like:
<script>
function popUp( URL, WIDTH, HEIGHT ) {
day = new Date();
id = day.getTime();
eval( “page” + id + ” = window.open( URL, ‘” + id + “‘, ‘toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=0,width=” + WIDTH + “,height=” + HEIGHT + “‘);” );
}
</script>

Then for your image link use:

<a href=”javascript:popUp( ‘image.jpg’, 90, 80 )”><img src=”thumb.jpg”></a>
Pingback: Content visualization techniques and views « LocalLab : Foire aux Infos
http://www.djguidedhunts.co.nz Rick

Thank you for the script… I searched for hours and managed to get this one going (I’ve not worked with javascript before… I have a problem

In FIREFOX, the script woks perfect, but have a look in IE, and you see the large image is offset to the right… how does a n00b like me fix that?

Cheers RICK
Pingback: 57+ Free Image Gallery, Slideshow And Lightbox Solutions | 1stwebdesigner - Love In Design
Jeff

I would like to use to have links in the description in the page which, from earlier posts, looks possible. One thing I did not see is a autoscroll through the thumbnails. I would like to show different products and have them autoscroll through to display them with the option to open a link when clicking on the product (the large pic).

Any way that this is possible?

Thanks!
Jeff

Sorry I see the feature for auto scroll in enabled.

Thanks anyway!
http://phpdhcpadmin.sourceforge.net/ jas

anyone that wishes to utilize pop up type linking for their images…

<script>
function popUp( URL, WIDTH, HEIGHT ) {
day = new Date();
id = day.getTime();
eval( “page” + id + ” = window.open( URL, ‘” + id + “‘, ‘toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=0,width=” + WIDTH + “,height=” + HEIGHT + “‘);” );
}
</script>

<a href=”javascript:popUp( ‘image.jpg’, 90, 80 )”><img src=”thumb.jpg”></a>
http://phpdhcpadmin.sourceforge.net/ jas

I need to know the object so I can call lightbox for a fullscale popup.

a[s].l is the URL used with window.location and is a string type variable.

What is the object?

EX: this.q.onclick=new Function(‘Lightbox.start(‘+a[s]+’)');

This returns errors as a[s] is not the object that the Lightbox.start function is looking for…

Some assistance?
http://www.chapter31.com Michael Sharman

This is a great package, unfortunately it doesn’t seem to play well with jquery and breaks a lot of the existing functionality I had.

Has anybody else experienced problems with other js libraries? Any solutions?
http://phpdhcpadmin.sourceforge.net/ jas

Well the only problem I am having is making some modifications so I can integrate lightbox functionality for full scale links.

If you know how I can fix it here are the modifications I have made thus far.

After line 38 I added the following to gather up the ‘rel=’ value and store it in the a.r object:
a.r=$$(‘a’,h)[0].rel?$$(‘a’,h)[0].rel:”;

Then I made modifications to the function which creates the onlick event for anything with the ‘<a href=’ associated with the gallery object. On line 113 of the tinyscript.js I added:

if((this.a[s].l!=”)&&(this.a[s].r!=”)){
this.q.onclick=new Function(‘Lightbox.start(‘+this+’,false,false,false)’);
this.q.onmouseover=new Function(‘this.className=”‘+this.link+’”‘);
this.q.onmouseout=new Function(‘this.className=”"‘);
this.q.style.cursor=’pointer’;
}else if((this.a[s].l!=”)&&(this.a[s].r==”)){
this.q.onclick=new Function(‘window.location=”‘+this.a[s].l+’”‘);
this.q.onmouseover=new Function(‘this.className=”‘+this.link+’”‘);
this.q.onmouseout=new Function(‘this.className=”"‘);
this.q.style.cursor=’pointer’
}else{
this.q.onclick=this.q.onmouseover=null;
this.q.style.cursor=’default’
}

The only problem is with the line
this.q.onclick=new Function(‘Lightbox.start(‘+this+’,false,false,false)’);

As you can see it calls the ‘Lightbox.start’ and tries to pass the ‘this’ to it. I get errors due to the object properties are incorrect for what Lightbox is looking for.

I have also tried:
this.q.onclick=new Function(‘Lightbox.start(‘+a[s]+’,false,false,false)’);

Which *should be the image src object but I recieve parse errors.

Know how to fix it? I would really like to see this script become more robust and include some lightbox functionality if the ‘rel=lightbox’ values are set on any <img> objects.
leechlyf

Great Script!

Is there a way for the sliding thumbnails to have an infinite loop? Like whenyou hover on right button and it reaches the last image, it will still continue to the first image and vice versa? does anyone have this solution?

thanks
http://www.asesorainformatica.com angel

Very good code, great.

My problem is that I have two scripts on the same page and I can not get it.
If I could I would help a lot.
JamieF

Absolutely phenomenal script! I was just wondering though, is there a way that when someone clicks on a thumbnail or clicks the next button, that the slideshow will still continue to automatically progress to the next image, as it essentially stops the slideshow if someone clicks on one of those.

Other than that…very well done!
Pierre

Very nice slideshow , thank you for your job.
It works wonderfully, but Itry to have more than one slideshow in one page.
I try to only make a copy of the scipt in my page but it looks like not sufficient … and because I’m not a specialist, I would ask you if it4s possible or not ?
and if yes, how to proceed ?

Thanks again and in advance for your reply.

Pierre (France)
http://filipinawebcamgirls.com/ luvfilpus

Ahh.. From a time waster to a time killer! Very nice. I’ll learn javascript before its finished.

For the ones that can’t get 2 copies on the same page, do the obvious things like renaming all the divs, etc. But what kills it is the window.onload= that starts it. Find the addOnLoad function floating around and use that instead. Or dojo, etc.
http://www.mores.cc mores

In my quest to create a magazine style WordPress theme with a featured post gallery, I have stumbled upon a large number of “post galleries”.
What they all have in common is the need for custom fields.
I believe I have now found the perfect image slideshow for just this task. I’ll try to get it to work in wordpress, maybe create a plugin or something.

Good stuff. Looks great, loads fast … keep it up!
But keep it light weight – a lot of neat tools grow fat and lose their appeal
ramG

Can’t thank enough for this great piece of code. Could Michael or someone please help me figuring out how I can make the main image clickable to go to a different page on a website? I did add a link: <a href=”index.html”><img width=”80″ height=”60″ src=”thumbnails/blue-fish-thumb.jpg” alt=”Blue Fish” /></a> – but still the main image is not clickable. Someone please help.
http://www.bellinghambroker.com Dan

Anybody get this to work on a page that is running jquery? I’ve been trying to make the two play nicely together without any luck

Thanks for the great script
Josh

I’m trying to get it to display a larger image (800×480) and in FF it works fine but in IE it still shows 500×300 size image!?

I set the widths in the css and the everything but the picture resized just fine. Is there a trick? or is the image size set somewhere else other than the css?
Josh

Well maybe I fixed it it runs fine on my test server but not in dreamweaver preview
Pingback: Slide Show « KARADABAN’s Blog
ekred

Wonderful work!

Thanks for sharing Michael!
Pete Petersen

I love the slideshow and how easy it is to use!!!! I have about 20 different slideshows on 20 different pages, but one major problem I seem to be having is when a user loads each page for the first time (and the slideshow does play) the thumbnails don’t show up at all or they always show up incomplete… Although after a quick browser refresh, everything is fine — all thumbnails show up correctly. Any idea what could be causing this error? I’ve checked and re-checked the source code a dozen times for errors, but I find no errors every time. It’s weird because this problem happens randomly on all galleries — ones with less than 10 photos and ones with more than 200 photos. Please help!?
Wayne Parks

I’m building a new photo web site and found your script. I missed the link for the “updated” version so set up the older version. I just noticed this one and will now download it and try it. A great big thanks for sharing these great slideshows.
http://gene@geneharrawood Gene

Great java script slideshow. However, when I refresh the page in IE, briefly the <div> and <li> will appear then the thumbnail and images show as they should. Is there something I need to do so this will work in IE with out the above mention showing? It works fine in Firefox.

Thank you,
Gene
http://www.davehildebrand.com Dave

Linkhover in IE7 is broken. Works find in FF.

The initial load time on the script is poor Once the script loads the next image loads quickly. My image sizes are 30-40k.
TheLude

Super script, very compact and actually looking very nice!
stranger

Great script, I’m planning on using it on my website soon!

One question though… I have tested it with a slideshow of 1000 images, which works, but all the thumbnails (also 1000 of ‘em) get preloaded before the slideshow starts. Even though my thumbs are 3KB-4KB, times a 1000, that takes some time to load (even on my 12Mbit connection)…

So hence the question: is it possible to limit the number of preloaded thumbs to a lower amount? I noticed that the images get preloaded as required, I wonder if that’s possible for the thumbs too (or set a fixed number like 10, causing the slideshow to start sooner, after which the rest of the thumbs are loaded)?

Thanks in advance for your reply, looking forward to any updates on the script!
http://www.mores.cc mores

You must be careful, if a thumbnail is missing, the entire thing does not work.
So if you’re embedding it in a CMS, make sure you output thumbnail images.

Got it working with WordPress, by the way.
http://noneyet Paula

Very, very elegant solution. Thank you for your hard work and for sharing it with others.
Jim McMahon

Yes, very good solution. I noticed Network Solutions starting a community for developers. This is the type of thing I envision seeing at http://www.linktogether.com in the future. Looks like they are continually growing it.
http://www.mores.cc mores

There are some issues when an image is being displayed that is not full-height – the previous image will show through.
Interestingly enough, it’s not a problem with portrait-mode images. There is nothing showing left or right.
nicbrat

This slideshow is great. Thanks for the script.
I had a problem implementing it on a page with google maps, but I changed all the $ and $$ characters to $$$ and $$$$.
Greg

I’m a complete newbie when it comes to java script. I’m tring to use it in ASP to populate the <li> dymamically from a sql database. I can get the <p> and <a> tags to work, but not having any luck on the <h3> or <span> tags. Example:
<li>
<h3>test 1st image</h3>
<span>photos/orange-fish.jpg</span>
<p><asp:TextBox ID=”TextBox1″ runat=”server” Text=”test the body copy text line”
BackColor=”Black” BorderStyle=”None” ForeColor=”White” Height=”36px” Rows=”4″
TextMode=”MultiLine” Width=”387px”></asp:TextBox></p>
<a href=”#”><asp:Image ID=”Image2″ runat=”server” Height=”80″ /></a>
</li>
Is it possible? Is this the right direction to go with this?
http://www.sparkplug.com Andrew Berkowitz

This does indeed conflict with jquery, but there’s a pretty simple fix to make it play nice:

Do a search and replace so that all the functions that start with:

$$(

Are replaced with:

dbl(

And all the functions that start with:

$(

Are replaced with:

sgl(

This will keep the $$( and $( functions from crashing into the jquery functions of the same name and it will happily work. I’ll the updated script to Michael and maybe he’ll consider publishing it. It’s a great script!
Per

Hi, very nice slideshow. I would like it to show larger images. Where do I change in the code to make it show 800×600 px images?
I have lokked in the css file but can´t find it there.
ramG

A few people (including me) reported a minor bug: link/linkhover doesnt work in IE.

Thx to a developer friend…..a small hack will do the trick:

Step1: create a blank gif (fix.gif) image and put it in the images folder. Step2: add #imglink_fix {width:100%; height:100%; background-image:url(images/fix.gif);} to stylesheet.
Step3: change <div id=”imglink”></div> to <div id=”imglink”><div id=”imglink_fix”></div></div>

VOILA! it works in IE now!
PedroDK

Hi,

It’s really a very nice piece of work – congrats to Michael.

But TinySlide is conflicting with MooTools on a website I am developing…

Is there a fix for this?

Thanks!
nicbrat

linking wasnt working in IE…I added a conditional comment that added a background color to imglink and changed the opacity to 0. links work in IE now
<!–[if IE]>
<style> #imglink {background-color:green; filter:alpha(opacity=0)}</style>
<![endif]–>
Amy

Nice script! I am looking for something similar to this:

http://www.universitycoop.com/

and found this website.

For those using it, can I use this on a webpage like the one above is being used?

What did Michael mean about downloading it to use on web pages?

I want to use this on a site where I do not have control over the the whole page’s code. I am only able to affect a certain area within the body of the website. It would be more difficult to insert javascript in this page so this script seems like a great way to accomplish what I am trying to do like the site above.
ELD

Hi,

This slideshow is great. I’m now trying to integrate lightbox functionality but not having much luck (I’m a javascript novice). Wondering if anyone has figured it out?
paul

nice work.. thanks for sharing the code..
Pingback: Top 30 Javascript Slideshows, Sliders and Carousels « Kolmex
Pete Petersen

@Pete Petersen — We fixed our own problems of the thumbnail bar not fully loading or loading mostly cutoff / truncated (mentioned by me here on a 28 Jan 2009 post).

With between 10-300 photos in each of our galleries, many of our pages would load with an incomplete thumbnail bar; and many others would load like 3 thumbs and then stop… the slideshow would play fine, but visually the thumbnail bar would not fully load. Everything would work fine, but only after a complete reload of the page.

We fixed our problem by adding widths (& heights) to all of the img src tags for each and every thumbnail in each < li > of the gallery. Since the thumbnails all had unique widths, they all needed a custom width tag added.

Our research pointed out the problem to be to the *div* that immediately surrounded the thumbnail bar… In some of our working galleries this *div* had a width of 23,000 pixels!!!! It seems this div is dynamically set based on how many images/thumbs you have. So with tons of research and debugging we found that (upon your first visit to the gallery page) the div was not being set to the correct width and with an incorrect width would cut off the thumbnail bar after 3 images or so. We found that by adding precise widths on the thumbnail image tags, the browser would have the initial (pre-cache) information it needs to calculate the width of that div, be it 200 or 20000 pixels… and not truncate the thumbnail bar in any way.
Pingback: Creating Javascript Images Slide Show - WebStockBox
http://www.mores.cc mores

Any ideas on how to make the function that starts in line 98
le:function(s,c){
not only set a left and right border but also a top and bottom?
http://www.chapter31.com Michael Sharman

@Andrew Berkowitz – Thanks for the tip Andrew, unfortunately this didn’t work for me. But I did find the solution here to getting TinySlideshow to work with jQuery:

http://docs.jquery.com/Using_jQuery_with_Other_Libraries

There are a few suggestions, I needed to change my reference from $() to $j().

This is possibly what you meant by sgl() and dbl() but you didn’t provide the var sgl = jQuery.noConflict(); part?
Manchi

wow. Thanks a lot! Great script, easy to combine with php/mysql (I mean displaying images from a query).

I wonder how you could display another image different from the first one when you load the page (from a get or post parameter for example).

Each click on the big image would reload the page containing the script and display other information (from a mysql query) on the page.
But I would need to display the big image corresponding with the get or post id passed in the url parameter.

My solution was to add just before the other images (generated from the query) a li with the image corresponding with the get or post id (another query) and show it if the get or post id exist (putting a conditional region around)… Not perfect but helps if functionality not added to the script.
Not sure if my comment is understandable.
http://www.nowirz.com Phil Gapp

Very very cool! Thanks for being an Open-Source guy

Anyone can see how I used it here:

http://www.dancingsunflowers.com/gallery.htm

(click on children’s names to see further – note that this is brand new and still needs more pics for each gallery)
Per

Hi
I wondered how to center the image. Say for instance that I have images in different sizes and I would like the smaller ones be centered above the thumbnails. Where do I change in the code?

Per
http://www.pulsesolutions.com Web Development – Pulse Solutions

This script is incredible. We used it on some of our websites and we are getting a lot of positive feedback from our users. Thanks for the efforts man!
http://www.maremmaguide.com Donna

Michael
I’m new to javascript and have been struggling all week into the early hours with another slideshow script, but without any joy (a server file restriction problem) BUT I today I came across yours and I am so so happy. It works a dream. Just got to go and prepare loads of thumbnails now, but a minor issue. Thank you so much.

PS I tried to StumbleUpon you to promote your site, but the SU button that opens within “spread this” takes you to a SU page for website owners to prep an ad campain. Will use my toolbar and go and do it anyway.
Pingback: 100 Best JavaScript Resources | Spoonfed Design
http://www.coylefamily.com Michael Coyle

This is perfect except for one thing… if I assugn a link to an image, I want it to display it in a new window. A link like this:

<a href=”" target=”_self” onclick=”window.open(‘photos/orange-fish.jpg’,'MyWindowName’,'left=’+(screen.availWidth/2-400)+’,top=’+(screen.availHeight/2-300)+’,width=800,height=600′);return false;”>

(I hope code displays or else it will be a mess)
Pingback: 人目をひきつける画像ギャラリーを作るスクリプト | 札幌のホームページ制作 Webデザイン会社アイタス｜CMS構築｜SEO・SEM｜ビジネスブログ Movable Type・WordPressカスタマイズ
http://www.arimagder.com Ari

I would really like to use this on a site that I am developing at the moment, but I need the large image to launch a lightbox script onClick. Has anyone accomplished this? if not are there any plans to implement this sort of capability?
Delford

I have this working fine on a page, but if I try to load that page into a Thickbox frame it does not work unless I manually refresh it after it loads. I assume something is breaking the initialization and I’m trying to sort through the code to figure out exactly what is going on, but does anyone already have any experience with this? I put together a quick example:

Standalone – http://dev.dreamcreative.com/clients/supreme-court-wv/publish/slideshows/courthouses/index.html

… loaded in Thickbox – http://dev.dreamcreative.com/clients/supreme-court-wv/publish/slideshows/courthouses/test.html
http://www.maremmaguide.com Donna

Hi Michael
I’ve now got a slideshow going on my website and it is fab. Thank you.
I have the same problem as StasOn, however, in that if an image is shorter that the one before, the second shows through.
Example: http://www.maremmaguide.com/italy-beach.html
Craig

Hi Micheal,
Works perfectly and thank you. I am dynamically adding pictures from a dB, still yet to do that but seems quite straight forward with the way you have done things ….. good job. Demo works fine adding it in. Had troubles with your old one where it was saying the i.av was always below 100 and hence was looping. Was about to ask you for help when i saw this gallery. Just fantastic. Thanks again.

PS. if you can tell me what the i.av ( just the av bit) by chance, it would help me stop thinking about it. lol ( fyi ….. I am using visual studio 2005 for aspx pages.)
http://www.rockstarwebdevelopment.com Rock Star Web Development

It seems like everyday web technolgies develop in all directions. For Javascript I love to use JQuery! It’s a mega – time saver. nice post
yepecece

Hi, this is a great slideshow.

Can anyone let me know hot to add a spinner (loader) on top of the current image when the next button is pressed?

Thanks a lot.
http://www.pilgrim-platform.org Phillip Ross

IE problem. Has anyone else noticed that the photos aren’t linked in IE 6 & 7? Can’t click them to a new page. It works fine in FX, Chrome, Opera.
seba

This is really cool. How would I go about putting the thumbs on the side?
http://jasonjulien.com Jason

Would it be easy to modify this script to allow the thumbnails to be stacked on top of each other so that the they scroll vertically? I’d love to do that but seem to break everything when i modify any parts to the script. Anybody done this successfully?
http://www.20thswtmedia.com Anthony Arias

Any way to use this script to read pictures dynamically instead of locally?
Ale

hello,
did someone find the solution to integrate this script with other jquery?

With the fix of sgl and dbl I fix the wrapper div, but NOT the main stage, that give me this error: “slideshow is not defined slideshow.le(0, 0);”

Any hints?
Ale
yepecece

Hello
I’m trying to implement this great gallery with this
http://net.tutsplus.com/tutorials/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/

It doesn’t seem to work. (Actually it work on 1 side, if I first load the gallery and then load the other links it works, but if I go back to the gallery the gallery doesn’t work anymore)

Any idea?

Thanks
http://www.aldia.cr Lorenzo

Hi. Wonderful script. I am wondering if it is possible that the script loads a XML instead of reading the data from the html. That way we can have a truly dynamic script.
Peter

Great script I’ve been able to modify it, it’s actually really easy.
Though I’d like to scale the information box (placed under nf:) to the witdh of the current image witdh we see in the box. any suggestions?

Thnks
Peter

I got it to work with Lightbox2, took me two days or so. in the end is was to simple to be true;.; , anyway I’m trying to make the slideshow box width’s dynamical, I really need this thing done .. so some help or idea’s would be great.
Admierer

Hi, amazing scripts I must say.
One question, would it be possible to just have the slideshow itself,
w/out the thumbnails? How would I do that.
thank you in advance.
http://www.mores.cc mores

admierer … you can just leave away the
slideshow.thumbs=”slider”;
part in the javascript and remove the entire < div id=”thumbnails”> … < /div>
http://www.mores.cc mores

@peter … how did you get it to work with lightbox? mind sharing the code?
Pingback: Recursos: JavaScript Slideshow - Grátis e Dinâmico | Criatividade Visual
Peter

@mores, as soon as I fixed the width (see my post) and made my production live I wil post it here. (@author if that is okay?).

It’s great to be opensource so I plan to give some back.
Tho my version is quite different from this one, and should be used @ own risk (regarding other js-scripts used with your site).

So imagine it would scale like lightbox as default and as costum feature set a fixed width.
That’s all for now, I’ll be posting it as soon as I fixed this issue (wanted feature).
Deutschmann

Eine Version, wenn der Code im Head-Bereich integriert werden soll:

<script type=”text/javascript”>
var slideshow=new Object; //Var. definieren
window.onload=function(){
$(“slideshow”).style.display=”none”;
$(“wrapper”).style.display=”block”;
slideshow=new TINY.slideshow(“slideshow”);//nach onload zuweisen
slideshow.auto=true;
slideshow.speed=5;
slideshow.link=”linkhover”;
slideshow.info=”information”;
slideshow.thumbs=”slider”;
slideshow.left=”slideleft”;
slideshow.right=”slideright”;
slideshow.scrollSpeed=4;
slideshow.spacing=5;
slideshow.active=”#fff”;
slideshow.init(“slideshow”,”image”,”imgprev”,”imgnext”,”imglink”);
}
Pat

Your script is just great!
It would be awesome if we could just adapt the whole height and width of the slideshow…
Any suggestion ?
Thank you!
gareth

First, I’m a complete idiot when it comes to this stuff, but if I were to insert this script in a webpage using dreamweaver, how would I proceed? Some sort of “1,2,3- There you go, dumbass”.I totally understand if you guys neglect this comment, since you’re obviously on a whole ‘nother level than me. The script looks great though:p
Bugssport

Hey guys I have a fairly good understanding of scripts and CSS, but when I put this on the website I’m building, I had to resize it to fit my page. It looks great in Firefox and Google Chrome, but in IE, the text overlay pops up for a tenth of a second then disappears. If anyone knows how to fix this and is willing to help please e-mail me at bugssport@gmail.com Thanks!!!
http://www.tsctempest.com Tsc Tempest

I’m gonna ask here as I don’t know where else to do so. How difficult would it be to modify your script to use it as embeded code on a blog entry so that it pulls up a gallery based on a tagged image search?

e.g. http://someblogdomain/photolocation/listTagged?tag=textures

In other wrods, the script queries in, real time, the photo database for the lates images carrying the specific tag and returns the rsults to populate your list of gallery images, thus producing a live gallery embedded in the blog.

If I’m tilting at windmills, please let me know.
Bugssport

@Pat. You can resize it, just play with some of the height and width values in the style.css
Dave

I’m designing a website that is created with a template for multiple pages, and for some reason when I add this photo gallery in there it doesn’t show the thumbnail scrolling on the bottom of the gallery. Is there something that I need to modify in the style.css document for this to work inside an editable content region in the child page created from the template?
http://www.redesignyourbiz.com WebDesigner

uff……. brilliant…… awesome….. elegant!!!!!
Pingback: 6 New AJAX and JavaScript Slideshows | PaulSpoerry.com
http://rockdown.net Jeremy

i’ve been through this script, trying to find a way to change the way it grabs the pictures, but I’m stuck and having been stuck for three days, I’m now coming to you!

I wouldn’t even mind it, but it would be great if we could have an option to add an xml file that the script could reference… having all the images and tags in an xml file would be amazing.

also… possible addon somebody could add that would randomly select the order of the images at page load…
sampath

Please anyone let me know how to implement set of vertical thumnails to scroll horizontally with image sliding.
Pingback: .::Owen Foster::. » Post Topic » Leigeber Web Development Blog
DanTheMan

Michael –

I wanted to write a note and say “Thanks” for all the selfless work you have done with developing components on your own time and offering them – for FREE – and for use on personal and commercial websites – without any requirement other than a suggested feedback. You are truly a person that has solved many programming problems for a multitude of developers and enhanced many a website in doing so.

Hats off to you and Bravo.

(…and Go Sox!)

Our best from Boston.

DanTheMan
Anon

Hi. Would it be feasible to add a play and pause button? Currently if you click on a particular thumbnail – the slideshow stops playing and I don’t see any way to put it back into slideshow mode.
Mary

Hi,

does anyone know how to combine this script with php and mysql?
I basically need to call images from the database to use in this gallery.

thank you
Greg

how can i make it appear against a white background instead of black?
Greg

previous poster about pulling from mysql email gpigate@hotmail.com i can help you out, i have it pulling all files from a dir, i was too lazy to put in a db, didnt need it
http://www.AroundCU.com Kirby

First off, thanks for your efforts. You’ve done an amazing job in a very small amount of space.

any way to have the script auto resize images that aren’t the same height as the div box? It would make this a generally useful script for slideshows of random pics if we had that. As it is, you are pretty limited in that you have to feed it pics that are all the same height.
Hussein Hammoud

Actually you still need to make the sizes flexible
Hussein Hammoud

hi, in firefox, if the image size doesnt fit the div size it is overflowing it, it is not resizing the image in firefox while in explorer its ok
Joseph

Is there a way to make the margin of this code go all the way to the top. when I insert it into my web page underneath another object, I get a space in between that I don’t know how to get rid of it. And for some reason it behaves differently in ie and firefox???????
Any help would be appreciated
http://www.evanwatkinswebdesign.com Evan

Very nice slideshow, very clean and professional. A much better alternative to flash! Thanks.
Mitch

Hi All! im quite new at this, though i did manage to make it appear the way i want it to the only thing i need to incorporate now is the lightbox, help please *desperate*
nicbrat

Anyone figure out a solution to the overlap of different size images?
I’m having the same problem a few other had where the larger image shows underneath the shorter image that comes after it.
Sam

Great Script!!I am trying to modify to my needs and I have couple of question and would like input from You.
I have about 300 images(40-50kb) same size I would like to have it displayed:
1.Images are double size of images in Your example.How is it going to affect load time?User will see only 5-6 thumbnails at the time while other ones are loading in background so user does not have to wait.
Is is possible to have so many images and not to affect user experience?
2.I would like to remove border and space between images so that looks like continuous image.When user hoover over image only opacity should change to indicate image selection.After click to open bigger image I would like to be able to click on different parts(map image) of full size image and present either some pop-up description and/or link to other website.
Do You have now any detailed documentation on use of the script so I can really dig in and understand all parameters and how to change things?
Thank You.
Sam

I managed to achieve most of the things I mentioned in previous post( no border, no space between thumbnail etc.).But after all my main concern now is load time.I was reading this post:

>Great script, I’m planning on using it on my website soon!

>One question though… I have tested it with a slideshow of 1000 images, >which works, but all the thumbnails (also 1000 of ‘em) get preloaded >before the slideshow starts. Even though my thumbs are 3KB-4KB, times >a 1000, that takes some time to load (even on my 12Mbit connection)…
>So hence the question: is it possible to limit the number of preloaded >thumbs to a lower amount? I noticed that the images get preloaded as >required, I wonder if that’s possible for the thumbs too (or set a fixed >number like 10, causing the slideshow to start sooner, after which the >rest of the thumbs are loaded)?
>Thanks in advance for your reply, looking forward to any updates on the >script!
>stranger on 29 Jan 2009 at 6:14 am

I will have over 1000 thumbnails, each 10kb so load time will be disaster.
Unless I can achieve somehow partial thumbnail load(first ,let say 20) so script can finish loading fast, and then, after user can start using slideshow, continue with loading second group of 50 thumbnails and then third etc(Maybe that should can occur only when user hoover mouse over right slider).
I am not good in Javascript but I tried to follow code execution and what i think it is happening in the script:
Script goes through ul id=”slideshow” in index page and finds all <a href=”#”><img src=”thumbnails/image_name.jpg.From this it calculates ,beside other things , div lenght for slider based on sum of width of all thumbnails found initially.So it seems that You have to have all thumbnails preloaded before actual code execution otherwise script fails to work properly( As it was mentioned in one previous post).I start to think that because of the way how this script works it is impossible to achieve delayed thumbnail loading but I might be wrong( I hope I am wrong because I really like this script).
Any ideas?
adrenadine

hello, I want to use your nice slideshow. I’m a beginner with script. I understand a little of the css, but I can center the full size image when I give some other size the full image is always on the left side… can somebody help me please?
adrenadine

Hi, I just post a message, but I’ve finally found the solution!
You can delete my post if you want, and can, sorry for the “pollution”. Cobgratulation for your work. It is very easy tu use, and the design is beautifull.
http://www.applemarketing.net Carrue

Great work! Love it! Any way to add video to the slideshow as an option?
Pingback: The best JavaScript image galleries | Website Building Tutorials
Pingback: Webmasterkit.info » Tiny Javascript Gallery
Pingback: 50 Excellent Image Galleries You Can Use Today - Nettuts+
Pingback: 50 Excellent Image Galleries You Can Use Today » Follow Me | twitter.com/riku
shekar

hi, i have used your script it is fine , one thing i found problem with these is it works fine in firefox when we put these inside a table but it won’t work in IE the position of the image will shift, please give me the solution for this.
Pingback: Designfeed.me » 50 Excellent Image Galleries You Can Use Today
Pingback: Apuntes de fotografía » Blog Archive » 50 Excellent Image Galleries You Can Use Today
http://www.jouzef1.c.la jouzef

can i telecharge this galorie gratuit plz
http://www.netwaver.com NetWaver

I found out in the demo that when you click on Prev/Next buttons, it will stop auto rotating the images. Is it a normal behavior or a bug?
http://leswarren.com Lesmeister

I just implemented this with a click on window, but I took the easy way out, I put a Larger Image link in the text box. The image link still opens in itself.
http://tiny.cc/kMswT
Would love to figure out how to trigger it from the image.
King

Quick question as I’m sorting through the code, how do I get more than 4 images to appear on the slider.

Thanks
Piotr

I notice the same as NetWaver. After picking some picture from thumbnail or by clicking prex/next the Auto rotating crashs. Is this some property i can configure or is it a bug ??
King

“Quick question as I’m sorting through the code, how do I get more than 4 images to appear on the slider.

Thanks
King on 06 Apr 2009 at 11:47 am ”

I’m retarded, I looked right over it before I posted the original question. If anybody else is interested, go into the CSS and change #slidearea width to whatever you want.
justincredible76

Hi! This is an awesome slideshow. One thing I noticed: In Firefox, when you click on the image (large) it goes to a user-defined link. But in Internet Explorer, the ‘box with the arrow coming out of it’ icon does not appear and you can’t open a link if you click on it. I hope this message made sense.

Any ideas to get IE to work with it? Thanks.
Casey

Hi, this looks great! I was wondering, though… how do you disable the slideup caption element? I’d rather that only worked 1) IF there is some text and/or 2) IF you set a variable to toggle its use and/or 3) only when the user moved their cursor over the large image…

Any way to do any or all of those things?
Pingback: 50 Excellent Image Galleries You Can Use Today « Nvmindmedia
Saim

Thank you for the slideshow its excellent
Kostas

After searching for a nice photo index to embed into my site, I found yours that is absolutely fabulous! Exactly what I was looking for, except one thing… To be honest I haven’t examined the code thoroughly yet (the answer might be there) but I was wandering if the thumbnails could be displayed vertically! It is essential for my case. Well?
Thank you in advance and keep up
Maciek

i have the same quwestiona as justincredible76…why links are not working in IE. In Firefox everything works fine. When im clicking on photo it sends me to other page. In IE it doesnt work…
Keith

Great Script! As with most things which are programmed well, it works in FF but I’m getting js errors in Ie. Once the slide show changes from the first image to the second a js error is thrown, the details of course are not very descriptive. I haven’t made any changes to compressed.js but am receiving an Invalid Argument error at position 4288, also everything is very slow in ie. Any help would be greatly appreciated. Again thanks for the script it is exactly what I’ve been looking for!
Keith

As a follow up to my posted comment, even the demo throws the same js error. Am I the only person receiving this error? thank you.
vaqz

yeah I guess..

I have a question, where should the CSS file go?
will

Hi dude, your work is just OUTSTANDING.
There are soooo many really nice and well coded stuff here, I just want to tell you “Thank you !”.
Ken

Michael, great looking slideshow.
I am looking for a slideshow for our home page that highlights 4-5 articles within the web site. 2 slideshow examples are listed (linked) below:
http://www.livestrong.com/
http://www.coastmagazine.com/
Any ideas on were I might find a JS script for such a slideshow or is it possible to modify your implementation to include text and links on the right side.
Thanks. Ken
Pingback: 50 Excellent Image Galleries You Can Use Today « NVMIND
http://reganrajan.com Regan Rajan

I love it. Simple in look, straight in command and rich in features.
And the best part; its free!

Thanks man!
http://www.zszychlin.hg.pl Marcin

Super galeria, niewielki skrypt a duże możliwości. Połaczenie efektów bardzo udane.
Thanks.
http://www.generationnet.co.uk Terry

Hi, I am trying to utilse the links feature of your slideshow but have problems using it in firefox. see http://www.userwebsite.co.uk/demo/tinyslideshow/ for my sample implementation. The main images are hidden but if you click on each thumbnail an alert shoud popup telling you which thumbnail you have just clicked on. This works (most of the time) in IE but not in FF. It seems to tell you the previous image.
Any idea why?

thanks, Terry
helen

I discovered a few things while playing with this (sorry if they are covered in the comments above):

- If an image is shorter than the box, there will be some show-through underneath it.
- Images can be squashed down using CSS – set the height property for img and it will size it down appropriately. This could potentially cause some problems for the thumbnails, as mentioned by Pete on 2/5/09, so it still needs some trial.
- You CAN get the links to open in a new (not-pop up) window, as if it were target=”_blank”. Change line 113 from:

this.q.onclick=new Function(‘window.location=”‘+this.a[s].l+’”‘);

to:

this.q.onclick=new Function(‘window.open(‘+”‘”+this.a[s].l+”‘”+’, “_blank”)’);

Hope that helps anybody with any of those questions…
Pingback: 5 nützliche Stand-Alone Javascript-Widgets | tagdocs.de
Varberg

Helen,

I tried altering the script to:

this.q.onclick=new Function(’window.open(’+”‘”+this.a[s].l+”‘”+’, “_blank”)’);

but it still opens in the same window. I tried it with both IE8 & FF.
http://christrepper.net Lunie

how would i add this to a Ning.com site?
Tricia

I am not a master at Java or even a novice for that matter. I am trying to use your great script to make a portfolio gallery but for some reason the larger image view is shoved off to the right. I can’t figure out why? I have played with the values and if I change //#image img {position:absolute; z-index:25; width:auto}// to //#image img {position:RELATIVE; z-index:25; width:auto}// it centers the image but then I end up with the next image displaying below the first. I know you don’t do support but maybe one of the more savy followers could assist?
Les

The way I got the image to stop shifting to the right out side the display box was to add left:-0px; to the “#image img” line in the css file
Steven

Thanks alot, very very usefull script. Is it possible however to make sure the slides keep sliding after you have clicked one of the thumbnails? the autosliding does not continue after you have clicked a thumnail. Perhaps if it is not possible right now this would be a great feature.
Pingback: 57 Galerias Gratis | Lo Pongo Acá
Ivar

Beautiful. I would use it if the main images could be variable height/width and let the main background be transparent (if set to transparent, sometimes the previous image is still visible when the new one is smaller) AND allow for separate width settings on the thumbnail scroll area.

The scrolling action is nice and smooth. Sweet.
PaulS

This is an excellent lightweight script, but it breaks when used with the prototype framework – is there anyway to get them to work together?

Thanks for your hard work
http://expodisplays.com Stefanie

I have the slide show working, but when I try to put more than one slideshow on a single page, only the first one will work. What do I need to do to have multiple shows on one html page?
Jose

Why will I never understand how people can share their hard work and remain humble. Amazing stuff bro. Thanks for sharing.
http://www.competitiveedgepc.com Bob

Michael – statson asked on 12/25/08 how to fix the problem when a new slide is displayed over the previous one that is horizontally shorter some of that image remains?

Is there a fix to this?

thanks
Mark

What can I do for users who don’t have javascript? I’d like to have a message appear to upgrade, or at least hide the slideshow cause it looks horrible without.
Pingback: 57+ Free Image Gallery, Slideshow And Lightbox Solutions | Inseven Designs
Rajeev Ranjan

Hi

I have tried to implement lighbox or highslide to show preview of image on click of thumb images but i couldn’t succeed. Can you please help me to integrate the hislide gallery effect on thumb slide images as i need only to show thum images as scrolling and once click on thumb images a lightbox or highslide type effect will show.

Your ealry help will be highly appriciable.

Regards
Rajeev
Pingback: 11 Smart Javascript Techniques For Manipulating Content | Nomessi
Treborjw

I have tried several galleries for the site I am building and none have worked. Thanks to you, this one did!

That is, it worked great until I inserted more than eleven slides. The 12th did not. Is there a limit somewhere in the script to how many slides I may have in my gallery? If so where in the script can I change that limit? Please be explicit, I am new to this and even wonder how I got it to work in the first place.

Thank you.
Treborjw

Never mind I see the problem. I never downsized the first thumbnail which made the slider not function.
Thanks for the great gallery!
Michael

Re: the problem with shorter images.
In the script.js after about line 100:

le:function(s,c){
this.f.appendChild(this.i);
var w=this.o-parseInt(this.i.offsetWidth);
if(w>0){
var l=Math.floor(w/2);
this.i.style.borderLeft=l+’px solid ‘+this.letterbox;
this.i.style.borderRight=(w-l)+’px solid ‘+this.letterbox
}
/* INSERT FOLLOWING LINES*/
var hei=this.o-parseInt(this.i.offsetHeight);
if(hei>0){
var tei=Math.floor(hei/2);
this.i.style.borderTop=tei+’px solid ‘+this.letterbox;
this.i.style.borderBottom=(hei-tei)+’px solid ‘+this.letterbox
}
/* END OF NEW INSERT */
TINY.alpha.set(this.i,100,this.imgSpeed);

This should center a smaller image in the middle of the screen.
I would use the slideshow in my projects, however only after having a fix for the bug that stops it after clicking on the thumbnails, maybe having a pause/start button?. And it would be great if the thumbnails could flow with the top image. At the moment, I am using a js slideshow by Andreas Berger ( http://www.bretteleben.de/lang-en/javascript/slideshow/-slideshow-beispiel-01.html ) although without captions and links.
Thank you, Michael, for sharing your work.
http://n/a miseenplas

Thank you for your work, and for sharing this great piece of coding.
I am excited to try this out.

cheers to you!
pocusocus

Hi ! Great Script. Documentation Needed when You can !
how to preload?
how to lightbox to fullsize ?
Thank You!
Emma

Great work! Only 2 questions:
1) when you click to see the next or the previous image the slideshow stops and doesn’t start again. Would it be possible to have the slideshow continuing (as in previous version)?
2) I have problems with ie8: arrows to go forward/back are not working. Everything ok in Firefox.

Thank you!
bistromath

Great script, very attractive slideshow. The only problem I see with it is that when you’re in Firefox, clicking through the thumbnails quickly will break the script. The full size image ends up opening about halfway outside of the bounding box, on the right hand side. Has this problem been addressed?
john

I am having a problem using the featurify module, it seems that it is not playing along great with jQuery. See many say change the “$” to “$$” or “sgl”, but what files does I change? For example: if this module is in the header would I change the header? The code is like this: {$featurify} so would I change it to: {sglfeaturify}? Please help? I don’t understand. Thank you
Brad

Hi – amazing little slideshow script. I was able to stop the little info displays box by setting the slideshow.infoSpeed=0; Is there another way to do this?
Jinny

Thank you for such a wonderful script.
I am trying to use it but on IE & firefox photo image is displaying out of box.
what must be the reason? I appreciate your help.
Alto

Cool, this is awesome… thanks a lot
Peter

Fantastic ! – Only one questions:
When you click to see the next or the previous image the slideshow stops and doesn’t start again. Would it be possible to have the slideshow continuing (as in previous version)?
http://www.leigeber.com Michael

Comments are now closed. An updated script is in the works addressing some of the above issues and adding a few new features.