Colorbox popup does not load completely when it is opened for the first time after pageload is completed

Question

I installed Magento CE 1.9.3.0 by default with the base theme here along with a custom news section.

Now, when I click on the "Details" link, the first time the page has just been loaded, from any news section in the center news section a pop-up window (colorbox pop-up window) opens with the missing "next" button and the "close" button.

I think because of the height and width of the popup, but I can not understand why this problem occurs.

When I close the popup and then open it a second time, it is fully loaded with all the buttons.

Please check the source of the page to get an idea of ​​the HTML, CSS, and Javascript libraries loaded for this middle section of the news, as I cannot create the violin for unknown reasons.

The following are the scenarios colorboxand owl-carouselwhich I use.

<script type="text/javascript">
//<![CDATA[
var $cnjQ = jQuery.noConflict();
$cnjQ(document).ready(function() {
    var $cnOwl = $cnjQ("#center_news");
    $cnOwl.owlCarousel({
        autoPlay: 2500,
        slideSpeed: 1500,
        loop:false,
        autoWidth:true,
        pagination: false,
        navigation: true,
        <?php echo $putTS ?>
        items: 1,
        itemsDesktop: [1199,1],
        itemsDesktopSmall: [979,1],
        itemsTablet: [768,1],
        itemsMobile: [600,1]
    });
    $cnjQ('.news-owlgrid').children().find('a.cn-read-more').each(function() {
        $cnjQ(this).colorbox({
            inline: true,
            width: "50%",
            rel: "cn-read-more",
            onLoad: function() {    
                $cnOwl.trigger('autoplay.stop.owl');
            },
            onClosed: function() {
                $cnOwl.trigger('autoplay.play.owl',[2000]);
            }
        });
    });
});
//]]>
</script>

Anyone with suggestions?

Answer 1

This is purely a CSS issue. Buttons close, nextand previousare present in the HTML markup, but they sit outside the bounds of the element #cboxWrapper. #cboxWrapperhas overflow: hiddenthat hides anything outside the visible area.

, CSS, #cboxWrapper, close, next previous .

width colorbox.

Answer 2

, divs . , ?

- Javascript DOM- . , .

, : Colorbox : jQuery colorbox ,