Så här zoomar du på bilder som Medium
Bloggplattformen Medium använder a anpassad bildzoomseffekt på deras blogg sidor. När användaren klickar på en bild zoomar den automatiskt in i en större storlek.
Det är en bra effekt och verkligen unik för Medium, men det var aldrig någonting som lätt kunde kopieras.
Nu med MediumLightbox script, det är lättare än någonsin. Detta JS-skript är lätt och enkelt att lägga till på någon webbplats eller blogg.
Om du vill se hur det fungerar kan du besöka live demo sida värd av skaparen Davide Calignano.
Han spenderade ett tag och spikade ner den exakta övergången och anpassade animeringseffekten till skapa en spegelbild av Mediums bildzoom. Hela biblioteket är skrivet i ren JavaScript, så det är inte beroende av någon 3rd party skript som jQuery.
Du måste veta lite JS för att ställa upp det men du behöver verkligen inte vara expert.
Varje bild kan ta data- * attribut för inställning av full storlek höjd och bredd, som alla är dras dynamiskt från lightbox-plugin. Inställningskoden är mycket enkel och det kan rikta bilderna själva, eller behållare som
Här är det enkla kodavsnittet du behöver för att pluggen ska köras:
MediumLightbox ( 'figure.zoom-effekt');
Inuti funktionen kommer du passera en väljare för alla element (t.ex.. .zoom-effekt klass. Den här klassen är specifikt definierad i MediumLightbox-stilarket så är det bäst att använda det här på din sida också.
Och när det är upprättat är du helt upptagen!
I ditt sidinnehållsområde kan du lägga alla bilder i en
För att ladda ner en kopia av det här skriptet och komma igång, besök bara GitHub repo. Här hittar du också dokumentation tillsammans med kodutdrag Du kan kopiera för att snabbt bli igång.
