是否可以将花式框添加到 portfoliojs 图片库

Is it possible to add fancybox to portfoliojs image gallery?

本文关键字：添加 portfoliojs 图片库 是否      更新时间：2023-09-26

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

理想情况下，我想为我的图库添加花哨的框功能，例如我的 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）的功能？替代方案是什么？

这就是我会做的。

有一个像这样的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

相关文章：