0

插件投资组合是我创建轮播式投资组合的选择。但是，我发现插件中没有内置缩放功能。由于 jquery 代码的相对复杂性，我不知道如何手动将缩放（更准确地说，fancybox）功能添加到画廊。“lightbox=true”初始化选项只会使图库中的其他图像变暗，但不会缩放选择的图像。

理想情况下，我想在我的画廊中添加 fancybox 功能，例如我的 html 看起来像这样：

    <div id="gallery">
        <a href="someimage.jpg" class="fancybox"> <img src="someimage.jpg></img> </a>              
        <a href="someimage2.jpg" class="fancybox"> <img src="someimage2.jpg></img> </a>
    </div>

但是，portfoliojs 中的图库仅在 ( 之间没有级别) 的子元素时有效：

   <div id="gallery">
         <img src="someimage.jpg></img>               
         <img src="someimage2.jpg></img>
    </div>

我试图将<img>元素包装进去<a>，但没有奏效。

有没有一种方法可以结合两个插件（portfoliojs 和 fancybox）的功能而无需大量代码重写？替代方案是什么？

4

1 回答 1

1

这就是我会做的。

有这样的html：

<div id="gallery">
    <img src="images/01.jpg" alt=""/>
    <img src="images/02.jpg" alt=""/>
</div>

其中src属性指向要在fancybox中显示的图像，使用以下代码：

var images = [];
$("#gallery").find("img").each(function(i){
    images[i] = $(this).attr("src");
    $(this).bind("click", function(){
        $.fancybox(images,{
            index: i
        });
    })
});

见JSFIDDLE

注意：您可以使用.on()（首选）而不是.bind()：

$(this).on("click", function(){ ...

不过它需要 jQuery 1.7+。查看更新的 JSFIDDLE

于 2013-09-07T21:24:30.110 回答