francoischalifour/medium-zoom
Medium Zoom
medium-zoom एक JavaScript इमेज ज़ूम लाइब्रेरी और फ्रंटएंड UI कंपोनेंट है जो वेब ब्राउज़र में किसी चित्र पर क्लिक करने पर फुल-स्क्रीन इमेज एक्सपेंशन प्रभाव पैदा करता है। यह एक रिस्पॉन्सिव इमेज ओवरले के रूप में कार्य करता है जो एम्बेडेड मीडिया को हाई-डेफिनिशन ज़ूम किए गए व्यूज में बदल देता है।
यह लाइब्रेरी विशेष रूप से ज़ूम प्रभाव ट्रिगर होने पर हाई-डेफिनिशन वर्जन्स के लिए लो-रिज़ॉल्यूशन इमेज सोर्सेज को स्वैप करने का समर्थन करती है। यह बाहरी तत्वों को विस्तार ट्रिगर करने की अनुमति देती है और गतिशील रूप से प्रबंधित करने की क्षमता प्रदान करती है कि कौन सी इमेजेस या तत्वों के समूह ज़ूम करने योग्य हैं।
यूजर्स मार्जिन, बैकग्राउंड कलर्स और HTML टेम्पलेट्स के संशोधनों के माध्यम से ज़ूम ओवरले उपस्थिति को अनुकूलित कर सकते हैं। सिस्टम में कोड के माध्यम से व्यू को खोलने, बंद करने या टॉगल करने के लिए प्रोग्रामेटिक स्टेट प्रबंधन शामिल है, और एनीमेशन लाइफसाइकिल के दौरान कॉलबैक्स के लिए इवेंट लिसनर्स प्रदान करता है।
Features
- Expandable Images - Implements a click-to-expand UI pattern that allows users to view images in a larger, focused overlay.
- Image Zooming - Transforms an image into a larger, zoomed view using responsive layouts and CSS animations.
- Responsive Zoom Overlays - Implements a responsive visual layer that transforms images into high-definition zoomed views using CSS animations.
- Frontend UI Components - Provides a lightweight frontend component to enhance the viewing experience of embedded media through zooming.
- Overlay Transition Animations - Implements smooth visual animations for the entry and exit of the full-screen image overlay.
- Modal DOM Injection - Programmatically injects the modal container for the zoomed image directly into the document body.
- JavaScript Image Zoom Libraries - Provides a JavaScript library for creating a full-screen image expansion effect upon clicking a picture.
- High-Resolution Image Delivery - Delivers a higher-resolution image variant specifically when the zoom interaction is triggered.
- On-Demand High-Resolution Loading - Swaps low-resolution thumbnails for high-definition images specifically when a user triggers a zoom interaction.
- Dynamic Image Galleries - Provides an interactive viewing experience that adapts zoom effects and layout across different devices.
- Overlay Style Customization - Allows modification of the zoom overlay visual style including margins, background colors, and custom templates.
- External Zoom Triggers - Activates the image expansion effect when a linked external element is interacted with instead of the image itself.
- Attribute Source Swapping - Dynamically replaces image source attributes with high-resolution URLs when the zoom effect is activated.
- Customizable Image Overlays - Provides a tailored image expansion view with configurable margins, background colors, and animation behaviors.
