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

Question

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

因此，如果将猿猴的图像连接到数据库中的文本“香蕉”，则单击猿猴的图像时出现的弹出窗口将包含单词“ 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 （直接从链接显示），因此请尝试在您的<a>标签中添加（HTML5） data-*属性，例如：

<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