Colorbox Opens Twice/Multiplication

I have a problem using colorbox. I want to open attachment page in WP via colorbox. The page has several image with different size(landscape & portrait), so colorbox’s width and height have to be flexible. Using default dataType is working, but when I clicked the image for the second times, it seems that the last colorbox wasn’t close properly. As a result it has two colorbox running. The colorbox do a multiplication each time I click the image. Any idea how to solve this problem? Thank you.

<script>
  $(document).ready(function(){
    $('.lightbox').colorbox();
  });
</script>


<div class='image-wrap'>
  <dl class='gallery-item'>
    <dt class='gallery-icon'>
      <a class="lightbox" href='http://localhost/Maize/?attachment_id=122' title='8'>
        <img width="250" height="190" src="http://localhost/Maize/wp-content/uploads/2013/04/8-250x190.jpg" class="attachment-thumbnail" alt="8" />
      </a>
    </dt>
  </dl>
  <dl class='gallery-item'>
    <dt class='gallery-icon'>
       <a class="lightbox" href='http://localhost/Maize/home/home-page/attachment/7/' title='7'>
         <img width="250" height="190" src="http://localhost/Maize/wp-content/uploads/2013/04/7-250x190.jpg" class="attachment-thumbnail" alt="7" />
       </a>
    </dt>
  </dl>
</div>

Related posts

Leave a Reply

1 comment

  1. Before you open the new colorbox, are you closing the previous one? If not, you might try calling $.colorbox.close(); when you want the first lightbox to close.