Sådan zoomes billeder som Medium
Blogging platformen bruger en a brugerdefineret billedzoom effekt på deres blogsider. Når brugeren klikker på et billede, zoomes det automatisk til en større størrelse.
Det er en stor effekt og helt sikkert unik for Medium, men det var aldrig noget, der let kunne kopieres.
Nu med MediumLightbox script, det er nemmere end nogensinde. Dette JS script er let og nemt at tilføje til enhver hjemmeside eller blog.
Hvis du vil se, hvordan dette virker, kan du besøge live demo side hostet af skaberen Davide Calignano.
Han spiste et stykke tid og spikede den nøjagtige overgang og brugerdefinerede animationseffekt til lav et spejlbillede af Mediums billedzoom. Hele biblioteket er skrevet i ren JavaScript, så det er ikke afhængigt af nogen 3rd party scripts som jQuery.
Du bliver nødt til at kende lidt JS for at sætte det op, men du behøver helt sikkert ikke være ekspert.
Hvert billede kan tage data- * attributter til indstilling af højde og bredde i fuld størrelse, som alle er trak dynamisk fra lightbox-plugin'et. Opsætningskoden er meget enkel, og den kan målrette billederne selv, eller beholdere som
Her er den enkle kodestykke, du skal få plugin'en til at køre:
MediumLightbox ( 'figure.zoom-effekt');
Inde i funktionen vil du send en vælger for alle elementer (f.eks. .zoom-effekt klasse. Denne klasse er specifikt defineret i MediumLightbox stylesheet, så det er bedst at bruge dette på din side også.
Og når det er oprettet, er du helt klar!
I dit sideindholdsområde kan du pakke alle billeder ind i en
For at downloade en kopi af dette script og komme i gang, skal du bare besøge det vigtigste GitHub repo. Her finder du også dokumentation sammen med kodestykker Du kan kopiere for hurtigt at komme i gang.
