{"library":"medium-zoom","title":"Medium Zoom","description":"Medium Zoom is a lightweight, responsive JavaScript library designed to replicate the elegant image zooming experience found on the Medium platform. Currently stable at version 1.1.0, the package sees active development with regular patch releases addressing bugs and minor enhancements, building upon its significant 1.0.0 refactor. Key differentiators include its high performance (aiming for 60fps), support for high-definition image loading on zoom, extensive customization options for margin, background, and scroll offset, and a pluggable architecture allowing for custom features and templates. It is framework-agnostic, working seamlessly across React, Vue, Angular, Svelte, and Solid, and offers comprehensive event handling for various zoom states. The library focuses on providing a smooth, intuitive user experience that is friendly to mouse, keyboard, and touch gestures.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install medium-zoom"],"cli":null},"imports":["import mediumZoom from 'medium-zoom';","import type { Zoom, Options } from 'medium-zoom';","import 'medium-zoom/dist/medium-zoom.css';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import mediumZoom from 'medium-zoom';\nimport 'medium-zoom/dist/medium-zoom.css';\n\ndocument.addEventListener('DOMContentLoaded', () => {\n  // Initialize mediumZoom on all images with the class 'zoomable-image'\n  const zoom = mediumZoom('.zoomable-image', {\n    margin: 24, // Space between the image and the edge of the viewport\n    background: 'rgba(0, 0, 0, 0.8)', // Dark overlay background\n    scrollOffset: 40 // Scroll offset to close the zoom\n  });\n\n  // Attach additional images or selectors dynamically\n  zoom.attach('#another-zoomable-image');\n\n  // Listen for events: 'open', 'opened', 'close', 'closed'\n  zoom.on('open', (event) => {\n    console.log('Zoom effect starting for:', event.target);\n    // You can update options after the zoom is opened\n    zoom.update({ background: 'rgba(25, 18, 25, 0.95)' });\n  });\n\n  zoom.on('closed', () => {\n    console.log('Zoom effect finished closing.');\n  });\n\n  // Example of programmatic open (returns a Promise since v1.0.0)\n  // document.getElementById('open-btn')?.addEventListener('click', async () => {\n  //   await zoom.open(document.querySelector('.zoomable-image'));\n  //   console.log('Programmatic zoom opened.');\n  // });\n});\n\n// To make this code runnable, ensure your HTML contains:\n// <img class=\"zoomable-image\" src=\"https://picsum.photos/id/1018/400/300\" alt=\"Forest road\" />\n// <img id=\"another-zoomable-image\" src=\"https://picsum.photos/id/1025/400/300\" alt=\"Pug dog\" />","lang":"typescript","description":"This code initializes `mediumZoom` on elements matching a CSS selector, demonstrates attaching additional elements, sets custom options, and logs events during the zoom lifecycle. It also includes the necessary CSS import.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}