3

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 rel attribute with the next and previous button.

So far, my code is somewhat working. But it seems that all the element having the same rel attribute are not recognized. In fact, they only appear if I click the next and previous button beforehand.

Here is my HTML

<div id="galcontainer">
<div class="element">
    <a href="link.php" rel="Catalogue" cbx="Catalogue1" class="cbx">
        <img src="image.jpg" />
    </a>
    <div style="display:none">
        <div id="Catalogue1">
            Content Goes Here
        </div>
    </div>
</div>

<div class="element">
    <a href="link.php" rel="Catalogue" cbx="Catalogue27" class="cbx">
        <img src="image.jpg" />
    </a>
    <div style="display:none">
        <div id="Catalogue27">
            Content Goes Here
        </div>
    </div>
</div>
...
</div>

And here is the Jquery code:

$("a.cbx").click(function(){
   var divtoload=$(this).attr("cbx");
   var cbxgroup=$(this).attr("rel");
   $(this).colorbox({rel:cbxgroup, width:"70%", maxWidth:"720px", inline:true, href:"#"+divtoload});
})
1
  • Not sure if I understand what you are asking. You said ".. also have the next and previous button appear". Does that mean your problem is NOT having the next and previous buttons appear? But in your next sentence, you say "... in fact they only appear if I click the next and previous button beforehand"...
    – ericbae
    Oct 29, 2011 at 0:09

3 Answers 3

9

I was working on a similar problem. I basically simplified everything and got this working.

Javascript

<script type="text/javascript">
  $(document).ready(function() {
    $(".group1").colorbox({rel:'group1', inline:true, href:$(this).attr('href')});
  }); 
</script>

Content

<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>      
1
  • This was the exact thing I was trying to do, thanks for this!
    – MetalFrog
    Sep 21, 2012 at 12:26
1

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.

If I edit your code like this

<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) {
    q(this).attr("href","#box"+index);
});
$('.boxes div').each(function(index) {
    q(this).attr("id","#box"+index);
});

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

1

I know this is an old question. But found a different solution. The developer of the plugin recommend it: https://github.com/jackmoore/colorbox/issues/600

<a href='#' id='open'>Open inline group</a>
<div style='display:none'>
    <div class='inline'>
        <div style='padding:10px; background:#fff;'>
            <p><strong>This content comes from a hidden element on this page.</strong></p>
        </div>
    </div>
    <div class='inline'>
        <div style='padding:10px; background:#fff;'>
            <p><strong>2. This content comes from a hidden element on this page.</strong></p>
        </div>
    </div>
    <div class='inline'>
        <div style='padding:10px; background:#fff;'>
            <p><strong>3. This content comes from a hidden element on this page.</strong></p>
        </div>
    </div>
    <div class='inline'>
        <div style='padding:10px; background:#fff;'>
            <p><strong>4. This content comes from a hidden element on this page.</strong></p>
        </div>
    </div>
</div>
<script>
      var $group = $('.inline').colorbox({inline:true, rel:'inline', href: function(){
            return $(this).children();
      }});
      $('#open').on('click', function(e){
            e.preventDefault();
            $group.eq(0).click();
      });
</script>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.