Hogyan lehet nagyítani a képeket, mint például a közepes
A Medium blogolási platform a egyéni kép nagyítási hatás a blogoldalain. Amikor a felhasználó rákattint egy képre, automatikusan nagyobb méretre nagyít.
Ez nagyszerű hatás, és minden bizonnyal egyedülálló a Medium számára, de soha nem volt könnyen másolható.
Most, a MediumLightbox könnyebb, mint valaha. Ez a JS-parancsfájl könnyű és könnyen hozzáadható bármely webhelyhez vagy bloghoz.
Ha szeretné látni, hogy ez hogyan működik, látogasson el a élő demo oldal Davide Calignano alkotója.
Egy darabig töltött egy precíz átmenetet és egyéni animációs hatást hozzon létre egy tükörképet a közepes kép nagyításáról. Az egész könyvtár írt tiszta JavaScript-ben, így nem támaszkodik semmilyen 3-rard fél szkriptek, mint például a jQuery.
Tudnod kell egy kis JS-t, hogy felállítsd, de biztosan nem kell szakértőnek lenned.
Minden kép készíthető adat * attribútumok a teljes méretű magasság és szélesség beállításához dinamikusan húzta a Lightbox bővítményből. A telepítési kód nagyon egyszerű és képes célozza meg a képeket, vagy konténerek, mint a elem.
Íme az egyetlen kódrészlet, amelyre a bővítmény futásához szükséges:
MediumLightbox ( 'figure.zoom-hatástól');
A funkció belsejében adja át a választót minden elemre (pl. ) a ... val
.zoom-hatás
osztály. Ez az osztály meghatározott a MediumLightbox stíluslapjában, így a legjobb, ha ezt az oldalt is használja.
És ha ez már be van állítva, mindannyian be van állítva!
Az oldal tartalmának területén az összes képet a címke használatával. Automatikusan megkapják ezt a szeretett Közepes kattintási-nagyítási hatást mind az asztali, mind a mobil felhasználók számára.
A szkript egy példányának letöltéséhez és elkezdéséhez látogasson el a GitHub fő repójára. Itt is megtalálod dokumentáció a kódrészletekkel együtt gyorsan másolhat.