CODEWITHSUNDEEP
jqueryhtmlcssmagentocolorbox
Vicky Dev
Vicky Dev

Reputation: 2173

Colorbox popup not loading completely when opened for first time after pageload is complete

I have setup default Magento CE 1.9.3.0 with base theme here along with custom News section.

Now when I click on the "Read More" link, for first time when page is just loaded, of any news item of center news section, the popup (colorbox popup) opens with missing "next" button and "close" button.

I think it's due to height and width issue of popup, but can't figure out why this issue occurs.

When I close the popup and then open it the second time, it loads perfectly fine with all buttons.

Please check the source of page to get the idea of HTML,CSS & Javascript libraries loaded for this middle News section as I can't create a fiddle due to unknown reasons.

Below are the colorbox and owl-carousel scripts I am using.

<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 any suggestions ?

Upvotes: 4

Views: 1227

Answers (2)

Merschi
Merschi

Reputation: 56

It looks like your divs have fixed heights. Is it possible that some of the class-names were overridden by magento-styles?

Another idea is to try to extract the Javascript and DOM-Code and execute it individually. If it don't work then, it's a problem with the code.

Looks like this is exactly your problem: Colorbox doesn't open at proper height when first opened This also looks related: jquery colorbox looks wrong the first time opened and then fine after that

Upvotes: 2

jacefarm
jacefarm

Reputation: 7451

This is purely a CSS issue. The close, next, and previous buttons are present in the HTML mark-up, but they are sitting outside of the #cboxWrapper element's bounds. #cboxWrapper has overflow: hidden which is hiding anything outside of its visible area.

You'll need to expand your pop-up's visible boundaries by changing the CSS applied to #cboxWrapper, or, move the close, next, and previous buttons within boundaries of its visible area.

You could try setting a larger value for the width property in your colorbox call as well.

Upvotes: 3

Related Questions