Question

插件portfoliojs是我创建旋转木马式投资组合的选择。但是，我发现插件中没有内置缩放功能。由于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）的功能结合起来，而无需重复代码重写？替代方案是什么？

Answer 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

是否可以将fancybox添加到portfoliojs图库？

1 个答案: