Wie mache ich fancybox href dynamisch?

Ich habe folgendes fancybox Code:Wie mache ich fancybox href dynamisch?

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

//some other callbacks etc

das Problem ist, ich auf der Seite zwanzig verschiedenen A-Tag-IDs haben, und ich möchte, dass die fancybox href Attribut die ID des angeklickten Element nehmen, das heißt die eine, die ausgelöst das Ereignis.

Ich habe mehrere Dinge ausprobiert, keiner von ihnen hat funktioniert!

Dies scheint so einfach, aber jedes Mal, wenn ich "dieses" oder ähnliches anschließe funktioniert nichts.

Quelle

2012-07-23 absentx

Was ist der Unterschied zwischen der Verwendung des Attributs 'id' und des Attributs 'href'? ... lassen Sie HTML tun, was es besser macht (ohne jQuery übermäßig zu verwenden) Sie können 20 verschiedene IDs in Ihren '' Tags haben, aber alle von ihnen können die gleiche 'Klasse =" Fancybox "' teilen, so dass Ihr Skript oben nahtlos funktioniert und ohne die Dinge zu komplizieren. – JFK

Nach meinem vorherigen Kommentar, entfernen Sie einfach die 'href' API-Option und fancybox wird es aus dem' href' Attribut im '' Tag entfernen. – JFK

meine hrefs sind zwar nicht standard, der client will nicht zwanzig verschiedene links auf der seite, also verwende ich hrefs mit "#" in ihnen und irgendwann im code brauche ich das JS um es an die echte href zu senden, die ich war Speichern in ID. Offen für Vorschläge! – absentx

Ohne each() oder click() einfach den beforeLoad Rückruf zu Ihrem Skript hinzufügen, wie diese

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

HINWEIS: Das ist für fancybox v2.0.6 +

Auf der anderen Seite, eine elegante Lösung zu verwenden ist (HTML5) data-* Attribute setzen die href (es wäre seltsam aussehen id="images/01.jpg" anders eingestellt), so dass Sie tun können:

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

und Ihren Rückruf

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

und verwenden Sie das id Attribut für das, was gemeint ist.

EDIT: Am besten ist es, das besondere data-fancybox-href Attribut in Ihrem Anker zu verwenden wie:

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

und verwendet ein einfaches Skript, ohne Rückruf wie

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

Siehe JSFIDDLE

Quelle

2012-07-23 19:43:51 JFK

ahh perfekt ... Ich hatte ein paar Dinge im Vorab-Callback versucht, aber ich muss nur ein bisschen weg gewesen sein. Danke nochmal, das hat perfekt geklappt, du hast mir geholfen, eine Menge von diesem fancybox Zeug zu bekommen! – absentx

Danke dafür. Ich musste meiner URL eine Ajax-Flagge anhängen, damit ich eine chromfreie modale Vorlage anbieten konnte, während die URL für Crawler, Screenreader und _open in new window_ clicks intakt blieb. – murraybiscuit

Versuchen Sie, diese

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

Quelle

2012-07-23 18:24:41 epascarello

Sie können über Ihre Sammlung von .fancybox Artikel iterieren und die ID greifen.

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

Quelle

2012-07-23 18:27:03

Haben Sie das versucht?

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

Quelle

2012-07-23 18:27:21 Engineer

Try this:

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

Quelle

2012-07-23 19:00:24 RAMe0

Antwort

Verwandte Themen