Kā tuvināt attēlus, piemēram, vidēji

Blogošana platforma Medium izmanto a pielāgotā attēla tālummaiņas efekts viņu emuāra lapās. Ikreiz, kad lietotājs noklikšķina uz attēla, tas automātiski tuvinās lielāku izmēru.

Tas ir lielisks efekts un, protams, unikāls Medium, bet tas nekad nav bijis viegli kopējams.

Tagad, ar MediumLightbox skripts, tas ir vieglāk nekā jebkad agrāk. Šis JS skripts ir viegls un viegli ievietojams jebkurā tīmekļa vietnē vai emuārā.

Ja vēlaties redzēt, kā tas darbojas, varat apmeklēt vietni tiešraides demonstrācijas lapa vadītājs Davide Calignano.

Viņš pavadīja kādu laiku, nospiežot precīzu pāreju un pielāgoto animācijas efektu uz izveidojiet Vidēja attēla tālummaiņas spoguļattēlu. Visa bibliotēka ir rakstīts tīrā JavaScript, tāpēc tas nav atkarīgs no 3^rd partijas skripti, piemēram, jQuery.

Jums būs jāzina mazliet JS, lai to izveidotu, bet jums noteikti nav jābūt ekspertam.

Katrs attēls var notikt datu * atribūti lai iestatītu pilna izmēra augstumu un platumu, kas visi ir dinamiski no gaismas kastes spraudņa. Uzstādīšanas kods ir ļoti vienkāršs un var atlasiet pašus attēlus, vai konteineri, piemēram,

elementu.

Šeit ir viens koda fragments, kas nepieciešams, lai iegūtu spraudni:

 MediumLightbox (vidējais gaismas lodziņš) ('figure.zoom-effect'); 

Funkcijas iekšpusē jūs iziet selektoru visiem elementiem (piem.,.

) Ar .tālummaiņas efekts klasē. Šī klase ir īpaši definēti MediumLightbox stila lapā, tāpēc tas ir labākais, lai to izmantotu arī savā lapā.

Un, kad tas ir izveidots, jūs visi esat iestatījuši!

Lapas satura apgabalā visus attēlus varat ieslēgt a

tagu, izmantojot šo klasi. Tie automātiski iegūs šo mīļoto vidējā klikšķa uz tālummaiņas efektu gan galddatoriem, gan mobilajiem lietotājiem.

Lai lejupielādētu šī skripta kopiju un sāktu darbu, apmeklējiet galveno GitHub repo. Šeit jūs atradīsiet arī dokumentācija kopā ar koda fragmentiem jūs varat kopēt, lai ātri iestatītu.