Reputation: 11763

jquery - make a simple gallery out of a bunch of DIVs

I was wondering if anyone has something simple to create a gallery from a bunch of divs. Such as

<div id=gallery>
    <div class='slide' id=1><img src='image1.png'> this is image 1</div>
    <div class='slide' id=2><img src='image1.png'> this is image 1</div>
    <div class='slide' id=3><img src='image1.png'> this is image 1</div>
    <div class='slide' id=4><img src='image1.png'> this is image 1</div>
</div>

I like to show one DIV at a time. Clicking div advances to next slide. And at the end, it loops back to the first one.

No effects, just a simple showing of one div followed by next.

Thanks Scott

UPDATE:

Okay, I decided to just write my own based on http://sixrevisions.com/tutorials/javascript_tutorial/create-a-slick-and-accessible-slideshow-using-jquery/. Anyone can make this code more tight and efficient, please add comment.

$(document).ready(function(){
  var currentPosition = 1;
  var slides = $('.slide');
  var numberOfSlides = slides.length;

  if(currentPosition==1){ $('.slide').hide(); $('#1').show()};

  // Create event listeners for .controls clicks
  $('.slide')
    .bind('click', function(){
    currentPosition = parseInt($(this).attr('id'));
    if(currentPosition == numberOfSlides) {
        $('.slide').hide(); 
        $('#1').show();
    } else {
        $('.slide').hide();
        nextPosition = parseInt(currentPosition+1);

        $('#'+nextPosition).show();
    }
  });
});

Upvotes: 2