Tutorial :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(){      $.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)


Solution: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.


Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »