自動將fancybox類添加到圖像鏈接

我正在使用Pulse CMS設計一個需要可編輯的簡單靜態網站。我正在使用FancyBox進行圖像突出顯示和增強。自動將fancybox類添加到圖像鏈接

我想要的是所有的圖像自動與FancyBox關聯，而無需手動添加代碼。

基本上是這樣的

<img src="image.jpg">

應該成爲

<a class="fancybox" href="image.jpg"><img src="image.jpg"></a>

我希望這是清楚我的目標。我擺弄着使用jQuery和PHP，但無法真正弄清楚。我甚至不知道這是否可能，如果沒有其他選擇。

針對肯尼迪的建議 - 請告訴我在做什麼錯在這裏：

<html> 
    <head> 
     <link rel="stylesheet" href="includes/jquery.fancybox.css" type="text/css" media="screen"/>  
     <script type="text/javascript" src="includes/jquery-1.9.1.min.js" type="text/javascript"></script> 
     <script type="text/javascript" src="includes/jquery.fancybox.js" type="text/javascript"></script>  
     <script type="text/javascript"> 
      $("img").on("click", function(){ 
       $.fancybox($(this).attr("src"),{ 
        // API options 
        padding : 0 // example 
       }); 
      }); 
     </script> 
    </head> 

    <body> 

     <img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg" alt=""/> 

    </body> 
</html>

來源

2013-04-08 Daniel

你需要用你的代碼在'。就緒（）'方法...檢查** [更新的jsfiddle（http://jsfiddle.net/g5uzx/3/）** – JFK 2013-04-09 23:12:16

如果你想要的是all the images to automatically be associated with FancyBox，那麼也許你甚至都不需要包裝 - .wrap() - 他們有一個錨。一種不同的方法將他們直接鏈接到的fancybox上click，如：

$("img").on("click", function(){ 
    $.fancybox($(this).attr("src"),{ 
     // API options 
     padding : 0 // example 
    }); 
});

這樣，實際的圖像被點擊，直到你不處理任何事情。這將是在性能方面更好（考慮100+圖片被包裹每個頁面加載）

見JSFIDDLE

注意：.on()需要jQuery的V1。7+

編輯：

Umair Abid的約特異性的評論是值得考慮的，因爲你可能不喜歡的fancybox打開所有頁面的圖像（這將包括您的標誌。），這將是一個更好的辦法是針對你的具體內容容器的圖像，所以這條線

$("img").on("click", function(){

...會更好地工作，像

$("#contentContainer img").on("click", function(){

來源

2013-04-08 02:54:47 JFK

我即將變得瘋狂。您的jsFiddle當然可以正常工作，但它不適用於我的網站。點擊圖片不會做任何事情。對不起，我無法給出任何具體的反饋，但我被卡住了：/ – Daniel 2013-04-09 22:13:06

我在上面的原始問題中添加了一個示例以進行說明。 – Daniel 2013-04-09 22:45:03

@Daniel你需要用你的代碼在'。就緒（）'方法...看看** [更新的jsfiddle（http://jsfiddle.net/g5uzx/3/）** – JFK 2013-04-09 23:13:27

使用jQuery的.wrap（）函數與錨標籤包裝的所有圖像的頁面指向圖像位置

來源

2013-04-08 01:02:57 Neal

$("img").wrap(function() { 
    return '<a class="fancybox" href="' + $(this).attr("src") + '"/>'; 
});

這應該有效。

編輯：哇錯別字出wazoo

來源

2013-04-08 01:05:42 hatkirby

我猜有可能通過jQuery的。首先，你需要給圖片IMG要轉換成的fancybox網址標籤類，不是使用下面的jQuery代碼

$('img.attach_fancybox').each(function(){ 
    var src = $(this).attr('src'); 
    $(this).after('<a class="fancybox" href="'+src+'"><img src="'+src+'"></a>'); 
    $(this).hide(); 
})

我沒有測試代碼，以便讓我知道，如果它不工作

來源

2013-04-08 01:08:35

我想你錯過了其中的一部分它說：'不必手動添加代碼.' – JFK 2013-04-08 03:12:11

@JFK：可能是但我想具體，你仍然可以刪除類選擇器，並選擇所有的圖像，但我認爲這不會是一個很好的解決方案來轉換所有img標籤....沒人想在fancybox中打開標誌;） – 2013-04-08 06:10:07

同意。也許'$（'＃container img'）'會更好。 – JFK 2013-04-08 07:10:02

使用

$("img").wrap(function() { 
    return "<a class='fancybox' href='" + $(this).attr("src") + "' />"; 
});

來源

2013-04-08 01:09:41

自動將fancybox類添加到圖像鏈接

回答

相關問題