So, here’s the situation.  I have a bunch of images, and each image has a larger version and some rich text content to go with it, that needs to be opened in a modal window.  All the related content for each image sits within the page, so I need to use inline content.  I am also using Colorbox for the modal window.  I had a hellofva time finding an appropriate tutorial and example for this online.  A lot of people are trying to do similar things, but there’s either no solution or what they want isn’t close enough to what I’m trying to accomplish.  Every photo needs to have its own link AND still be in a prev/next slider once the modal opens.

After a lot of trial and error, I figured out how to do it.  So here goes:

THE HTML

For your links themselves:

  <a href="#preview1" class="preview">Preview 1</a>
  <a href="#preview2" class="preview">Preview 2</a>
  <a href="#preview2" class="preview">Preview 3</a>

For the inline content boxes:

<div style="display:none">
    <div id="preview1" rel="previewBox">
          <div>Awesome HTML Content</div>
    </div>
    <div id="preview2" rel="previewBox">
          <div>Awesome HTML Content</div>
    </div>
    <div id="preview2" rel="previewBox">
          <div>Awesome HTML Content</div>
    </div>
</div>

THE JAVASCRIPT

<script type="text/javascript">

  $(document).ready(function() {

    $(".preview").colorbox({
      open:false,
      inline:true,
      html: function() {
          var div = $(this).attr('href'); return $(div).html();
      },
      href: $(this).attr('href'),
      rel: 'previewBox'
    });

  });

</script>

Anyway, here’s hoping this saves someone some time! This was done successfully with Colorbox 1.3.17.2 and jQuery 1.4.1.

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *