Cum să măriți imaginile ca Mediu
Platforma de bloguri Medium utilizează a efectul de mărire a imaginii personalizate pe paginile lor de blog. Ori de câte ori utilizatorul face clic pe o imagine, va mări automat o dimensiune mai mare.
Este un efect grozav și, cu siguranță, unic pentru Mediu, dar nu a fost niciodată ceva care ar putea fi ușor copiat.
Acum, cu MediumLightbox scenariu, este mai ușor decât oricând. Acest script JS este ușor și ușor de adăugat în orice site sau blog.
Dacă doriți să vedeți cum funcționează acest lucru, puteți vizita pagina demo live găzduit de creatorul Davide Calignano.
El a petrecut un timp înnegând în jos efectul de tranziție și animație exactă creați o imagine oglindă a zoom-ului imaginii Medium. Întreaga bibliotecă este scrise în JavaScript pur, așa că nu se bazează pe niciunul din 3rd cum ar fi jQuery.
Veți avea nevoie să cunoașteți un mic JS care să îl creeze, dar cu siguranță nu trebuie să fiți un expert.
Fiecare imagine poate dura date- * atribute pentru a seta înălțimea și lățimea de dimensiune completă, toate acestea fiind trase dinamic din pluginul lightbox. Codul de instalare este foarte simplu și se poate vizați imaginile în sine, sau containere precum
Iată fragmentul de cod unic de care aveți nevoie pentru a obține pluginul care rulează:
MediumLightbox ( 'figure.zoom-efect');
În interiorul funcției, veți treceți un selector pentru toate elementele (de ex. .Zoom-efect clasă. Această clasă este specific definite în foaia de stil MediumLightbox, deci este mai bine să utilizați acest lucru și pe pagina dvs..
Și, odată ce a fost înființată, sunteți toți pregătiți!
În zona de conținut a paginii, puteți împacheta toate imaginile într-un
Pentru a descărca o copie a acestui script și pentru a începe, trebuie doar să vizitați principalele repo GitHub. Aici, veți găsi, de asemenea documentație împreună cu fragmente de cod puteți copia pentru a vă crea rapid.
