Diavetítés létrehozása HTML-sel: Vannak ezek a változatok
Ha a saját diavetítésének létrehozása Javascript és HTML formátumban túl bonyolult az Ön számára, stílusos prezentációkat is létrehozhat pluginek segítségével. Ebben a cikkben különféle diavetítéseket mutatunk be, amelyeket integrálhat webhelyére.
Lightbox 2 - egyszerű felbukkanó diavetítés
Számos webhely a Lightbox bővítményt használja a képek és a galériák megjelenítéséhez. A Lightbox bármely webhelyre integrálható. A Lightbox ingyenesen letölthető a fejlesztő webhelyéről.
- A fájlok kicsomagolása és feltöltése után a webkiszolgálóra könnyedén integrálhatja a bővítményt a webhelyére. Ehhez állítson be két hivatkozást az oldal fejlécében a tartalmazott Javascript fájlokra - ha már integrálta a jQuery-t, akkor csak a "lightbox.min.js" -et kell tartalmaznia. A beágyazási kód így működik:
- Annak érdekében, hogy a felbukkanó ablak is jól nézzen ki, bele kell foglalnia a Lightboxból származó CSS fájlt - ez a fejlécben is megtörténik:
- A képeket mostantól könnyedén csoportokká kombinálhatjuk az attribútum adatkezelővel való hivatkozás segítségével, amelyeket akkor lehet lejátszani, amikor egy képet diavetítésként hívunk elő. A képek csoporthoz rendeléséhez egyszerűen ugyanazzal a data-lightbox attribútummal kell rendelkezniük: 1. kép
SlidesJS - érintésre optimalizált csúszka gyors integrációval
A SlidesJS egy másik módszer a galéria gyors hozzáadására a webhelyre. Az eszköz a Lightbox 2-hez hasonlóan van integrálva a webhelyre, ezzel szemben DIV tárolóként mindig a csúszkaként jelenik meg a webhelyen. Ezért a plugin elegáns fejlécekben vagy információs mezőkben is használható.
- Különböző példákat mutatnak be a weboldalon a gyorsabb belépés és a bemutatás céljából - itt részletes utasításokat talál azok integrálására vonatkozóan is. A Lightboxhoz hasonlóan, különféle fájloknak az oldal fejlécébe történő integrálásával történik ez.
- A SlidesJS érzékenyen működik, vagyis a felhasználói képernyő méretétől függetlenül a képek helyesen jelennek meg - praktikus. Ha nem tudja kezelni a SlidesJS-t, akkor egy jól ismert alternatívája van a Nivo Slider-nek.
Szeretné grafikusan javítani a csúszkát? A CSS-sel és a weboldal-képek kerek sarkaiban található gyakorlati tippünkkel működik.