dimsemenov / Magnific-Popup

Light and responsive lightbox script with focus on performance.
http://dimsemenov.com/plugins/magnific-popup/
MIT License
11.39k stars 3.48k forks source link

Partial image loading issue with gallery #1122

Open chithract opened 5 years ago

chithract commented 5 years ago

I'm facing an issue of displaying the partial loading of images when clicking next arrows. The code I've used is


 $('.screenshot_pic').magnificPopup({
             delegate: 'a',
             fixedContentPos: true,
             preloader: true,
             type: 'image',
             tLoading: '',
             mainClass: 'mfp-img-popup',
             gallery: {
                 enabled: true,
                 navigateByImgClick: true,
                 tPrev: 'Previous', // title for left button
                 tNext: 'Next',
                 preload: [1, 1] // Will preload 0 - before current, and 1 after the current image
             },
             callbacks: {
                 beforeOpen: function() {
                     startWindowScroll = $(window).scrollTop();
                 },
                 buildControls: function() {
                   // re-appends controls inside the main container
                   this.contentContainer.append(this.arrowLeft.add(this.arrowRight));
                 },
                 imageLoadComplete: function() {
                   var self = this;
                   setTimeout(function() {
                     self.wrap.addClass('mfp-image-loaded');
                   }, 16);
                 },
                 updateStatus: function(data) {
                     if(data.status == 'loading') {
                         this.wrap.removeClass('mfp-image-loaded');
                     }
                 },
                 close: function() {
                   this.wrap.removeClass('mfp-image-loaded');
                   $(window).scrollTop(startWindowScroll);
                 },
             },
             image: {
                 verticalFit: true,
                 tError: '',
                 titleSrc: function(item) {
                     return item.el.attr('data-title');
                 }
             }
});

I did this with the help of http://codepen.io/dimsemenov/pen/HdjtL

A similar issue exists in this example also - https://codepen.io/bluminethemes/pen/bpPvvb

Thanks in advance.