Автоматическая jQuery карусель запускает FancyBox - PullRequest
Новая
       7

Автоматическая jQuery карусель запускает FancyBox

1 голос
/ 25 августа 2009

Я веб-дизайнер, работаю над проектом. У меня есть идея, которая потребует JQuery. Так как мой опыт работы с jQuery довольно прост, я подумал, что могу спросить здесь, какой вариант может быть лучшим для меня.

У меня есть раздел на главной странице проекта. Я хотел бы иметь "стену" изображений, которые были бы одинаково разнесены. Когда страница загрузится, первое изображение (в левом верхнем углу) будет «масштабироваться» вперед, что-то вроде функциональности Fancybox или Lightbox. Затем изображение вернется к стене, а затем следующее изображение в строке будет «увеличено» и так далее. Это будет продолжаться теоретически вечно, если пользователь не наведет указатель мыши или не нажмет на одно из изображений.

Идеи о том, как это можно сделать?

Спасибо!

Пример изображения "стены" связан ниже:

http://i25.tinypic.com/28vejk8.png

Ответы [ 3 ]

1 голос
/ 26 октября 2011

http://jsajax.com/Articles/jquerycarouselprettyphoto/1438

Ниже то, что вам нужно. 

<script type="text/javascript">
 $(function() {
  $('#listimg').jcarousel();
  $('.gallery a[rel^="prettyPhoto"]').prettyPhoto({theme: 'dark_rounded'});
 }); 
</script>

... 

<div id="container">
  <div id="grid">
    <div id="listimg" class="jcarousel-skin-tango"> 
      <ul class="picturelist gallery clearfix">

        <li class="thumb">
          <a href="http://www.youtube.com/watch?v=Sosele6QlWo" 
            title="# 今、風の中で - 平原綾香" rel="prettyPhoto[YouTube]">
            <img src="http://i4.ytimg.com/vi/Sosele6QlWo/default.jpg" alt="" />
          </a>    
        </li>

... 

      </ul>                 
    </div>
   </div>
 </div>
1 голос
/ 20 декабря 2014 
<script>
$(window).load(function() {
    $(".galery_div").each(function() 
    {
        $(this).jCarouselLite({
    auto: 10000,
    speed: 1000,
    visible: 4,
    width:200,
    height:140,
    easing:'easeOutExpo',
    }).removeClass('hidden_d');
    $('a.gallery').on().fancybox({
        'transitionIn'      : 'elastic',
        'transitionOut'     : 'elastic',
        //'transitionIn'        : 'none',
        //'transitionOut'       : 'none',
        'titlePosition'     : 'over',
        'titleFormat'       : 
        function(title, currentArray, currentIndex, currentOpts) {
        return '<span id="fancybox-title-over">Изображение ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';}
    });
    });
  });
</script>
0 голосов
/ 25 августа 2009

Пришлось реализовать что-то подобное с jCarousel Lite и prettyPhoto Я могу сказать вам, что я столкнулся с одним узким местом (и не нашел решения, если не считать переписывания части Плагин prettyPhoto) заключался в том, что по мере того, как карусель перемещает изображения в поле зрения и вне его, prettyPhoto теряет элементы сгенерированной галереи. Кроме того, когда я попытался повторно инициализировать галерею с помощью вызова prettyPhoto (), я добавил к уже существующей галерее, так что prettyPhoto либо повторял, либо просто неправильно считывал изображения.

Я понимаю, что это не решение, а что-то, о чем стоит помнить, когда вы прогрессируете. Что я могу вам сказать, так это то, что в jCarousel Lite встроено автоматическое воспроизведение и события, которые запускаются при изменении текущего изображения. Аналогично, любой хороший лайтбокс будет иметь API для ручного вызова окна с некоторым содержимым. Если вы объедините событие изменения с ручным вызовом лайтбокса, я уверен, что вы сможете быстро создать то, что ищете.

...