### Initialize and Manage Image Zoom Instance Source: https://github.com/malaman/js-image-zoom/blob/master/example/index.html This code initializes the ImageZoom library, manages its lifecycle (setup, kill, reset), and updates the UI based on the instance's status. It also includes utility functions for deep copying options. ```javascript var currentImage = 1; var defaultOptions = { width: 400, height: 250, zoomWidth: 500, img: "1.jpg", offset: {vertical: 0, horizontal: 10}, alt: 'Image' }; var options; resetOptions(); var container = document.getElementById('container'); var optionsHeader = document.getElementById('zoomOptions'); var killButton = document.getElementById('kill'); var setupButton = document.getElementById('setup'); var resetButton = document.getElementById('reset'); optionsHeader.innerHTML = 'Options: ' + JSON.stringify(options); window.imageZoom = new ImageZoom(container, options); function resetOptions() { options = JSON.parse(JSON.stringify(defaultOptions)); // widely supported deep copy } function updateButtonStatus() { if (window.imageZoom) { killButton.disabled = false; resetButton.disabled = false; setupButton.disabled = true; } else { killButton.disabled = true; resetButton.disabled = true; setupButton.disabled = false; } } function killImageZoom(imageZoom) { window[imageZoom].kill(); delete window[imageZoom]; updateButtonStatus(); } function setupImageZoom(imageZoom) { window[imageZoom] = new ImageZoom(container, options); updateButtonStatus(); } function resetImageZoom(imageZoom) { window[imageZoom].kill(); window[imageZoom] = new ImageZoom(container, options); } ``` -------------------------------- ### Install js-image-zoom with npm Source: https://github.com/malaman/js-image-zoom/blob/master/README.md This command installs the js-image-zoom package and saves it as a dependency in your project's package.json file. It's the standard way to add the library to your Node.js or front-end project. ```bash npm install js-image-zoom --save ``` -------------------------------- ### Basic Image Zoom Implementation in JavaScript Source: https://github.com/malaman/js-image-zoom/blob/master/README.md This snippet demonstrates the basic setup for js-image-zoom. It includes initializing the script via a CDN, setting up a container with an image, and then creating a new ImageZoom instance with specified options. It handles image sizing and zoom behavior. ```javascript Title
``` -------------------------------- ### Basic JavaScript Image Zoom Implementation Source: https://github.com/malaman/js-image-zoom/blob/master/package/README.md This JavaScript code demonstrates the basic usage of js-image-zoom. It initializes the zoom functionality on a specified container element with custom options for zoom dimensions and offsets. The script includes the library via a CDN link. ```javascript Title
``` -------------------------------- ### Update Zoom Scale and Image Source: https://github.com/malaman/js-image-zoom/blob/master/example/index.html These functions allow users to dynamically change the zoom scale and switch between different images. They update the options object, re-initialize the ImageZoom instance, and refresh the UI. ```javascript function changeScale() { var scale = document.querySelector('input[name = "Scale"]:checked').value; if (scale > 0) { options.scale = scale; } else { delete options.scale; } optionsHeader.innerHTML = 'Options: ' + JSON.stringify(options); killImageZoom('imageZoom'); window.imageZoom = new ImageZoom(container, options); updateButtonStatus(); } function changeImage(imageZoom) { currentImage = currentImage === 1 ? 2 : 1; options.img = currentImage + '.jpg'; resetImageZoom(imageZoom); } ``` -------------------------------- ### Update Zoom Position and Fill Container Source: https://github.com/malaman/js-image-zoom/blob/master/example/index.html This code handles changes to the zoom position (left, right, top, bottom, original) and the 'fill container' setting. It modifies the options and applies CSS classes as needed to adjust the image display. ```javascript function changeZoomPosition() { var zoomPosition = document.querySelector('input[name = "ZoomPosition"]:checked').value; if (zoomPosition !== 'default') { options.zoomPosition = zoomPosition; } else { delete options.zoomPosition; } optionsHeader.innerHTML = 'Options: ' + JSON.stringify(options); killImageZoom('imageZoom'); window.imageZoom = new ImageZoom(container, options); updateButtonStatus(); } function changeFillContainerSetting() { var fillContainer = document.querySelector('input[name="FillContainer"]').checked; if (fillContainer === true) { document.getElementById('container').classList.add('onehundredpercent'); delete options.width; delete options.height; delete options.zoomWidth; } else { document.getElementById('container').classList.remove('onehundredpercent'); resetOptions(); } optionsHeader.innerHTML = 'Options: ' + JSON.stringify(options); resetImageZoom('imageZoom'); } ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.