Group a collection of elements in Colorbox

Question

I'm using the colorbox plugin and I'm trying to group a collection of elements. I doing something simliar the basic grouped photos in the examples (click any of the grouped photos). Instead of using images, I'd like to use a html div.

The examples html/js looks something like this.

js

$("a[rel='example1']").colorbox();

html

<p><a href="ohoopee1.jpg" rel="example1">Grouped Photo 1</a></p>
<p><a href="ohoopee2.jpg" rel="example1">Grouped Photo 2</a></p>

Also, I'd like to trigger the Colorbox from a button being clicked. Here is what I have right now, it's kind of sloppy and I have a feeling there is a cleaner way to do this using some of the native Colorbox functionality.

To summarize, I'm just replacing the content of the colorbox manually with a click event.

js

//Login popup
$('.loginButton').bind("click", function(){
    $.fn.colorbox({
            inline: true, 
            href: "#login1",
            width: "420px"
            });
});
//forgot password           
$("#forgot").click(function(){
    $('cboxContentLoaded').html($("#login2").html());
});

html

<div style="display: none;">
    <div id="login1">
        <h2>Members Login <img src="images/logo_small.png" alt="100 Trade Jack" /></h2>
        <dl>            
            <dt>Email:</dt>
            <dd><input class="xmlLogin" type="text" size="20" name="username" /></dd>
            <dt>Password:</dt>
            <dd><input class="xmlLogin" type="password" size="20" name="password" /></dd>
        </dl>
        <input type="image" src="./images/button.login.jpg" width="104" height="55" class="subLogin" />
        <p id="forgot"><a href="#">Forgot Password?</a></p>
        <div id="errorMessage"></div>
    </div>
    <div id="login2">
        <p>Please Enter your Email Address and we will send you instructions on how to renew your password</p>
        <input type="text" id="resetPassEmail" />
        <input type="button" id="passRest" value="Reset Password" />
    </div>
</div>

It just seems like since there is a way to group images with the rel attribute, I should be able to group together html elements. Not really sure where to go at it though.

Any input/guidance is greatly appreciated. Thanks.

UPDATE:

The above technique I use doesn't really work. When you close the colorbox and try to reopen it the div which replaces #login1 is still there. (example - click the members login button)

Answer 1

I think Next-Previous functionality on group of photos not applicable to group of htmls.
I see your example. If you want to display content that available before close, on reopen colorbox then you need to do is:

Make <div id="cBoxHack" style="display: none"> and remove style="display: none" from div having id login1.

Also remove these three lines,

$("#login1").show();
$("#login2").hide();
$("#login3").hide();

from

$('.loginButton').bind("click", function(){...

this function.