Jquery ColorBox: Display inline content with next and previous button

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(functi开发者_如何学编程on(){
   var divtoload=$(this).attr("cbx");
   var cbxgroup=$(this).attr("rel");
   $(this).colorbox({rel:cbxgroup, width:"70%", maxWidth:"720px", inline:true, href:"#"+divtoload});
})

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>      

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

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>