Simple JavaScript Slide Show Using script.aculo.us

adding a visibility=hidden style to the actual img tag will prevent it from displaying all the images at once in the first second of the page load (keep in mind that sometimes the css is applyed after the first second so it wont hide all the images) :

if it doesnt work well try this instead:

the first comment didnt go well, so just add this attribute to all the img tags in the html:

style=”visibility: hidden”

if it doesnt work well try this instead:

style=”display: none”

A good point well made. I should have also mentioned that I am currently working on an “advanced” slide show that will provide full image preloading as well as many other neat features.

I’m working on a website now using this script, I haven’t tried the visibility:hidden but I did try style=”display:none” and that makes the images disappear altogether. style=”display:hidden” doesn’t work either, i suppose visibility is probably different.

I’ll give it a try and let you know. I’ve used a few scripts using the mootools framework but the use of prototype in my current site conflicts with a few of its function calls. I figure scriptaculous is a bit more straightforward anyway, just a bit easier to deploy.

I haven’t given the “display:none” a go yet but will do this evening a let you know how I get on.

As for mootools, I have to say I really love it and think its effects are the smoothest out there. It’s just a real shame that it does clash with Prototype. Very frustrating…

This script is great and exactly what I was looking for.
I will be modifying it slightly is that ok?

Also if you need help with the advanced version let me know, as I think this would be useful to many a peoples.

Hey There,

This script is just great - I was wondering though if anyone has found a solution to the image loading issue - ie: the images are shown loading, so there is a little hiccup in the beginning of the slideshow.

Any direction on this would be appreciated!

Thanks,
msflux.

Thank you, this looks great!!!
I’m going to give it a try with a project I’m working on.

This script is great. I was wondering if there was a simple function that could be written to stop the slideshow. I’m currently working from a single page. I have a button that starts the slideshow, but I would like a button that stops the slide show.

Any help would be greatly appreciated.

I think I found an answer to my own question. history.go(0);

Hi, Thanks for the great script. One question: If I want to apply the script to a class of divs (i.e. having several slideshows within one page), is it possible to do so? Your help is appreciated.

That is possible but not currently from this version. I’ll have a look at editing the code to provide exactly what you looking for. Check back soon and it will be up on the site.

Cheers

Andy

This is great work Andy, and I’ve been enjoying reading your site since stumbling upon it not long ago. I was looking at that same script on DZone Snippets also but it was just much nicer to come here and look at working examples.

I’ve implemented the same slide show on my personal site at http://www.henrytapia.com/. I just wanted to make a couple of comments:

1) This script still works nicely if you want to overlay elements over the photos (eg. paragraphs for captions as I have done). Just need to set them to be absolutely positioned and away you go.

2) Where you have #slide-images li{ position:absolute; [etc...] } you have not actually set top/bottom and left/right. This caused strange rendering in IE7 for me (I think it may have defaulted to “center”) and after much weeping and gnashing of teeth I solved it simply by adding “top:0; left:0;”. So I thought I would just share that.

Keep up the interesting posts and thanks again…

I’ve made something kinda similar to this -
http://www.aesthetic-design.co.uk/aestheticslide

scriptaculous is cool

Just a detail:

on init() function i had to make a condition to ensure that the ul with id slide-images exists.

My website has pages with images and other pages that don’t have, and i was getting a javascript error.

Code:
function init() {
if ($(’slide-images’)) {
var lis = $(’slide-images’).getElementsByTagName(’li’);

for( i=0; i

Sorry, i didn’t know that the text was limited. If you need a better explanation, write it to me.

But the main is the line : if ($(’slide-images’)) {

Are you still planning on doing an “advanced” slideshow? I’m looking forward to it.

What i need is some way to control what slide is shown, like next & previous buttons. that *seems* simple enough, but i’m having a hard time.

If and when you get to doing an advanced slideshow, i’m hoping it’ll have this feature.

Just wanted to let you guys know, that display: none will work just fine with the scriptaculous library. The only catch is that for an effect to “appear” the element, the display: none MUST be set inline, and NOT in an external style sheet.

This isnt working for me in FF or IE7. I get the images showing sequentially very fast and then they stay stuck on one image.

If I change the Effect.Fade to SlideUp and the Appear to SlideDown, the slides change, but I don’t get any updating with the code as is using Fade/Appear.

Any thoughts?

I think I have managed a suitable fix for the flash of the images that this script displays sometimes :

like another poster said - add the INLINE style to the LI elements, within your HTML

so LI style= “visiblity: hidden”

THEN in the script itself, add this in the init() for loop: (before the if(i!=0) bit:

lis[i].style.visibility = ‘visible’;

esentially when it inits the LI list items it sets them back to visible. Visibility is the key since until visible, the elements act as a placeholder.

hi guys, it’s super easy to make it a linked slideshow, just wrap the images whit a href’s and you’re done! so super!! thanx andrew!