¿Cómo uso colorbox para mostrar divs ocultos en mi página sin hardcoding?

Question

Estoy usando Colorbox para mostrar el contenido html de divs ocultos en mi página. Puedo conseguir que esto funcione a la perfección con lo siguiente:

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

Esto mostrará el div con el ID de 344.

Sin embargo, debido a que estoy tratando de construir una página escalable y dinámica con WordPress, Quiero poder obtener la ID de mis divs a través de una función, en lugar de codificarlos en la llamada jquery.

he modificado el ejemplo de Jack Moore:

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

para que se vea así:

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

El problema con esto es que la propiedad href de la función colorbox está buscando una cadena con una marca # delante de la ID. Intenté varias formas de concatenar el # al frente de la función, incluido el # en el valor de retorno, y concatenar el # a la variable elementID. Sin suerte.

También he intentado usar la sintaxis en el ejemplo de Jack (sin suerte) para que mi instrucción de retorno era la siguiente:

return "#'+elementID+'"; 

Creo que mi pregunta básica es: ¿Cómo uso colorbox para mostrar divs ocultos en mi página sin hardcoding todo?

Gracias por su ayuda, Jiert

Answer 1

return "#" + elementID; 

tendrán el efecto deseado, como dice David.

Answer 2

Estoy enfrentando el mismo problema. ¿Cómo es tu html? significado, ¿cómo estructurar sus "divs"

mina se parece a esto: Javascript:

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

Y el HTML se parece a (He intentado cambiar el 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

Realmente no me gustó ninguna de las respuestas dadas anteriormente. Así es como lo hice (similar pero no exactamente igual). también les comentaba plenamente a las personas un poco nuevo Javascript y el enchufe colorbox en

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

y este es el 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> 

Creo que sería trabajar con múltiples cajas luminosas, por una página pero no lo he probado con eso.

Answer 4

Esta es la manera que tengo para trabajar

HTML: (tomado del ejemplo, en una de las respuestas)

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