Question

我是一名从事项目工作的网页设计师。我有一个需要jQuery的想法。由于我对jQuery的经验非常基础，我想我会问这里有什么可能是我需要的最佳选择。

我在项目的主页上有一节。我希望有一个等距的图像“墙”。当页面加载时，第一个图像（在左上角）将“缩放”前进类似于Fancybox或Lightbox的功能。然后图像将返回到墙壁，然后行中的下一个图像将“缩放”，依此类推。这将在理论上永远持续下去，除非用户徘徊或点击其中一个图像。

关于如何做到这一点的想法？

谢谢！

“墙”的示例图像链接如下：

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

Answer 1

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 2

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

Answer 3

必须使用jCarousel Lite和prettyPhoto实现类似的功能，我可以告诉你，我遇到的一个瓶颈（并没有找到解决方案，因为没有重写部分的prettyPhoto插件）当旋转木马将图像移入和移出视图时，prettyPhoto正在丢失生成的图库中的元素。此外，当我尝试通过调用prettyPhoto（）重新初始化图库时，我最终附加到已经存在的图库，以便prettyPhoto重复或只是错误地计算图像。

我意识到这不是一个解决方案，而是随着你的进步而值得记住的事情。我可以告诉你的是，jCarousel Lite具有内置的自动播放功能以及当前图像更改时触发的事件。同样，任何好的灯箱都会有一个API来手动生成带有一些内容的窗口。如果您将更改事件与灯箱的手动调用相结合，我相信您可以快速生成您正在寻找的内容。

自动jQuery Carousel触发FancyBox

3 个答案: