Colorbox images show up small once after opened for video on same page, using jQuery

Question

I have a webpage where a couple of links are provided to view image gallery and (YouTube/Vimeo) video.

If the image gallery link is clicked and viewed before viewing the video popup, then it is all good and showing nice. But once after the video link clicked and viewed, and go back to open the image gallery again, then the colorbox for image view is opening in a short window.

Seems some window/size parameters need to be reset for image gallery?

Have any of you come across such issue?

<link href="css/gallery_colorbox.css" rel="stylesheet" type="text/css" />  
<script src="jquery-colorbox/jquery.colorbox-min.js" type="text/javascript"></script>  

<script>
//$.noConflict();
 jQuery(document).ready(function(){

    if(jQuery(window).width() < 800)
    {
        jQuery(".photo_gallery").colorbox({rel:'photo_gallery', maxWidth:"100%", maxHeight:"600px", current:"{current}/{total}"});
    } else { 
        jQuery(".photo_gallery").colorbox({rel:'photo_gallery', maxWidth:"800px", maxHeight:"600px", current:"{current}/{total}"});   
    }

    jQuery(".iframe").colorbox({iframe:true, fastIframe:false, width:"450px", height:"480px", transition:"fade", scrolling:false});
    jQuery(".youtube_video").colorbox({iframe:true, innerWidth:740, innerHeight:490, 
                                          onComplete : function() {   
                             jQuery('.cboxIframe').parent("#cboxLoadedContent").addClass('iframewrap');
                             jQuery('.cboxIframe').closest("#colorbox").addClass('coloriframebox');
                                           }  
                                      });

   });

</script>

The page is written in php and invokes the colorbox view by <div id="abc" class="youtube_video"> or <div id="xyz" class="photo_gallery"> or so.

Answer 1

My guess is that you need to remove the classes that you added when viewing the video. Colorbox reuses it's DOM elements between uses, so changes you make, such as adding classes, inline styles, adding/removing elements, etc. will persist. Use the onClosed callback to cleanup the changes you don't want to persist.

Try replacing this:

jQuery(".youtube_video").colorbox({
    iframe:true, 
    innerWidth:740, 
    innerHeight:490, 
    onComplete: function() {   
        jQuery('.cboxIframe').parent("#cboxLoadedContent").addClass('iframewrap');
        jQuery('.cboxIframe').closest("#colorbox").addClass('coloriframebox');
    }  
});

With this:

jQuery(".youtube_video").colorbox({
    iframe:true, 
    innerWidth:740, 
    innerHeight:490, 
    onComplete: function() {   
        jQuery("#cboxLoadedContent").addClass('iframewrap');
        jQuery("#colorbox").addClass('coloriframebox');
    },
    onClosed: function() {
        jQuery("#cboxLoadedContent").removeClass('iframewrap');
        jQuery("#colorbox").removeClass('coloriframebox');
    },
});