title: Jquery ColorBox: Display inline content like a gallery
body: <p>I'm trying to use a Jquery Lightbox called ColorBox (http://colorpowered.com/colorbox/) but I'm running into some troubles.</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>This works:</p>
  
  <pre><code>&lt;p&gt;&lt;a class="group1" href="#box1"&gt;Grouped Photo 1&lt;/a&gt;&lt;/p&gt;
  &lt;p&gt;&lt;a class="group1" href="#box2"&gt;Grouped Photo 2&lt;/a&gt;&lt;/p&gt;
  &lt;p&gt;&lt;a class="group1" href="#box3"&gt;Grouped Photo 3&lt;/a&gt;&lt;/p&gt;
  
  &lt;div id="box1"&gt;
    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
  &lt;/div&gt;
  
  &lt;div id="box2"&gt;
    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        
  &lt;/div&gt;
  
  &lt;div id="box3"&gt;
    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                
  &lt;/div&gt;     
  </code></pre>
  
  <p>If I edit the above code like this it doesn't</p>
  
  <pre><code>&lt;div class="links"&gt;
   &lt;p&gt;&lt;a class="group1"&gt;Grouped Photo 1&lt;/a&gt;&lt;/p&gt;
   &lt;p&gt;&lt;a class="group1"&gt;Grouped Photo 2&lt;/a&gt;&lt;/p&gt;
   &lt;p&gt;&lt;a class="group1"&gt;Grouped Photo 3&lt;/a&gt;&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="boxes"&gt;
          &lt;div&gt;
            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
          &lt;/div&gt;
  
          &lt;div&gt;
            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        
          &lt;/div&gt;
  
          &lt;div&gt;
            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                
          &lt;/div&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <p>And javascript:</p>
  
  <pre><code>$('.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%"});
  </code></pre>
  
  <p>This goes through all the links and adds them the same id as the link has in href attribute</p>