ansaurus

Question

jQuery gallery turn over with next and previous buttons

Answer 1

A:

You could create a variable, say var firstIndex = 0; to hold the array index of the first image currently displayed. Have your "next" button increment it and your "previous" button decrement it as necessary (by 1 or 9 or how you want). Add this value to index in your code.

Naturally you will need to check array bounds.

Jakob Kruse 2010-04-26 18:20:29

Answer 2

+1 A:

Check out my solution to your problem.

A few important notes:

I've changes the way your buttons work from a list to two spans.
I moved the line $(el).append(img) to a more appropriate spot.
The curIndex is the index of the last most image.
To get the next index image, I used curIndex+index, and then modded it by galleryImages.length so that it will loop the overflow rather than giving errors.
You cannot actually see the images (for obvious reasons), so I have added the index as text in each <li> so you can see with is going on.

Mike 2010-04-26 18:21:22

Answer 3

A:

Try this:

<html>
<head>
<style>
#gallery-prev, #gallery-next{text-decoration:underline;color:Blue;cursor:pointer;list-style:none;display:inline;padding:5px;}
#gallery li{list-style:none;display:inline;}
</style>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script> 
<script type="text/javascript">
  galleryImages = new Array(
    'images/tb_01.jpg','images/tb_02.jpg','images/tb_03.jpg',
    'images/tb_04.jpg','images/tb_05.jpg','images/tb_06.jpg',
    'images/tb_07.jpg','images/tb_08.jpg','images/tb_09.jpg',
    'images/tb_10.jpg','images/tb_11.jpg','images/tb_12.jpg',
    'images/tb_13.jpg');

  function loadImages(p) {
    var startIndex = parseInt($('ul#gallery').attr("startIndex")) + 9 * p;
    if (startIndex < 1 || startIndex >= galleryImages.length) return;

    $('ul#gallery')
    .attr('startIndex', startIndex)
    .find("li").children().remove().end()
    .each(function(i, el) {
      var nextID = startIndex - 1 + i;
      if (nextID >= 0 && nextID < galleryImages.length) {
        $(this).append($("<img src='" + galleryImages[nextID] + "' alt='image " + (nextID + 1) + "' />"));
      }
    });
  }

  $(document).ready(function() {
    $('ul#gallery').attr('startIndex', '1');

    for (var i = 1; i <= 9; i++) 
      $('ul#gallery').append("<li></li>");

    loadImages(0);
    $('li#gallery-prev, li#gallery-next').each(function(i) {
      $(this).click(function() {
          loadImages(i == 1 ? 1 : -1); 
      }) 
    });
  });

</script>
</head>
<body>
<ul id="gallery"></ul>
<ul id="gallery-controls">
    <li id="gallery-prev">Previous</li>
    <li id="gallery-next">Next</li>
</ul>
</body>
</html>

leoinfo 2010-04-26 19:27:42

Great! That's it, thank you very much! ;)

Ralf 2010-04-30 09:37:48

ansaurus

tags:

views:

answers:

jQuery gallery turn over with next and previous buttons

related questions