javascript - mostrar - ocultar div html5

¿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 hacer que esto funcione perfectamente con lo siguiente:

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

Esto mostrará el div con la ID de 344.

Sin embargo, como 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.

Modifiqué 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 traté de usar la sintaxis en el ejemplo de Jack (sin suerte) para que mi declaración de devolución se viera así:

return "#''+elementID+''";

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

Gracias por tu ayuda, Jiert

Answer 1

Esta es la forma en que lo hice funcionar

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

Answer 2

return "#" + elementID; 

tendrá el efecto deseado como dice David.

Answer 3

Estoy enfrentando el mismo problema. ¿Cómo es tu html? es decir, cómo estructuraste tus "divs"

El mío se ve así: 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 parece (intenté cambiar la pantalla: ninguno):

<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 4

Realmente no me gustó ninguna de las respuestas dadas anteriormente. Así es como lo hice (similar pero no exactamente igual). También lo comenté por completo para las personas un poco nuevas en Javascript y en el plugin colorbox.

$(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 funcionaría con varias cajas de luz en una página, pero no lo he probado con eso.