Come utilizzare colorbox per mostrare le immersioni nascoste sulla mia pagina senza hardcoding?

Question

Uso Colorbox per mostrare il contenuto html delle immersioni nascoste sulla mia pagina. Posso ottenere questo per funzionare perfettamente con la seguente:

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

questo mostrerà il div con l'ID di 344.

Tuttavia, perché sto cercando di costruire una pagina scalabile e dinamico con WordPress, Voglio essere in grado di catturare l'ID dei miei div attraverso una funzione, piuttosto che codificarli con il codice jquery.

Ho modificato l'esempio di Jack Moore:

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

in modo che assomiglia a questo:

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

Il problema di questo è che la proprietà href della funzione colorbox è alla ricerca di una stringa con un segno # davanti all'ID. Ho provato vari modi di concatenare il # alla parte anteriore della funzione, incluso il # nel valore di ritorno e concatenando il # alla variabile elementID. Senza fortuna.

Ho anche provato ad utilizzare la sintassi nell'esempio di Jack (senza fortuna) in modo che la mia dichiarazione di ritorno si presentava così:

return "#'+elementID+'"; 

Credo che la mia domanda fondamentale è: come faccio ad usare colorbox mostrare div nascosti sulla mia pagina senza hardcoding tutto?

Grazie per il vostro aiuto, Jiert

Answer 1

return "#" + elementID; 

avranno l'effetto desiderato, come dice David.

Answer 2

Sto affrontando lo stesso problema. Che aspetto ha il tuo html? significato, come hai fatto a strutturare i vostri "div"

miniera di simile a questo: Javascript:

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

E l'html sembra (Ho provato a cambiare il display: none):

<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

Non mi è piaciuta nessuna delle risposte sopra riportate. È così che l'ho fatto (simile ma non proprio uguale). Ho inoltre completamente commentato per la gente un po 'nuovi a JavaScript e la spina colorbox 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 
     }) 
    } 
}); 

e questo è il codice 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> 

penso che sarebbe lavorare con più lightbox, da un pagina ma non l'ho provato con quello.

Answer 4

Questo è il modo in cui ho preso a lavorare

HTML: (tratto da l'esempio in una delle risposte)

<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(); 
});