Create a gist now

Instantly share code, notes, and snippets.

@Dimls /Lightbox
Last active Mar 5, 2018

Embed
What would you like to do?
jQuery(function($){
MobileZoom = {
init: function(){
Reqs.pannZoom();
$('.product-image-img').on('click', function(){
var image_url = $(this).closest('.product-image').attr('data-bg-src') || $(this).closest('.product-image').attr('data-image');
MobileZoom.image(image_url);
});
},
image: function(url){
var modal = $('.mobile-zoom-overlay'),
modal_img = new Image();
modal_img.src = url;
modal.append(modal_img);
$(modal_img).load(function(){
var $img = $(this),
img_height = $img.height(),
img_position = (($(window).innerHeight() - img_height)/2);
$img.css('top', img_position);
modal.addClass('is-visible');
$img.addClass('fade-in');
$img.panzoom();
// var data = 'window: '+$(window).height()+', img: '+img_height+', pos: '+img_position;
// alert(data);
});
$('.js-MobileZoom-close').on('click', function(){
MobileZoom.hide(modal);
});
},
hide: function(modal){
modal.addClass('is-hiding');
setTimeout(function(){
modal.removeClass('is-hiding is-visible');
modal.find('img').panzoom('destroy').remove(); // kill zoom and remove <img>
}, 300);
}
}
MobileZoom.init();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment