Magnific-Popup
Magnific-Popup copied to clipboard
Partial image loading issue with gallery
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.