EasyZoom
EasyZoom copied to clipboard
Active/Inactive with thumbnails
I'm trying to put a zoom button on my easyzoom container to toggle the zoom effect, it's work, but the navigation on thumbnails doesn't work after trigger button.
` var $easyzoom = $('.easyzoom').easyZoom( { 'loadingNotice':'Carregando', 'errorNotice':'Erro ao carregar' } ); var api1 = $easyzoom.filter('.easyzoom--with-thumbnails').data('easyZoom');
$('.thumbnails').on('click', 'a', function(e) {
var $this = $(this);
e.preventDefault();
api1.swap($this.data('standard'), $this.attr('href'));
});
$('#easyzoom-toggle').on('click', function() {
var $this = $(this);
if ($this.data("active") === true)
{
$this.html('<i class="fa fa-search-plus"></i>').data("active", false);
api1.teardown();
}
else
{
$this.html('<i class="fa fa-search-minus"></i>').data("active", true);
api1.teardown();
api1._init();
}
});
The thumbnail lose the reference after click on zoom, any idea ?
Sample: https://i.postimg.cc/1tB7drTd/screenshot-492.png
I fixed it, but I have another problem, when I active zoom by button, I need to trigger the event mouse move for 'invoke' the zoom after enabled it, but the component haven't any method for it, and the cursor stay above the zoom button, so I really don't have idea how fire it...