Галерея jQuery переворачивается с помощью кнопок «Далее» и «Предыдущий» - PullRequest
Новая
       12

Галерея jQuery переворачивается с помощью кнопок «Далее» и «Предыдущий»

2 голосов
/ 26 апреля 2010

Я пытаюсь сделать какой-нибудь скрипт переворачивания галереи с помощью jQuery. Для этого я получил массив с - скажем, 13 - изображениями: 

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'
);

Моя галерея выглядит как сетка, показывающая только 9 изображений одновременно. Мой текущий скрипт уже считает количество li-элементов в #gallery, загружает первые 9 изображений и отображает их. HTML выглядит так: 

<ul id="gallery">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

<ul id="gallery-controls">
    <li id="gallery-prev"><a href="#">Previous</a></li>
    <li id="gallery-next"><a href="#">Next</a></li>
</ul>

Я довольно новичок в jQuery, и моя проблема в том, что я не могу понять, как разбить массив на части с 9 элементами, чтобы прикрепить его как ссылку на кнопки управления. Мне нужно что-то вроде этого: 

$('#gallery-next').click(function(){
    $('ul#gallery li').children().remove();
    $('ul#gallery li').each(function(index,el){
        var img = new Image();
        $(img).load(function () {
            $(this).css('display','none');
            $(el).append(this);
            $(this).fadeIn();
        }).attr('src', galleryImages[index]); //index for the next 9 images?!?!
    });
});

Спасибо за помощь!

Ответы [ 3 ]

1 голос
/ 26 апреля 2010

Проверьте мое решение вашей проблемы .

Несколько важных замечаний:

  1. Я изменил способ работы ваших кнопок с списка на два пролета.
  2. Я переместил линию $(el).append(img) в более подходящее место.
  3. curIndex - индекс последнего самого изображения.
  4. Чтобы получить следующее индексное изображение, я использовал curIndex+index, а затем модифицировал его посредством galleryImages.length, чтобы оно зацикливало переполнение, а не выдавало ошибки.
  5. Вы не можете на самом деле видеть изображения (по очевидным причинам), поэтому я добавил индекс в виде текста в каждый <li>, чтобы вы могли видеть, что происходит.
0 голосов
/ 26 апреля 2010

Попробуйте это: 

<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>
0 голосов
/ 26 апреля 2010

Вы можете создать переменную, скажем, var firstIndex = 0; для хранения индекса массива первого отображаемого в данный момент изображения. Сделайте так, чтобы ваша «следующая» кнопка увеличивала его, а ваша «предыдущая» кнопка уменьшала его по мере необходимости (на 1 или 9 или как вы хотите). Добавьте это значение к index в вашем коде.

Естественно, вам нужно будет проверить границы массива.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...