Wie verwende ich colorbox, um versteckte Divs auf meiner Seite ohne Hardcoding anzuzeigen?

Question

Ich verwende Colorbox, um den HTML-Inhalt von versteckten divs auf meiner Seite anzuzeigen. Ich kann erhalten diese perfekt mit dem folgenden arbeiten:

$("a.colorbox").colorbox({width:"600px", inline:true, href:"#344"}); 

Dies wird die div mit der ID 344.

jedoch zeigen, weil ich versuche, eine skalierbare und dynamische Seite mit Wordpress zu bauen, Ich möchte in der Lage sein, die ID meiner divs über eine Funktion zu erhalten, anstatt sie im jquery-Aufruf hart zu codieren.

modifizierte I Jack Moore Beispiel:

$("a[rel='example']").colorbox({title: function(){ 
    var url = $(this).attr('href'); 
    return '<a href="'+url+'" target="_blank">Open In New Window</a>'; 
}}); 

, so dass es wie folgt aussieht:

$(".colorbox").colorbox({width:"600px", inline:true, href:function(){ 
    var elementID = $(this).attr('id'); 
    return elementID; 
}}); 

Das Problem dabei ist, dass die href-Eigenschaft der colorbox Funktion für eine Zeichenfolge sucht mit ein # Zeichen vor der ID. Ich habe verschiedene Möglichkeiten versucht, das # an den Anfang der Funktion zu verketten, einschließlich des # im Rückgabewert und der Verkettung des # mit der elementID-Variablen. Kein Glück.

Ich habe auch versucht, die Syntax in Jacks am Beispiel (ohne Glück), so dass meine Rückkehr Aussage sah wie folgt aus:

return "#'+elementID+'"; 

Ich glaube, meine grundlegende Frage ist: Wie verwende ich colorbox versteckte divs zu zeigen, auf meiner Seite ohne Hardcoding alles?

Danke für Ihre Hilfe, Jiert

Answer 1

return "#" + elementID; 

die gewünschte Wirkung haben, wie David sagt.

Answer 2

Ich bin mit dem gleichen Problem konfrontiert. Wie sieht dein HTML aus? Bedeutung haben, wie Sie Ihre "divs" -Struktur hat

-Mine sieht wie folgt aus: Javascript:

<script> 
    $(document).ready(function() { 
    $("a.colorbox").colorbox({ width: "50%", inline: true, href: function() { 
      var elementID = $(this).attr('id'); 
      return "#" + elementID; 
     } 
     }); 
    }); 
</script> 

Und die html sieht aus wie (ich die Anzeige versucht Wechsel: keine):

<a class='colorbox' href="#">Inline HTML</a> 
    <div style="display:none"> 
     <div id="pop"> 
      This data is to be displayed in colorbox 
     </div> 
    </div> 

Answer 3

Ich mochte keine der oben gegebenen Antworten. So habe ich es gemacht (ähnlich, aber nicht ganz gleich). ich es auch voll für Menschen kommentiert ein bisschen neu zu Javascript und dem colorbox Stecker in

$(document).ready(function() { //waits until the DOM has finished loading 
    if ($('a.lightboxTrigger').length){ //checks to see if there is a lightbox trigger on the page 
     $('a.lightboxTrigger').each(function(){ //for every lightbox trigger on the page... 
      var url = $(this).attr("href"); // sets the link url as the target div of the lightbox 
      $(url).hide(); //hides the lightbox content div 
      $(this).colorbox({ 
       inline:true, // so it knows that it's looking for an internal href 
       href:url, // tells it which content to show 
       width:"70%", 
       onOpen:function(){ //triggers a callback when the lightbox opens 
        $(url).show(); //when the lightbox opens, show the content div 
       }, 
       onCleanup:function(){ 
        $(url).hide(); //hides the content div when the lightbox closes 
       } 
      }).attr("href","javascript:void(0)"); //swaps the href out with a javascript:void(0) after it's saved the href to the url variable to stop the browser doing anything with the link other than launching the lightbox when clicked 
       //you could also use "return false" for the same effect but I proffered that way 
     }) 
    } 
}); 

Und dies ist der html.

<a class="lightboxTrigger" href="#lightboxContent">Lightbox trigger</a> 
<div id="lightboxContent" class="lightboxContent"> <!-- the class is just to make it easier to style with css if you have multiple lightboxes on the same page --> 
    <p>Lightbox content goes here</p> 
</div> 

ich denke, es mit mehreren Leuchtkästen auf der einen funktionieren würde Seite, aber ich habe es nicht getestet.

Answer 4

Dies ist die Art und Weise habe ich es

HTML zu arbeiten: (aus dem Beispiel genommen in eine der Antworten)

<a class="lightboxTrigger" href="#lightboxContent">Lightbox trigger</a> 
<div id="lightboxContent" class="lightboxContent"> <!-- the class is just to make it easier to style with css if you have multiple lightboxes on the same page --> 
    <p>Lightbox content goes here</p> 
</div> 

Javascript:

$('a.lightboxTrigger').click(function(){ 
    var ref = $(this).attr("href"); 
    $.colorbox({ html: $(ref).html() }); 
    $.colorbox.resize(); 
});