How do I use colorbox to show hidden divs on my page without hardcoding?

2 Views

I’m using Colorbox to show the html content of hidden divs on my page. I can get this to work perfectly with the following: 

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

This will show the div with the ID of 344.

Read More

However, because I’m trying to build a scalable and dynamic page with WordPress, I want to be able to grab the ID of my divs through a function, rather than hard code them in the jquery call.

I modified Jack Moore’s example: 

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

so that it looks like this: 

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

The problem with this is that the href property of the colorbox function is looking for a string with a # mark infront of the ID. I tried various ways of concatenating the # to the front of the function, including the # in the return value, and concatenating the # to the elementID variable. No luck.

I also tried using the syntax in Jack’s example (with no luck) so that my return statement looked like this: 

return "#'+elementID+'";

I think my basic question is: How do I use colorbox to show hidden divs on my page without hardcoding everything?

Thanks for your help,
Jiert

Post Views: 2

Related posts

Leave a Reply

4 comments

  1. I didn’t really like any of the answers given above. This is how I did it (similar but not quite the same).
    I also fully commented it for people a bit new to Javascript and the colorbox plug 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
        })
     }
});

    And this is the 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>

    I think it would work with multiple lightboxes on the one page but I haven’t tested it with that.

  2. I’m facing the same issue. What does your html look like? meaning, how did you structure your “divs”

    Mine looks like this:
    Javascript:

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

    And the html looks like (I tried changing the 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>

  4. This is the way I got it to work

    HTML: (taken from the example in one of the answers)

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