画像が入ったすべてのアンカータグにfancyboxを起動します

Question

fancyboxの起動に問題があります。 #contentブロック内のすべての画像にfancyboxを使用したいと思います。私は（写真はTinyMCEを介してユーザによって管理されている）リンクのための特別なクラスを使用したくない

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

：すべての画像は、次のコードを持っています。私が試した：

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

と同様

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

を任意の運なし。 $("#content a").has('img').hide()は完全に機能します。したがって、適切な要素を選択するだけで問題ありません。

EDIT：たぶん、より良い理解のために：$("#content a")作品を使用しますが、<a href="google.com">google</a>などもシンプルなリンクは「fancyboxed」であることを意味し、すべての<a>タグに動作します。

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を。

Answer 1

さて、私はついにそれを実現しました。 jQuery .has() Target Different Elementのおかげであなたのコードに長さ属性を追加しました。

$(document).ready(function() { 
    $('#content a').each(function() { 
    if ($(this).has('img').length) { 
     $(this).fancybox(); 
    } 
}); 

私は$('#content a').has('img').hide();が機能しなかった理由を私は知らないことを、言わなければなりません。できるだけコードを「きれいにする」と、効果がありました。私は問題を引き起こした要素を見つけることができませんでした。

Answer 2

<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 


}); 

これは

Answer 3

これを固定するためのrelを与える使用してみてくださいIDのコンテンツを持つdivの下にあるすべての画像をfancyboxを有効にする必要があります。

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

これは、コンテンツdiv内にイメージを持つすべてのタグにfancyboxを有効にする必要があります。

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

Answer 4

$('a').has('img')それが動作しないことを本当に奇妙ですのでimgの要素を持っているすべてのaの要素を返す必要があります。どうすればいいですか：

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

Answer 5

なぜそれらのリンクを直接ターゲットにしないのですか内容に画像が含まれている画像の代わりに画像にリンクしていますか？ 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();