JSFiddle - React, Tailwind, and code Playground
HTML
<div class="image-box">
<img src="...
JavaScript
// (product.php) Enlarges image on click.
// dont run on touch screen device.
if (!("ontouchstart" in document.documentElement)) {
$('.image-box #1').show();
$(".image-box #1").click(function() {
// call image zoomer function.
$(function(){
$(".image-box img").each(function() {
$(this).image_zoomer();
})
});
$('.image-box #1').hide();
$('.image-box #2').show();
});
$(".image-box #2").click(function() {
// stop image zoomer function.
//NOT WORKING HERE.
$("img").image_zoomer("destroy");
if (!("ontouchstart" in document.documentElement)) {
$('.image-box #1').show();
}
$('.image-box #2').hide();
});
}
//----PLUG IN-----//
//Minimise this file after configuration.
$(window).ready(function(){
if (!("ontouchstart" in document.documentElement)) {
(function($) {
var zoom_context, zoom_canvas = "<canvas id='zoom_canvas' style='position: absolute; border: solid 3px #F4F4F4;'></canvas>";
var zoom_canvas_container_name = "#zoom_canvas_container", zoom_canvas_name = "#zoom_canvas", temp_image_canvas_context, remove_image_zoomer_timer;
$.fn.image_zoomer = function(options) {
if (typeof options == "string" && options == "destroy") {
this.data("is_destroyed", true);
return this;
} else {
// extend default options with passed ones
var options = $.extend({
height: 120,
width: 120,
scale: 1.4
}, options);
this.data("is_destroyed", false);
}
var image = this;
this.mouseenter(function(e) {
if ($(zoom_canvas_container_name).length == 0) {
$(this).wrap("<span id='zoom_canvas_container'></span>");
var zoom_canvas_container = $(zoom_canvas_container_name);
var temp_image_canvas = _insert_temp_canvas(zoom_canvas_container, image);
$(zoom_canvas_container).mousemove(function(e) {
...