jQuery FancyBox Plugin 动态显示图库

Posted 2023-05-09

【中文标题】jQuery FancyBox Plugin 动态显示图库

【英文标题】：jQuery FancyBox Plugin display gallery dynamically

【发布时间】：2016-02-08 14:05:55

【问题描述】：

我的 CodeIgniter 应用中有一个视图。我正在使用 fancybox 来显示来自 foreach php 循环的用户提交的图像。我的观点是这样的：

<ul>
<?php
foreach($photo_strip['photos'] as $photo)  ?>
<li>
<a href="" class="fancybox" rel="group"><img src="<?= $photo->image ?>" /></a>
</li>
</ul>

在<li> 元素中，我不仅显示图像，还链接它们。请注意正在显示的图像或拇指文件夹中的图像。为了让拇指显示实际图像，我通过使用 Jquery 更改 href 路径将每个缩略图动态链接到其父图像。所以这是我的 jQuery ：

$(document).ready(function()

$('.fancybox').click(function()

    var srcPath = $(this).find("img").attr("src");
    var newFilename = srcPath.split('/').pop();
    var newPath = 'http://example.com/images/trip/' + newFilename;
);

所以每次当用户点击保存在目录：/trip/thumbs/ 中的缩略图时，我的 jQuery 都会更改文件路径并从：/trip/ 加载实际图像 到目前为止，这很好。但是当我向它添加fancybox时，它要么只显示除第一个单击的图像之外的缩略图，要么尽管单击导航按钮但仍加载相同的图像。所以我的完整脚本如下所示：

$(document).ready(function()

$('.fancybox').click(function()

    var srcPath = $(this).find("img").attr("src");
    var newFilename = srcPath.split('/').pop();
    var newPath = 'http://example.com/images/trip/' + newFilename;
 $('.fancybox').attr("href", newPath);
 $('.fancybox').fancybox(
    padding: 0
);
 );
);

我的问题是：我希望能够单击单个拇指，它会打开fancybox，当我导航时，它应该从父目录打开图像，而不是拇指本身。

有没有办法做到这一点？

【参考方案1】：

由于 fancybox 从每个锚点（为空）中的 href 值集合构建图库，因此不值得在 click 之后更改这些值（但对于第一个元素），因为导航箭头fancybox 画廊不知道click 事件 绑定到具有class fancybox 的锚点。换句话说，导航箭头上的click 事件与绑定到具有class fancybox 的元素的事件不同。

您可能需要使用.each() 方法在锚绑定到fancybox 之前将data-fancybox-href 属性添加到锚。然后你可以将 fancybox 链接到同一个选择器。

此外，由于您只是将<img> 标记的路径从/trip/thumbs/ 更改为/trip/，因此为简单起见，您可以使用.replace() 方法，而不是使用拆分和弹出声明许多变量，例如：

jQuery(document).ready(function () 
    jQuery(".fancybox").each(function () 
        $(this).attr("data-fancybox-href", $(this).find("img").attr("src").replace("/trip/thumbs/", "/trip/"));
    ).fancybox(
        padding: 0
    );
);

见JSFIDLE

【讨论】：

真棒@JFK 这工作！并且不知道为什么在部署这些变量交换选项之前我多次拒绝替换选项。听到有人在***上说它不起作用。我对偏离课程的功能缺乏了解。而且，这个each() 不是点击，而是一个救命稻草。我感谢你。谢谢你:)