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>
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.