1

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

我在项目的主页上有一个部分。我想要一堵等距的图像“墙”。当页面加载时，第一张图片（在左上角）会像 Fancybox 或 Lightbox 的功能一样向前“缩放”。然后图像将返回到墙上，然后该行中的下一个图像将“缩放”，依此类推。理论上这将永远持续下去，除非用户悬停或点击其中一张图像。

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

谢谢！

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

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

4

3 回答 3

1 
<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>
于 2014-12-20T14:16:09.493 回答
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>
于 2011-10-26T18:55:41.947 回答
0

不得不使用jCarousel Lite和prettyPhoto实现类似的东西，我可以告诉你，我遇到的一个瓶颈（并且没有找到解决方案，除非重写部分 prettyPhoto 插件）是当轮播将图像移入和移出查看 prettyPhoto 正在丢失生成的画廊的元素。此外，当我尝试通过调用 prettyPhoto() 来重新初始化图库时，我最终将附加到已经存在的图库中，这样，prettyPhoto 要么重复，要么只是错误地计算了图像。

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

于 2009-08-24T22:16:38.383 回答