Fancybox 图片库

Posted 2023-05-09

【中文标题】Fancybox 图片库

【英文标题】：Fancybox Image Gallery

【发布时间】：2012-11-26 10:04:42

【问题描述】：

我在 iframe 中有下一个代码，并且我实现了它在父级中显示，但现在我不知道如何将图像分组，如 fancybox 示例中的图像库。

我在一个例子中看到了这个：

    $(document).ready(function() 
$('.imagen').click(function(e)
e.preventDefault();
parent.$.fancybox([
href:'images/01.jpg', title: '01',
href:'images/02.jpg', title: '02',
href:'images/03.jpg', title: '03'
],
// href: this.href,
helpers: 
overlay: ...............

但我不希望这样，因为链接将是动态的。我想使用类似的东西 $(".fancybox") .attr('rel', 'gallery') 并像使用它一样

 <a class="fancybox" rel="gallery" href="Lector.ashx?ImagenId=0" >

要实现查看所有带有下一步按钮的 img 作为图片库，但我不需要修改。

我的代码：

    <script type="text/javascript">
    $(document).ready(function () 
        $('.fancybox').click(function (e) 
            e.preventDefault();
            parent.$.fancybox(
                href: this.href,
                helpers: 
                    title:  type: 'inside' ,
                    overlay: 
                        opacity: 0.3
                     // overlay
                    //, buttons: 
                 // helpers
            ); // fancybox
        ); // click
    ); 
</script>

身体

<a class="fancybox" href="Lector.ashx?ImagenId=14" >
  <img  src="../Resources/background.png"  />
</a>
<a class="fancybox" href="Lector.ashx?ImagenId=6">
<img  src="Lector.ashx?ImagenId=6"  />
 </a>
 <a class="fancybox" href="Lector.ashx?ImagenId=20">
    <img  src="Lector.ashx?ImagenId=6"  />
 </a>

我正在使用 fancybox 2.1.3 请帮助我！！！！ 提前致谢

I have to do this?
    $(document).ready(function () 
        $('.fancybox').click(function (e) 
    like i said before at start???
    );//click
    $('.fancybox').attr('rel', 'gallery').fancybox(
         JFK code??
     );
    );//

【问题讨论】：

您是否查看过 Fancy box 文档寻求帮助？

是的，我看到了这个 Open something 但它不适用于 ashx

【参考方案1】：

如果你有这些链接：

<a class="fancybox" href="Lector.ashx?ImagenId=14" >
  <img  src="../Resources/background.png"  />
</a>
<a class="fancybox" href="Lector.ashx?ImagenId=6">
  <img  class="fancybox" src="Lector.ashx?ImagenId=6.jpg"  />
</a>
<a class="fancybox" href="Lector.ashx?ImagenId=20">
  <img  src="Lector.ashx?ImagenId=6.jpg"  />
</a>

...请注意，它们都没有图像扩展名，因此fancybox 不知道要处理的type 内容...您需要使用type : "image" API 选项告诉它。查看Fancybox documentationFAQ标签，第5号

您的完整代码应如下所示：

$(document).ready(function ()
    $('.fancybox').attr('rel', 'gallery').fancybox(
            type : "image", // force type of content to image
            helpers: 
                title:  type: 'inside' ,
                overlay: 
                    opacity: 0.3
                 // overlay
             // helpers
    ); // fancybox
); // ready

编辑：我注意到您还在img 标签中设置了fancybox 类（上面代码中的第二个链接），例如：

<img  class="fancybox" ....

...这可能会产生意想不到的结果，因此最好将其从那里删除。只有<a> 标签应该有fancybox 类。

【讨论】：

感谢您的回答。

顺便说一句，我必须在 .click 函数中输入：“image”和 .attr('rel','gallery')？

@user1887471 : 从 iframe 检查 ***.com/a/8855410/1055987 在父级中打开 fancybox 以获取详细说明。

@user1887471 ...如果您考虑meta.stackexchange.com/a/5235，请不要忘记

$(document).ready(function () $('.fancybox').attr('rel', 'gallery').parent.$.fancybox( type: "image" , // 将内容类型强制为图像助手： title: type: 'inside' , overlay: opacity: 0.3 // overlay // helpers ); // fancybox ); // 准备好为什么这不起作用？