Afbeeldingen zoomen als medium
Het blogplatform Medium gebruikt een aangepast beeldzoomeffect op hun blogpagina's. Wanneer de gebruiker op een afbeelding klikt, zoomt deze automatisch uit naar een groter formaat.
Het is een geweldig effect en zeker uniek voor Medium, maar het was nooit iets dat gemakkelijk kon worden gekopieerd.
Nu, met de MediumLightbox script, het is eenvoudiger dan ooit. Dit JS-script is licht van gewicht en eenvoudig toe te voegen aan elke website of blog.
Als u wilt zien hoe dit werkt, kunt u de live demo pagina gehost door de maker Davide Calignano.
Hij spendeerde een tijdje aan het vastleggen van het exacte overgangs- en aangepaste animatie-effect maak een spiegelbeeld van de beeldzoom van Medium. De hele bibliotheek is geschreven in pure JavaScript, dus het vertrouwt niet op een 3rd partyscripts zoals jQuery.
U moet een kleine JS kennen om het in te stellen, maar u hoeft zeker geen expert te zijn.
Elke afbeelding kan duren data- * attributen voor het instellen van de volledige hoogte en breedte, die allemaal zijn dynamisch getrokken van de lightbox-plug-in. De setup-code is heel eenvoudig en het kan richt de afbeeldingen zelf, of containers zoals de
Hier is het enkele codefragment dat u nodig hebt om de plug-in te laten werken:
MediumLightbox ( 'figure.zoom-effect');
Binnen de functie zul je een selector doorgeven voor alle elementen (bijv. .zoom-effect klasse. Deze klasse is specifiek gedefinieerd in de MediumLightbox-stylesheet, dus het is het beste om dit ook op uw pagina te gebruiken.
En als dat eenmaal is ingesteld, ben je helemaal klaar!
In het gebied met pagina-inhoud kunt u alle afbeeldingen omzetten in een
Ga naar de hoofdrepos van GitHub om een kopie van dit script te downloaden en aan de slag te gaan. Hier zul je ook vinden documentatie samen met codefragmenten je kunt kopiëren om snel in te stellen.
