使用Fancybox獲取第一個數據庫條目

我有一個while循環從我的數據庫中獲取圖像。如果你點擊圖片，一個盒子會彈出相應的名字。使用Fancybox獲取第一個數據庫條目

因此，如果一個猿的圖像連接到數據庫中的文本「香蕉」，當你點擊猿的圖像時出現的彈出包含單詞「香蕉」。

我想用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來指代的內容，但我不知道該怎麼做它是一個班級。我希望有人能幫助我。

如果這是一個重複的問題，我的道歉。我在這裏是新的，我沒有找到任何其他解決方案，可以幫助我

在此先感謝！

來源

2014-02-08 Kevin Kromjong

同意@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

來源

2014-02-08 22:10:05 JFK

非常感謝！它現在正確顯示名稱。只是好奇，我可以使用更多的一個數據屬性fancybox？以便我顯示名稱和例如圖像？ –

@KevinKromjong：是的，你可以使用多個'data'屬性（對於標題或添加鏈接到打開的內容等） – JFK

我沒有在使用了一段時間的fancybox，但我敢肯定，所有你需要做的，是設置title屬性：

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

來源

2014-02-08 15:15:20 jeroen

感謝您的答覆！現在框下面的標題顯示正確的數據庫條目，但框中的內容仍然相同 –

@KevinKromjong我不確定您的內容是什麼意思。你需要兩次顯示相同的文字嗎？如果不是，你應該擺脫'div'。 – jeroen

我想要項目的名稱（$ row ['name']）在彈出框內。標題將它放在彈出框下面，但我想要框中的項目名稱。 –

使用Fancybox獲取第一個數據庫條目

回答

相關問題