Pokud narazíte na obrázkový web vytvořený pomocí jQuery, bude s největší pravděpodobností používat lightbox. Síla lightboxu je v tom, že dokáže proměnit i jednoduchou knihovnu obrázků v atraktivní a efektní galerii. Právě v této funkci spočívá obliba takových pluginů pro jQuery v oblasti webdesignu.
Díky komunitě jQuery existuje velké množství pluginy lightbox, což vytváří skvělé příležitosti pro designéry pro práci s obrázky. V našem tutoriálu představujeme 15 různých pluginů, kterým byste měli věnovat pozornost.
doplnění
TopUp je snadno použitelná JavaScriptová knihovna pro nenápadné zobrazování obrázků a webových stránek. Knihovna je spravována prostřednictvím uživatelského rozhraní jQuery a jQuery pro kompatibilitu a kompaktnost mezi různými prohlížeči.
High slide plugin
Highslide je speciální nástroj pro prohlížení obrázků, médií a galerií.
barevná krabice
Malý vlastní plugin pro jQuery 1.3+.
Lightbox 2 je jednoduchý, nenápadný skript, který se používá k zobrazení překryvného obrázku na a aktuální stránku. Snadno se instaluje a funguje ve všech moderních prohlížečích.
prettyPhoto podporuje nejen obrázky, ale také video, flash, YouTube a Ajax. Lightbox pro mediální soubory.
Slimbox 2 je 4 KB klon Light boxu 2 implementovaný pomocí jQuery.
Shadowbox je webový prohlížeč médií, který podporuje všechny populární formáty médií. Shadowbox je napsán v JavaScriptu a CSS a je vysoce přizpůsobitelný.
Pirobox Extended V.1.0.
Jednou z výhod tohoto pluginu je možnost otevřít jakýkoli typ souboru – od vloženého obsahu po soubor .swf, od jednoduchý obrázek do souboru .pdf.
Mezi další skvělé funkce patří automatická změna velikosti obrázku a podpora přetažení.
GreyBox lze použít k zobrazení webových stránek, obrázků a dalšího obsahu.
Super Box je plugin, který zobrazuje okna s efektem lightbox.
Jednoduchý skript pro snadné prohlížení obrázků na stránkách vašeho webu. Snadná instalace a funguje ve všech populárních prohlížečích. Můžete vidět ukázku práce. Samotné připojení knihovny se provádí ve dvou krocích:
Instalace
Lightbox používá knihovny Prototype a Scriptaculous. Musíte je zahrnout do záhlaví stránky HTML:
Aktivace
Aby se obrázek otevřel pomocí Lightboxu, musíte do tagu image link přidat atribut rel=”lightbox”. V případě potřeby lze do atributu title umístit název. Například takto:
Pokud potřebujete umístit několik logicky souvisejících obrázků a uspořádat navigaci mezi nimi ve výřezu, musíte název skupiny umístit do hranatých závorek pro každý související obrázek v atributu rel=”lightbox”. Například:
obrázek #1
obrázek #2
obrázek #3
Na stránku lze umístit několik fotogalerií a každá z nich může obsahovat libovolný počet obrázků.
Předchozí verze knihovny LightBox byla implementována bez použití knihoven třetích stran. Nemá žádnou animaci a žádnou možnost zobrazení více souvisejících obrázků.
Komentáře: 8
správce:
qpeo, ověřil jsem práci knihovny v 6. a 7. verzi MS IE - žádné problémy jsem nezaznamenal.
Elena:
Ahoj.
Děkuji za vaše stránky a za tento skript. Velmi snadné položit, jediná otázka. Dá se to udělat tak, aby tam byla i slide show, tedy neklikat myší, ale měnit samotné obrázky? Můžete přidat nějaký kód?
Řekněte mi kdo ví, předem děkuji za odpověď.
UPD 2014-02-14
Pamatujete si, že jsem před šesti měsíci sdílel skript pro prohlížení fotografií? Pochlubil jsem se také, že váží málo, pracuje rychle a je celkově pohledný. Zda tomu tak skutečně je, lze posoudit pouze zvenčí a já vám dám ještě pár argumentů ve prospěch scénáře. Dnes vám dávám do pozornosti jeho vylepšenou verzi - QuickBox 0.2.
Proč QuickBox?
O něco více než všichni používají skripty, které se staly tradiční normou. Pokud někde existuje zoom skript, pak je to poloviční čas Slim Box nebo světelný box. Místo 6 souborů potřebných pro světelný box, můj skript vyžaduje pouze dva: jeden css a jeden JS. Ke své práci nepotřebuje obrázky a před zobrazením na obrazovce si fotografie předem nahraje a váží 6,5 KB.
Zde jsou jeho hlavní charakteristiky:
- žádná grafika, vše je postaveno na HTML+CSS
- k práci jsou potřeba dva soubory +
- ovládání šipek „doleva“, „doprava“ a tlačítka Esc (funguje ve Win i MacOS). Po zvětšení fotografie můžete přejít na další nebo předchozí stisknutím kurzoru na klávesnici a pro zavření okna - Esc nebo odkaz „Zavřít“ vpravo nahoře.
- automatické vytváření galerie: pokud je na stránce více než jedna fotografie, kterou chcete otevřít pro větší zobrazení, skript automaticky vytvoří galerii a zobrazí seznam obrázků vlevo nahoře. LightBox ani SlimBox to neumí.
- pokud jsou u fotografií vyplněny atributy názvu, automaticky se zobrazí pod každou fotografií jako popis.
- skript zkontroluje, zda je jQuery zahrnut, a pokud ne, načte se
Jak to vypadá?
Rozesměju vás, ale vizuální rozdíly oproti první verzi nejsou, kromě stylu otevírání okna. Skript při práci vypadá takto:
Příklad
Skript v akci můžete vidět na .
Jak nainstalovat
Instalace trvá 1 minutu. Budete muset nahrát soubory do libovolné složky na vašem hostingu přes ftp.
- Jak nainstalovat?
- Velmi jednoduché.
Díky, moc jsi mi pomohl.
Nahrání obsahu archivu do kořenový adresář/js/. V záhlaví dokumentu před závěrečnou značkou napište řádek:
Pokud nemáte povolený jQuery, stačí si jej stáhnout z: /jquery.js. A aby scénář mohl zpracovat vaše fotografie. musíte k nim přidat atribut: class='quickbox'. Jako příklad pro vás máme 4 fotky:
Stažení
Skript je zdarma, používejte ho a užívejte si života. Nesnažte se to prosím prodat, nezlomte zdravý rozum :-).
Skvělá alternativa k LightBoxu pomocí jQuery.
2. javascriptová galerie "Awesome Box"
Podporuje IE6. Je možná navigace pomocí klávesnice: tlačítko n (další) - další obrázek; Tlačítko p (předchozí) - předchozí.
2. Mootools zobrazující obsah v modálních oknech "Bumpbox 2.0"
Podpěra, podpora různé formáty: PDF, flv, swf, zvuk, obsah HTML, podpora rámců.
Kompaktní a snadno připojitelný skript, který vám umožní zobrazit zvětšené obrázky ve vyskakovacím bloku. Stránky v ruštině.
4. jQuery plugin "ColorBox"
Plugin je implementován v pěti různých stylech. Chcete-li jej vidět v akci s různými vzory, postupujte podle odkazů Příklady 1 až 5.
5 Visual Lightbox
Další skript z rodiny lightboxů. Upravit je možné jak miniatury obrázků, tak styl zobrazení fotografie v plné velikosti.
6. Jednoduchý modální box s vyskakovacím obrázkem ve stylu JQuery Lightbox
Plynulý přechod z monochromatické na barevnou při najetí myší pomocí jQuery.
7. javascriptová galerie "EnlargeIt!"
8. Vyskakovací okno "LightWindow" ve stylu Lightboxu
Ve vyskakovacím okně je možné zobrazit informace v různých formátech: jednotlivé obrázky, galerie, mediální soubory, formuláře. Ukázková stránka obsahuje odkazy na různé možnosti obsahu.
9. Plugin jQuery SuperBox
Další alternativa ke známému pluginu LightBox. Kliknutím na obrázek na stránce s ukázkou uvidíte skript v akci.
10.jQuery Facebox Plugin
11. javascriptový plugin "FancyZoom"
12. "FancyZoom" pomocí knihovny jQuery
13. jQuery plugin "YoxView" pro zobrazování obrázků, flash a videa
Úžasný efekt hladkého přechodu obsahu. Na stránce s popisem naleznete odkazy na všechny ukázkové příklady pluginu.
14. Plugin "Floatbox"
15. Greybox
16. "Highslide JS"
17. Plugin Mootools "ImageZoom"
18. jQuery plugin "lightbox"
19. Lightbox+
Změna velikosti okna prohlížeče změní velikost obrázku.
20. Plugin "LightBox2"
Použití javascriptová knihovna prototyp.
21. "Zapalovač 2"
22. jQuery Plugin pro zobrazování "TopUp" obrázků
23. Mootools Popup Modal "SimpleModal"
Zobrazení různého obsahu v modální okna.
24. MediaBoxAdvanced
Zobrazení informací v modálních oknech pomocí Mootools: obrázky, videa, animace, sociální služby atd.