Easy image slider with scriptaculous and lightbox
August 11th, 2008
One lame image slider I made while ago. It just slides images with slight transition effect and shows lightboxed hi-res ones when clicked. See demo here, get example source overe here. Have fun!
JavaScript:
{
l1 = new Slider(‘gal-left’,‘left-gal-left’,‘left-gal-right’);
r1 = new Slider(‘gal-right’,‘right-gal-left’,‘right-gal-right’);
});
function Slider(ele,left,right)
{
this.current = 0;
this.items = $(ele).getElementsByTagName(‘li’);
this.count = this.items.length;
for(i=0;i<this.count;i++)
if(i!=0) this.items[i].style.display = ‘none’;
this.slide = function(direction)
{
Effect.Fade(this.items[this.current]);
if(direction == ‘fw’)
if (this.current == (this.count-1)) { this.current = 0; } else { this.current++; }
else
if (this.current == 0) { this.current = (this.count-1); } else { this.current–; }
Effect.Appear(this.items[this.current]);
};
$(right).observe(‘click’,this.slide.bindAsEventListener(this,‘fw’));
$(left).observe(‘click’,this.slide.bindAsEventListener(this,‘prev’));
}
Popularity: 27% [?]

This is actually not that bad. How easy would it be to convert the sliding function into say a glider function. reason I ask is because I am one of those newbies to JQuery who has tried to combine glider and lightbox and then realised it can’t be done due to conflicts!
At least you have got something close to it… :-p
Comment by Richard — June 26, 2009 @ 18:22
Can I ask you a queston?
I tried to add two image sliders on the same page but it just worked with one…
What shold I do or change inside de slide.js code to have 2 of those image slider on the same page?
thank you!
Comment by vincent — September 30, 2009 @ 17:41