Question

我有一个while循环，可以从我的数据库中获取图像。如果单击图像，将弹出一个带有相应名称的框。

因此，如果ape的图像连接到数据库中的文本“banana”，则单击ape图像时出现的弹出窗口包含单词“banana”。

我想通过Fancybox2实现这一目标。一切正常，但弹出窗口中的文本只显示数据库的第一个条目。我的数据库中有四个图像，它们都在屏幕上，但无论您单击哪个图像，弹出窗口中的文本都是第一个数据库条目的文本。

我已经在互联网上完成了我的研究并找到了多个解决方案，比如“在jquery文件中使用类而不是id”，但它们都没有工作。

这是我的代码：

HTML

<a class="fancybox" href="#data">
    <img src="<?php echo $row['image'];?>"/>
</a>


<div id="data">
    <p><?php echo $row['name'];?></p>
</div>

的jQuery

$(document).ready(function () {
    $(".fancybox").fancybox();
});

我知道我使用ID来引用内容，但我不知道如何使它成为一个类。我希望有人可以帮助我。

如果这是一个重复的问题，我道歉。我是新来的，我没有找到任何可以帮助我的其他解决方案

提前致谢！

Answer 1

我暂时没有使用过fancybox，但我很确定您需要做的就是设置title属性：

<a class="fancybox" href="#data" title="<?php echo $row['name'];?>">
    <img src="<?php echo $row['image'];?>"/>
</a>

Answer 2

同意@Jeroen：您可能不需要#data部门，既不会将内容显示为inline，也会显示为html（直接来自链接），因此请尝试添加（HTML5） data-*标记的<a>属性，如：

<a class="fancybox" href="#" data-content="<?php echo $row['name'];?>">
    <img src="<?php echo $row['image'];?>" alt=""/>
</a>

然后，使用data回调获取type属性中的内容并将html设置为beforeLoad，如下所示：

jQuery(document).ready(function ($) {
    $(".fancybox").fancybox({
        type: "html",
        beforeLoad: function () {
            this.content = $(this.element).data("content");
        }
    });
});

参见 JSFIDDLE

仅使用Fancybox获取第一个数据库条目

2 个答案: