Как сделать fancybox href динамическим?

у меня есть следующий код fancybox:

$('.fancybox').fancybox({
             'autoScale' : false,
             'href' : $('.fancybox').attr('id'),
             'type':'iframe',
             'padding' : 0,
             'closeClick'  : false,

//some other callbacks etc

проблема в том, что у меня есть двадцать разных идентификаторов тегов на странице, и я хочу, чтобы атрибут fancybox href принимал идентификатор щелкнутого элемента, то есть тот, который вызвал событие.

Я пробовал несколько вещей, ни одна из них не работала!

'href' : $(this).attr('id'),
'href' : $(this.element).attr('id'),

Это кажется таким простым, но в любое время я подключаю " это " или подобное ничего не работает.

6
fancybox fancybox-2 javascript jquery

5 ответов

без each() или click() просто добавить beforeLoad обратный вызов вашего скрипта, как это

$(".fancybox").fancybox({
    autoScale: false,
    // href : $('.fancybox').attr('id'), // don't need this
    type: 'iframe',
    padding: 0,
    closeClick: false,
    // other options
    beforeLoad: function () {
        var url = $(this.element).attr("id");
        this.href = url
    }
}); // fancybox

Примечание: это для fancybox v2.0.6+

С другой стороны, более элегантных решение использовать (HTML5)data-* атрибут для установки href (было бы странно установить id="images/01.jpg" в противном случае), так что вы могли бы сделать:

<a href="#" id="id01" data-href="images/01.jpg" ...

и ваш обратный вызов

beforeLoad: function(){
 var url= $(this.element).data("href");
 this.href = url
}

и с помощью для для чего он предназначен.

редактировать : лучше всего использовать специальный data-fancybox-href атрибут в вашем якоре, как:

<a id="item01" data-fancybox-href="http://jsfiddle.net" class="fancybox" rel="gallery"  href="javascript:;">jsfiddle</a>

и использовать простой скрипт без обратного вызова как

$(".fancybox").fancybox({
    // API options 
    autoScale: false,
    type: 'iframe',
    padding: 0,
    closeClick: false
});

посмотреть JSFIDDLE

30

вы можете перебирать свою коллекцию .fancybox элементы и захватить идентификатор.

$('.fancybox').each(function(){
    $(this).fancybox({
             'autoScale' : false,
             'href' : $(this).attr('id'),
             'type':'iframe',
             'padding' : 0,
             'closeClick'  : false,
             //some other callbacks etc
    });
});
4

попробуйте это:

$(".fancybox").click(function(){
    var url = $(this).attr('id');
    $.fancybox({
         'autoScale' : false,
         'href' : url ,
         'type':'iframe',
         'padding' : 0,
         'closeClick'  : false,
         //some other callbacks etc
    });
})
3

попробуй такое

$('.fancybox').each( function() {
    var elem = jQuery(this);
    elem.fancybox({
             'autoScale' : false,
             'href' : elem.attr('id'),
             'type':'iframe',
             'padding' : 0,
             'closeClick'  : false,
          });
    }
);
1

вы пробовали это?

$('.fancybox').each(function(){
    $(this).fancybox({
         'autoScale' : false,
         'href' : this.id,
         'type':'iframe',
         'padding' : 0,
         'closeClick'  : false,
          //some other callbacks etc
    });
});
1