Jump to content


Photo

gallery image in a slider


  • Please log in to reply
1 reply to this topic

#1 pemula

pemula

    Newbie

  • Members
  • Pip
  • 8 posts

Posted 07 February 2013 - 10:56 PM

Dear Masters,

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

Thx a lot

Attached Files



#2 stijn0713

stijn0713

    Advanced Member

  • Members
  • PipPipPip
  • 231 posts

Posted 08 February 2013 - 05:13 AM

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 by stijn0713, 08 February 2013 - 05:23 AM.





0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Cheap Linux VPS from $5
SSD Storage, 30 day Guarantee
1 TB of BW, 100% Network Uptime

AlphaBit.com