Jak sprawić, by fancybox href był dynamiczny?

Mam następujący kod fancybox:Jak sprawić, by fancybox href był dynamiczny?

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

//some other callbacks etc

problem jest mam dwadzieścia różnych tag identyfikatora na stronie i chcę atrybut href fancybox wziąć id elementu kliknięciu, czyli ten, który wywołał wydarzenie.

Próbowałem kilku rzeczy, żaden z nich nie zadziałał!

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

Wydaje się to takie proste, ale kiedy tylko podłączę "to" lub coś podobnego, nic nie działa.

Źródło

2012-07-23 absentx

Jaka jest różnica między używaniem atrybutu "id" i atrybutu "href"? ... pozwól html robić to, co robi lepiej (bez nadmiernego wykorzystania jQuery) możesz mieć 20 różnych identyfikatorów w tagach '', ale wszystkie z nich mogą współdzielić to samo 'class =" fancybox "', więc twój skrypt będzie działał bezproblemowo i bez zbytniego komplikowania rzeczy. – JFK

śledząc mój poprzedni komentarz, wystarczy usunąć opcję API 'href', a fancybox pobierze ją z atrybutu' href' w tagu ''. – JFK

Moje href są niestandardowe, klient nie chce dwudziestu różnych linków na stronie, więc używam href z "#" w nich i na pewnym etapie kodu potrzebuję JS, aby wysłać go do prawdziwego href, którym byłem przechowywanie w id. Otwórz na sugestie! – absentx

Bez each() lub click() wystarczy dodać beforeLoad oddzwanianie do skryptu jak ten

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

UWAGA: to jest dla fancybox v2.0.6 +

Z drugiej strony, bardziej eleganckie rozwiązanie jest użycie (HTML5) data-* atrybut ustawić href (to będzie wyglądać dziwnie ustawione id="images/01.jpg" inaczej), więc można zrobić:

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

i swoją zwrotnego

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

i użyj atrybutu id dla tego, co jest przeznaczone.

EDIT: Najlepiej jest użyć specjalnego atrybutu data-fancybox-href w kotwicy jak:

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

i użyć prostego skryptu bez zwrotnego jak

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

Zobacz JSFIDDLE

Źródło

2012-07-23 19:43:51 JFK

ahh perfect ... Próbowałem kilka rzeczy w callback przed ładowaniem, ale musiałem być nieco off. Jeszcze raz dziękuję to działało idealnie, pomógł mi przejść przez wiele tego fancybox rzeczy! – absentx

Dzięki za to. Musiałem dołączyć flagę ajax do mojego adresu URL, więc mogłem obsłużyć szablon modalny bez chromu, zachowując jednocześnie adres URL dla robotów indeksujących, czytników ekranu i otwierając nowe kliknięcia window_. – murraybiscuit

Spróbuj

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

Źródło

2012-07-23 18:24:41 epascarello

Można iteracyjne nad kolekcji .fancybox przedmiotów i chwycić id.

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

Źródło

2012-07-23 18:27:03

Czy próbowałeś tego?

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

Źródło

2012-07-23 18:27:21 Engineer

Spróbuj tego:

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

Źródło

2012-07-23 19:00:24 RAMe0

Jak sprawić, by fancybox href był dynamiczny?

Odpowiedz

Powiązane problemy