Question

I am using ColorBox as a lightbox library. I want to use it to display hidden content for dynamic content generated with PHP.

I take this example on the website (that is the form I need, in “inline” content):

$(".example8").colorbox({width:"50%", inline:true, href:"#inline_example1"});

And the HTML:

<a class='example8' href="#">Inline HTML</a>

<div style="display:none">
<div id='inline_example1' style='padding:10px; background:#fff;'> 
    <p><strong>This content comes from a hidden element on this page.</strong></p>      
    <p><strong>If you try to open a new ColorBox while it is already open, it will update itself with the new content.</strong></p> 
    <p>Updating Content Example:<br /> 
    <a class="example5" href="../content/flash.html">Click here to load new content</a></p>   
</div>
</div>

But what I can’t add (I don’t see the logic in it) like 50 javascript definitions for content that is generated in PHP. My content is generated like this:

<div class="product" id="item-1">
    <h1><a href="javascript:;" class="product-description-load">Product name</a></h1>
    Price: 10€

    <div style="display:none">
        <div id="product-description-1">Hidden description for product 1</div>
    </div>
</div>

<div class="product" id="item-2">
    <h1><a href="javascript:;" class="product-description-load">Product name</a></h1>
    Price: 10€

    <div style="display:none">
        <div id="product-description-2">Hidden description for product 2</div>
    </div>
</div>

Anyone has suggestions on how I can do it with only one function for all the products?

Thank you in advance!!!

EDIT: what I don’t want to repeat 50 times is this:

$("#item-1").colorbox({width:"50%", inline:true, href:"#product-description-1"});

Because I don’t know how many items i’ll have.

Answer 1

Use the rel attribute of your anchor to create a reference to the inline content.

<div class="product" id="item-1">
    <h1><a href="javascript:;" rel="product-description-1" 
           class="product-description-load">Product name</a>
    </h1>
    Price: 10€

    <div style="display:none">
        <div class="product-description" id="product-description-1">
            Hidden description for product 1
        </div>
    </div>
</div>

Then bind colorbox based on class, not on id, and use a custom href function:

$(document).ready(function() {
    $(".product-description-load").colorbox({
        width:"50%",
        inline: true,
        href: function() {
            var $element = $.colorbox.element();
            return $('div#' + $element.attr('rel')).parent().html();
        }
    });
});

Working example at http://jsfiddle.net/ce7a4/12/