使用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