Галерея JQuery + Слайд-шоу - PullRequest
Новая
       19

Галерея JQuery + Слайд-шоу

0 голосов
/ 15 июня 2011

Я пытаюсь построить галерею, которая поворачивает свои изображения каждые 4 секунды.В дополнение к вышесказанному мне нужна функция, чтобы при щелчке по миниатюре это изображение отображалось в области больших изображений.Вот что я делаю: 

function InOut( elem )
{
    elem.removeClass("hidden")
    .fadeIn("slow")
    .delay(2000)
    .fadeOut("slow", function(){
        if(elem.next().length > 0)
          InOut( elem.next() );
        else
          InOut( elem.siblings(':first'));
    });

}

$("a.thumbnail").click(function(){
   var MainImgID = $(this).attr("rel");
   $("#BigImage img").hide();
   InOut($("#BigImage img:nth-child("+MainImgID+")"));      
});

И вот быстрый HTML 

<div id="BigImage">
  <img src="images/1.jpg" id="0" class="hidden" />
  <img src="images/12.jpg" id="1" class="hidden" />
  <img src="images/10.jpg" id="2" class="hidden" />
</div>

<div id="thumb">
  <ul>
    <li><a rel="0"><img src="images/thumbs/1.jpg" /></a></li>
    <li><a rel="1"><img src="images/thumbs/12.jpg" /></a></li>
   <li><a rel="2"><img src="images/thumbs/10.jpg" /></a></li>
  </ul>
</div>

ПРОБЛЕМА Проблема в том, что автоповорот не работает, когда я нажимаюуменьшенное изображение.Это начинает другое слайд-шоу прямо под основным изображением.Если я нажму еще раз, начнется еще одно (третье) слайд-шоу ниже и так далее ...

Пожалуйста, помогите ...

Спасибо

1 Ответ

0 голосов
/ 15 июня 2011

Я думаю, что вы не должны запускать InOut в обратном вызове, просто сделайте другие изображения скрытыми, и большое изображение отобразится так: (при условии, что у них есть id в порядке) 

$("a.thumbnail").click(function(){
   var MainImgID = $(this).attr("rel");
   $("#BigImage img").hide().eq(MainImgID).show();      
});
...