gallery image in a slider

[pemula]

Dear Masters,

 

Please help..

I want to make a image gallery in a sliding page.

 

Thx a lot

gallery image in a slider.txt

[stijn0713]

look up for carousel, you'll find plenty of example code for image sliders.

 

 

i can explain you the basic idea:

 

1) put your images in an unordered list

<ul>
<li>image1</li>
<li>image2</li>
</ul>

2) float your images with a certain size in a div

3) make 2 js functions:

slideRight(), slideLeft().

 

in those functions: get the width of a li and the left indent of your ul. Use this width of a li item to set a new left-indent (this is the sliding effect) e.g.

$('#carousel_ul').animate({'left' : left_indent,queue:false, duration:500})

use a callback function on this animate function to switch the first li to the last position in case you slide to the left and set the left-indent back to the default indent. (that's how you go throught all the images).

 

4) then your need to define your triggers to slide to the left or right, triggering those js slideRight() or slideLeft() functions (e.g. clicking on arrows images or pushing your arrows keys)

 

I can imagine that without code it might seem abstract, but ill suggest you'll try something and then ill be willign to help you further.

Edited February 8, 2013 by stijn0713