Slik zoomer du på bilder som Medium
Bloggerplattformen Medium bruker a tilpasset bildezoom effekt på deres blogsider. Når brukeren klikker et bilde, vil det automatisk zoome inn i en større størrelse.
Det er en flott effekt og absolutt unik for Medium, men det var aldri noe som lett kunne kopieres.
Nå, med MediumLightbox script, det er enklere enn noensinne. Dette JS-skriptet er lett og enkelt å legge inn i hvilken som helst nettside eller blogg.
Hvis du vil se hvordan dette fungerer kan du besøke live demo side vert av skaperen Davide Calignano.
Han spiste en stund og nikket ned den nøyaktige overgangen og tilpassede animasjonseffekten til opprett et speilbilde av middels bildezoom. Hele biblioteket er skrevet i ren JavaScript, så det stole ikke på noen 3rd party skript som jQuery.
Du må vite litt JS for å sette opp det, men du trenger ikke å være ekspert.
Hvert bilde kan ta data- * attributter for å sette høyde og bredde i full størrelse, som alle er trakk dynamisk fra lightbox-plugin. Oppsettskoden er veldig enkel og det kan målrett bildene selv, eller beholdere som
Her er den enkle kodebiten du trenger for å få pluginet kjørt:
MediumLightbox ( 'figure.zoom-effekten');
Inne i funksjonen, vil du passere en velger for alle elementer (f.eks. .zoom-effekt klasse. Denne klassen er spesifikt definert i MediumLightbox-stilarket, så det er best å bruke dette på din side også.
Og når det er satt opp, er du helt klar!
I området for sidens innhold kan du pakke alle bilder inn i en
Hvis du vil laste ned en kopi av dette skriptet og komme i gang, kan du bare gå til hovedgitHub-repo. Her finner du også dokumentasjon sammen med kodestykker Du kan kopiere for å sette opp raskt.
