Question

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

<ul>
<?php
foreach($photo_strip['photos'] as $photo) { ?>
<li>
<a href="" class="fancybox" rel="group"><img src="<?= $photo->image ?>" alt=""/></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;
});

因此，每当用户单击保存在目录中的thumnail：/ 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，当我导航时，它应该从父目录打开图像，而不是拇指本身。

有没有这样做？

Answer 1

由于fancybox根据每个锚中的href值集合（它们是空的）构建库，因此在click之后（但对于第一个元素）更改这些值是不值得的，因为， fancybox图库的导航箭头无法识别与 class click绑定到锚点的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

jQuery FancyBox插件动态显示库

1 个答案: