在所有帶有圖像的定位標記上啓動fancybox

我在啓動fancybox時遇到問題。我想在#content塊內的所有圖片上使用fancybox。所有的圖像有以下代碼：在所有帶有圖像的定位標記上啓動fancybox

<a href="img.jpg"> 
<img title="title" src="img.jpg" alt="alt" width="225" height="169"> 
</a>

我不想使用特殊類的鏈接（圖片由用戶通過TinyMCE的管理）。我想：

$("#content a").has('img').fancybox({ 
..fancybox settings 
});

和以及

$("#content a img").parent('a').fancybox({ 
..fancybox settings 
});

沒有任何的運氣。 $("#content a").has('img').hide()完美地工作 - 所以選擇適當的元素就好了。

編輯：也許對於更好地理解：使用$("#content a")作品，但適用於所有<a>標籤，這意味着像<a href="google.com">google</a>以及簡單的聯繫是「fancyboxed」。

EDIT2： HTML代碼：

<div id="content"> 
<p>Lots of text. 
    <a href="href"> 
     <img src="src" alt="alt" width="225" height="169" /> 
    </a> 
</p> 
<p>another text</p> 
<p>more text <a href="http://www.google.com">Simple link which should not be opened by fancybox</a></p> 
</div>

THX的任何想法。使用此給出一個相對

來源

2012-03-18 tsusanka

u能解釋更多的笏ü想要什麼？ – Ghostman 2012-03-18 17:16:37

我想打開fancybox中的所有圖像。所以我必須在所有標籤上打開fancybox，標籤裏面有圖像。 – tsusanka 2012-03-18 17:19:38

嗯，我終於得到它的工作。由於jQuery .has() Target Different Element，我只是將長度屬性添加到您的代碼中。我不得不說，我不知道爲什麼$('#content a').has('img').hide();沒有工作。當我儘可能地「清理」代碼時，它就起作用了。我無法找到哪個元素導致問題。

來源

2012-03-19 08:39:49 tsusanka

-1

<a rel="example_group" href="img.jpg"> 
<img title="title" src="img.jpg" alt="alt" width="225" height="169"> 
</a> 


$("a[rel=example_group]").fancybox({ 
..fancybox settings 


});

或

$("#content a[rel=example_group]").fancybox({ 
..fancybox settings 


});

嘗試錨

來源

2012-03-18 17:23:02 Ghostman

鑑於他不想使用一個類，我不認爲rel屬性更好。 – powerbuoy 2012-03-18 17:30:49

但他需要按照他的問題使用fancybox打開所有圖像 – Ghostman 2012-03-18 17:31:58

抱歉讓你困惑，我不在乎圖像是否在共同畫廊中，所以其他人說得對。 – tsusanka 2012-03-18 17:57:13

這將使的fancybox所有在格的圖像與ID的內容。

$("#content img").fancybox({ 
    ..fancybox settings 
    });

這應該在所有標籤上啓用fancybox，它在內容div中包含圖像。

$("#content a").each(function(){ 
    if($(this).has("img")) 
    { 
     $(this).fancybox({ 
      //..fancybox settings 
     }); 
    } 
    });

來源

2012-03-18 17:24:03 Shyju

thx爲您的答案，不幸的是這是行不通的。這裏用'hide（）'函數替換'fancybox'隱藏所有標籤。我必須檢查我的代碼是否真的有效，因爲這很奇怪。 – tsusanka 2012-03-18 17:55:14

看起來像是有效的.. – tsusanka 2012-03-18 18:03:40

$('a').has('img')應該返回所有具有img元素，因此它很古怪，它不工作a元素。這個怎麼樣：

$('a').each(function() { 
    if ($(this).has('img')) { 
     $(this).fancybox(); 
    } 
});

來源

2012-03-18 17:34:27 powerbuoy

thx爲您的答案，我評論細節Shyju的帖子。 – tsusanka 2012-03-18 17:56:19

爲什麼不直接將這些鏈接鏈接到圖片而不是那些在其內容中包含圖片的鏈接？這可能是你需要的，因爲Fancybox被用來顯示大圖片。

這是很容易做到：

//build a selector that targets all links ending in an image extension 
var thumbnails = 'a[href$=".gif"],a[href$=".jpg"],a[href$=".jpeg"],a[href$=".png"],a[href$=".GIF"],a[href$=".JPG"],a[href$=".JPEG"],a[href$=".PNG"]'; 

//add "fancybox" class to those (this step could be skipped if you want) and group them under a same "rel" to enable previous/next buttons once in Fancybox 
jQuery(thumbnails).addClass("fancybox").attr("rel","lightbox"); 

//call fancybox 
jQuery('.fancybox').fancybox();

來源

2013-12-04 12:27:39 guidod

在所有帶有圖像的定位標記上啓動fancybox

回答

相關問題