Ha egy jQuery-vel készült képwebhelyre bukkan, az nagy valószínűséggel átvilágítódobozt fog használni. A lightbox erőssége abban rejlik, hogy még egy egyszerű képtárat is vonzó és hatékony galériává varázsol. Ebben a funkcióban rejlik a jQuery ilyen beépülő moduljainak népszerűsége a webdizájn területén.
A jQuery közösségnek köszönhetően van nagy mennyiség lightbox beépülő modulok, amelyek nagyszerű lehetőségeket teremtenek a tervezők számára a képekkel való munkához. Oktatóanyagunkban 15 különböző bővítményt mutatunk be, amelyekre érdemes odafigyelni.
feltölt
A TopUp egy könnyen használható JavaScript-könyvtár a képek és weboldalak feltűnésmentes megjelenítéséhez. A könyvtárat jQuery és jQuery UI kezeli a böngészők közötti kompatibilitás és tömörség érdekében.
High slide plugin
A Highslide egy dedikált eszköz képek, média és galériák megtekintéséhez.
színes doboz
Kis egyéni bővítmény a jQuery 1.3+-hoz.
A Lightbox 2 egy egyszerű, nem feltűnő szkript, amely egy fedvénykép megjelenítésére szolgál a aktuális oldal. Könnyen telepíthető, és minden modern böngészőben működik.
A prettyPhoto nem csak a képeket támogatja, hanem a videókat, a flash-t, a YouTube-ot és az Ajaxot is. Lightbox médiafájlokhoz.
A Slimbox 2 a Light box 2 4 KB-os klónja jQuery segítségével.
A Shadowbox egy webalapú médianézegető, amely támogatja az összes népszerű médiaformátumot. A Shadowbox JavaScript és CSS nyelven íródott, és nagymértékben testreszabható.
Pirobox Extended V.1.0.
Ennek a bővítménynek az egyik előnye, hogy bármilyen típusú fájlt megnyithat – a beágyazott tartalomtól az .swf fájlig, egyszerű kép.pdf fájlba.
További nagyszerű funkciók közé tartozik az automatikus képméretezés és a drag and drop támogatás.
A GreyBox használható weboldalak, képek és egyéb tartalmak megjelenítésére.
A Super Box egy beépülő modul, amely átvilágítódoboz-effektussal jeleníti meg az ablakokat.
Egy egyszerű script a kényelmes megtekintés képeket a webhelyén. Könnyen telepíthető, és minden népszerű böngészőben működik. Láthat egy példát a munkára. Maga a könyvtár csatlakoztatása két lépésben történik:
Telepítés
A Lightbox a Prototype és Scriptaculous könyvtárakat használja. Fel kell venni őket egy HTML-oldal fejrészébe:
Aktiválás
Ahhoz, hogy a kép megnyíljon a Lightbox használatával, hozzá kell adnia a rel=”lightbox” attribútumot a képlink címkéjéhez. A title attribútumban szükség esetén cím is elhelyezhető. Például így:
Ha több logikailag kapcsolódó képet kell elhelyeznie, és meg kell szerveznie a navigációt közöttük a nézetablakban, akkor a rel=”lightbox” attribútumban minden kapcsolódó képnél szögletes zárójelben kell elhelyezni a csoport nevét. Például:
kép #1
kép #2
kép #3
Az oldalon több fotógaléria is elhelyezhető, és mindegyik tetszőleges számú képet tartalmazhat.
A LightBox könyvtár korábbi verziója harmadik féltől származó könyvtárak használata nélkül valósult meg. Nincs animációja, és nincs lehetősége több kapcsolódó kép megtekintésére.
Megjegyzések: 8
admin:
qpeo, Ellenőriztem a könyvtár működését az MS IE 6. és 7. verziójában - nem vettem észre semmilyen problémát.
Elena:
Szia.
Köszönjük az oldalt és ezt a szkriptet. Nagyon könnyű feltenni, az egyetlen kérdés. Meg lehet csinálni, hogy legyen diavetítés is, vagyis ne az egérre kattintsunk, hanem magukat a képeket változtassuk meg? Tudsz valami kódot hozzáadni?
Aki tudja, szóljon, előre is köszönöm a választ.
UPD 2014-02-14
Emlékszel, hat hónappal ezelőtt megosztottam egy forgatókönyvet a fényképek megtekintéséhez? Azt is eldicsekedtem, hogy kicsi a súlya, gyorsan működik és általában jóképű. Hogy ez tényleg így van-e, azt csak kívülről lehet megítélni, és a forgatókönyv mellett hozok még pár érvet. Ma felhívom a figyelmed a továbbfejlesztett változatára - QuickBox 0.2.
Miért a QuickBox?
Mindenkinél valamivel többen használnak hagyományos normává vált szkripteket. Ha valahol van zoom szkript, akkor ez a fele idő SlimBox vagy világító doboz. Ahelyett, hogy 6 fájl szükséges világító doboz, a szkriptemnek csak kettőre van szüksége: egy cssés egy JS. A képek nem szükségesek a munkájához, és a képeket előre betölti, mielőtt megjeleníti őket a képernyőn, súlya 6,5 KB.
Íme a fő jellemzői:
- nincs grafika, minden rá van építve HTML+CSS
- két fájl szükséges a működéshez +
- a „balra”, „jobbra” nyilak és az Esc gomb vezérlése (Win és MacOS alatt is működik). A kép kinagyítása után a billentyűzeten lévő kurzor megnyomásával léphet a következőre vagy az előzőre, az ablak bezárásához pedig - Esc vagy a jobb felső sarokban található „Bezárás” hivatkozás.
- automatikus galériaépítés: ha egynél több fotó van az oldalon, amelyet nagyobb nézetben szeretne megnyitni, a szkript automatikusan létrehoz egy galériát, és a bal felső sarokban megjeleníti a képek listáját. Erre sem a LightBox, sem a SlimBox nem képes.
- ha a fotók cím attribútumait kitöltik, akkor azok automatikusan megjelennek minden egyes fotó alatt leírásként.
- a szkript ellenőrzi, hogy benne van-e a jQuery, és ha nem, akkor betöltődik
Hogy néz ki?
Meg foglak nevettetni, de az ablaknyitási stíluson kívül semmi vizuális különbség nincs az első verzióhoz képest. A forgatókönyv így néz ki munka közben:
Példa
A forgatókönyvet működés közben láthatja a címen.
Hogyan kell telepíteni
A telepítés 1 percet vesz igénybe. Fel kell töltenie a fájlokat a tárhely bármely mappájába ftp-n keresztül.
- Hogyan kell telepíteni?
- Nagyon egyszerű.
Köszönöm, sokat segítettél.
Az archívum tartalmának feltöltése ide gyökérkönyvtár/js/. A dokumentum fejében a záró címke előttírd be a sort:
Ha nincs engedélyezve a jQuery, egyszerűen töltse le innen: /jquery.js. És hogy a forgatókönyv feldolgozhassa a fotóit. hozzá kell adni egy attribútumot: class='quickbox'. Példaként álljon itt 4 fotó:
Letöltés
A forgatókönyv ingyenes, használd és élvezd az életet. Kérem, ne próbálja eladni, ne törje meg a józan eszét :-).
Nagyszerű alternatíva a LightBox helyett a jQuery használatával.
2. javascript galéria "Awesome Box"
Támogatja az IE6-ot. Billentyűzet navigáció lehetséges: n gomb (tovább) - következő kép; p (előző) gomb - előző.
2. Mootools tartalmat megjelenítő modális ablakokban "Bumpbox 2.0"
Támogatás különféle formátumok: PDF, flv, swf, audio, HTML tartalom, keret támogatás.
Kompakt és könnyen csatlakoztatható szkript, amely lehetővé teszi a nagyított képek megjelenítését egy felugró blokkban. Orosz nyelvű oldal.
4. jQuery plugin "ColorBox"
A bővítmény öt különböző stílusban valósul meg. Ha szeretné látni, hogyan működik különböző mintákkal, kövesse az 1–5. példák hivatkozásait.
5 Visual Lightbox
Egy másik forgatókönyv a lightbox családból. Lehetőség van testreszabni mind a képek miniatűrjeit, mind a teljes méretű fénykép megjelenítési stílusát.
6. Egyszerű modális doboz JQuery átvilágítódoboz stílusú felugró képpel
Sima átmenet a monokrómról a színesre lebegve a jQuery használatával.
7. javascript galéria "Nagyítás!"
8. "LightWindow" felugró ablak a Lightbox stílusában
Lehetőség van különböző formátumú információk megjelenítésére egy felugró ablakban: egyes képek, galéria, médiafájlok, űrlapok. A bemutató oldalon különféle tartalomlehetőségekre mutató hivatkozások találhatók.
9. jQuery SuperBox beépülő modul
Egy másik alternatíva a jól ismert LightBox bővítményhez. Kattintson a képre a bemutató oldalon, hogy megnézze a szkriptet működés közben.
10.jQuery Facebox beépülő modul
11. "FancyZoom" javascript bővítmény
12. "FancyZoom" a jQuery könyvtár használatával
13. jQuery plugin "YoxView" képek, flash és videók megjelenítéséhez
Csodálatos sima tartalomátmeneti hatás. A leírás oldalon a plugin összes bemutató példájára mutató hivatkozásokat talál.
14. "Floatbox" beépülő modul
15. Szürkedoboz
16. "Highslide JS"
17. Mootools „ImageZoom” beépülő modul
18. jQuery plugin "lightbox"
19. Lightbox+
A böngészőablak átméretezése átméretezi a képet.
20. "LightBox2" beépülő modul
Felhasználások javascript könyvtár prototípus.
21. "Lighter Box2"
22. jQuery beépülő modul „TopUp” képek megjelenítéséhez
23. Mootools Popup Modal "SimpleModal"
Különféle tartalmak megjelenítése modális ablakok.
24. MediaBoxAdvanced
Információk megjelenítése modális ablakokban a Mootools segítségével: képek, videók, animációk, közösségi szolgáltatások stb.