CODEWITHSUNDEEP
javascriptjquery
sterix24
sterix24

Reputation: 2400

How to create a vertical image scroller?

I have a page on a site that's supposed to show an image for each floor of a building. At the moment I have a left and right panel, with the left panel containing the list of floors. I then need the user to be able to click on one of these links and have an image slider on the right that cycles through the images, from ground to top floor until it hits the corresponding image.

Usually in this situation I'd use jquery cycle but I need the rotator to quickly flick through all the images in between.

For example: I have a building with 10 floors and I'm currently viewing floor one. I click on floor 9, which means I'll need the slider to quickly flick through floors 1-9 and finally end on 10. How can I do this? The link above will allow me to go to floor 10, but it won't flick through all the floors inbetween. Does anyone know how I can achieve this effect?

Thanks!

Upvotes: 1

Views: 2643

Answers (1)

Roko C. Buljan
Roko C. Buljan

Reputation: 206078

It's actually really simple:

jsBin demo

Let's say you have this HTML:

<div id="thumbs">
  <!-- ... more images here -->
  <img src="thumb/image_4.jpg" />
  <img src="thumb/image_3.jpg" />
  <img src="thumb/image_2.jpg" />
  <img src="thumb/image_1.jpg" />  
</div>
  
<div id="gallery">  <!-- overflow hidden -->
  <div id="slider">  <!-- position absolute -->
    <!-- ... more images here -->
    <img src="image_4.jpg" />
    <img src="image_3.jpg" />
    <img src="image_2.jpg" />
    <img src="image_1.jpg" />            
  </div>  
</div>

The jQuery could look like this:

var galH = 320; // SET HERE THE GALLERY HEIGHT

var N = $('#slider img').length;

$('#slider').css({ top: -galH*(N-1) }); // initial kick to bring the #slider to the first image

$('#thumbs img').on('click',function(){
  N = $(this).index();
  $('#slider').stop(1).animate({top: -galH*N},1000);
});

Upvotes: 3

Related Questions