Как установить начальный образ jCarousel на основе щелчка мышью отдельной галереи изображений?

Question

У меня есть страница, которая содержит ползунок jCarousel (в div) и div, который содержит список миниатюр. Карусель скрыта при начальной загрузке страницы, в то время как миниатюры видны. То, что я пытаюсь достичь, - это когда пользователь нажимает на определенный эскиз, список миниатюр (или галерея, я должен сказать) исчезает, когда карусель становится видимой. С большей версией изображения щелкнутого миниатюры, показанного сначала на карусель. Я попытался установить параметр конфигурации «карусель» в переменную, которая содержит идентификатор эскиза щелчка, но это дало мне нечетные результаты. Любая помощь будет принята с благодарностью! Вот мой код:

<script type="text/javascript"> 
$(document).ready(function() { 
    var currImage; 
    $('#carousel').hide(); 
    $('.thumb').click(function(){ 
     $('#thumbs').fadeOut('slow'); 
     currImage = $(this).attr('id'); 

     $('#mycarousel').jcarousel({ 
      start: currImage, 
      visible: 1, 
      scroll: 1 
     }); 
     $('#carousel').fadeIn('slow');  
    }); 
}); 
</script> 
<div id="thumbs"> 
    <ul class="thumb-display"> 
     <li> 
      <a class="thumb" href="#" id="1"> 
       <img src="pic1-thumb.jpg" /> 
      </a> 
     </li> 
     <li> 
      <a class="thumb" href="#" id="2"> 
       <img src="pic2-thumb.jpg" /> 
      </a> 
     </li> 
    </ul> 
</div> 
<div id="carousel"> 
    <ul id="mycarousel" class="jcarousel-skin-tango"> 
     <li><img src="pic1-large/></li> 
     <li><img src="pic2-large/></li> 
    </ul> 
</div> 

Answer 1

pphou, ваше намеренное использование jCarousel очень похоже на пример Carousel with External Controls.

Трюк заключается в том, чтобы настроить миниатюры как внешние элементы управления в функции initCallback.

Код будет выглядеть примерно так:

JavaScript:

$(document).ready(function() { 
    $thumbs = $('#thumbs'); 
    $carousel = $('#mycarousel').hide(); 
    $carousel.jcarousel({ 
     visible: 1, 
     scroll: 1, 
     initCallback: function(carousel) { 
      $thumbs.find('a').on('click', function() { 
       carousel.scroll($.jcarousel.intval($(this).attr('id'))); 
//    carousel.scroll($.jcarousel.intval($(this).index()));//may work, if so then omit ids from the HTML 
       $thumbs.fadeOut('slow'); 
       $carousel.fadeIn('slow'); 
       return false; 
      }); 
     } 
    }); 
}); 

непроверенных

Вам может понадобиться, чтобы играть с кодом немного, чтобы получить именно то, что вы хотите.

Вам также необходимо установить путь назад к эскизам из карусели. Я не рассматривал этот аспект.

Не забудьте указать идентификаторы миниатюр от 0 (ноль), как указывает gregL.

Answer 2

Оказывается, что простой ответ, что start является 0 на основе, а не на основе 1.

Так попробуйте использовать:

$('#mycarousel').jcarousel({ 
     start: currImage - 1, 
     visible: 1, 
     scroll: 1 
    }); 

инициализацию jCarousel.

В качестве альтернативы, может ли плагин правильно определять размеры изображений? Если нет, попробуйте добавить явные атрибуты height и width или стили CSS.

Кроме того, идентификаторы, вероятно, не лучше, чем «1», «2» и так далее. Используйте вместо этого атрибут data-imagenum.