Open portseif opened 1 year ago
Is there a way to bind the magnify value to an input range? I've tried the following, and it works, but I was wondering if there's a way to keep the magnified image open while the slider controls the magnify value:
input range html:
<label for="zoom-factor">Zoom:</label> <input type="range" id="zoom-factor" name="zoomFactor" min="0" max="10" value="1" step="0.1">
jquery Zoom code:
jQuery(document).ready(($) => { let zoomFactor = $('#zoom-factor'); let imgElement = $('.wp-image-7894'); zoomFactor.on('input', () => { console.log(zoomFactor.val()); doZoom(imgElement, zoomFactor.val()); }); doZoom(imgElement); function doZoom(img, zoomInt = 1) { if ($('#img-wrap .wp-image-7894').length) { console.log('it exists! no wrapper'); img.parent().trigger('zoom.destroy'); img .parent() .zoom({ //on: 'toggle', magnify: zoomInt, //url: '/wp-content/uploads/2023/03/IRE23_floorplan-10-1@2x-3.webp', }); } else { console.log('it does not exist! create wrapper'); img .wrap('<span id="img-wrap" style="display:inline-block"></span>') .css('display', 'block') .parent() .zoom({ on: 'toggle', magnify: zoomInt, url: '/wp-content/uploads/2023/03/IRE23_floorplan-10-1@2x-3.webp', }); } } });
Is there a way to bind the magnify value to an input range? I've tried the following, and it works, but I was wondering if there's a way to keep the magnified image open while the slider controls the magnify value:
input range html:
jquery Zoom code: