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

Question

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

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

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

Спасибо!

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

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

Answer 1

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

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

Answer 2

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> 

Answer 3

<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>