Запустите fancybox на всех тегах привязки с изображением внутри

Question

У меня проблемы с запуском fancybox. Я хотел бы использовать fancybox на всех изображениях внутри блока #content. Все изображения имеют следующий код:

<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".

РЕДАКТИРОВАТЬ2: 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>

Спасибо за любые идеи.

Answer 1

$('a').has('img') должен вернуть все элементы a, в которых есть элементы img, поэтому очень странно, что он не работает. Как насчет этого:

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

Answer 2

Почему бы не нацелить эти ссылки непосредственно на изображения вместо тех, которые содержат изображения в своем содержании? Это, вероятно, то, что вам нужно, поскольку 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();

Answer 3

Это должно включить fancybox со всеми изображениями в разделе div с идентификатором контента.

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

Это должно включить fancybox для всех тегов с изображением внутри содержимого div.

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

Answer 4

Ну, наконец-то я заработал.Я просто добавил атрибут длины к вашим кодам благодаря 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 5

<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


});

попробуйте использовать это, чтобы получить привязку к якору