CODEWITHSUNDEEP
jquerycolorbox
user1412371
user1412371

Reputation: 31

Jquery ColorBox: Display inline content like a gallery

I'm trying to use a Jquery Lightbox called ColorBox (http://colorpowered.com/colorbox/) but I'm running into some troubles.

I want to use the lightbox to display inline content but also have the next and previous button appear. This way, like in a photo gallery, I would be able to navigate through all the item sharing the same id attribute with the next and previous button. If I hardcode it into the template it works, but if I automate it like pasted at end of post it doesn't.

I add a new element often, soo adding a new element to the begining would take longer than I want. So I automated this procedure and generated code looks exactly like yours(in your post), but colorbox doesn't work. Does anyone now how to fix it(if possible)? Help would be greatly appreciated.

This works:

<p><a class="group1" href="#box1">Grouped Photo 1</a></p>
<p><a class="group1" href="#box2">Grouped Photo 2</a></p>
<p><a class="group1" href="#box3">Grouped Photo 3</a></p>

<div id="box1">
  Some text in box 1 Some text in box 1
  Some text in box 1
  Some text in box 1
  Some text in box 1
  Some text in box 1
</div>

<div id="box2">
  Some text in box 2
  Some text in box 2
  Some text in box 2
  Some text in box 2
  Some text in box 2        
</div>

<div id="box3">
  Some text in box 3
  Some text in box 3
  Some text in box 3
  Some text in box 3
  Some text in box 3                
</div>

If I edit the above code like this it doesn't

<div class="links">
 <p><a class="group1">Grouped Photo 1</a></p>
 <p><a class="group1">Grouped Photo 2</a></p>
 <p><a class="group1">Grouped Photo 3</a></p>
</div>
<div class="boxes">
        <div>
          Some text in box 1 Some text in box 1
          Some text in box 1
          Some text in box 1
          Some text in box 1
          Some text in box 1
        </div>

        <div>
          Some text in box 2
          Some text in box 2
          Some text in box 2
          Some text in box 2
          Some text in box 2        
        </div>

        <div>
          Some text in box 3
          Some text in box 3
          Some text in box 3
          Some text in box 3
          Some text in box 3                
        </div> 
</div>

And javascript:

$('.links a').each(function(index) {
    $(this).attr("href","#box"+index);
});
$('.boxes div').each(function(index) {
    $(this).attr("id","#box"+index);
});
$(".group1").colorbox({rel:'group1', inline:true, href:$(this).attr('href'), width:"60%"});

This goes through all the links and adds them the same id as the link has in href attribute

Upvotes: 1

Views: 1727

Answers (3)

user1412371
user1412371

Reputation: 31

Nevermind, I found a stupid little mistake. 

$('.boxes div').each(function(index) {
     $(this).attr("id","#box"+index);
});

And fixed it:

$('.boxes div').each(function(index) {
    $(this).attr("id","box"+index);
});

Upvotes: 1

HaleFx
HaleFx

Reputation: 857

Colorbox adds the next and previous buttons to groups created through a shared rel attribute. All you have to do is add rel="group1" where you have class="group1" in the first code sample and the buttons should appear.

Upvotes: 0

CSSian
CSSian

Reputation: 1661

Colorbox sets up all its internal structures by looking at the DOM elements when you call it. This means that if you add the attributes after Colorbox's setup event, the plug-in won't see them.

Make sure to defer your calling of Colorbox until you've run the HREF and ID assignments and see if that changes the behavior to what you are after.

Upvotes: 0

Related Questions