Ak narazíte na obrázkový web vytvorený pomocou jQuery, s najväčšou pravdepodobnosťou bude používať lightbox. Sila lightboxu je v tom, že dokáže premeniť aj jednoduchú knižnicu obrázkov na atraktívnu a efektívnu galériu. Práve v tejto funkcii spočíva obľúbenosť takýchto pluginov pre jQuery v oblasti webdizajnu.
Vďaka komunite jQuery existuje veľké množstvo pluginy lightbox, čo vytvára skvelé príležitosti pre dizajnérov na prácu s obrázkami. V našom návode predstavujeme 15 rôznych doplnkov, ktorým by ste mali venovať pozornosť.
doplnenie
TopUp je jednoducho použiteľná knižnica JavaScript na nenápadné zobrazovanie obrázkov a webových stránok. Knižnica je spravovaná prostredníctvom používateľského rozhrania jQuery a jQuery pre kompatibilitu a kompaktnosť medzi rôznymi prehliadačmi.
High slide plugin
Highslide je špecializovaný nástroj na prezeranie obrázkov, médií a galérií.
farebný box
Malý vlastný plugin pre jQuery 1.3+.
Lightbox 2 je jednoduchý, nenápadný skript, ktorý sa používa na zobrazenie prekryvného obrázka na a aktuálna stránka. Ľahko sa inštaluje a funguje vo všetkých moderných prehliadačoch.
prettyPhoto podporuje nielen obrázky, ale aj video, flash, YouTube a Ajax. Lightbox pre mediálne súbory.
Slimbox 2 je 4 KB klon Light boxu 2 implementovaný pomocou jQuery.
Shadowbox je webový prehliadač médií, ktorý podporuje všetky populárne formáty médií. Shadowbox je napísaný v JavaScripte a CSS a je vysoko prispôsobiteľný.
Pirobox Extended V.1.0.
Jednou z výhod tohto pluginu je možnosť otvoriť akýkoľvek typ súboru – od vloženého obsahu po súbor .swf, od jednoduchý obrázok do súboru .pdf.
Medzi ďalšie skvelé funkcie patrí automatická zmena veľkosti obrázka a podpora presúvania myšou.
GreyBox je možné použiť na zobrazenie webových stránok, obrázkov a iného obsahu.
Super Box je doplnok, ktorý zobrazuje okná s efektom lightbox.
Jednoduchý skript pre pohodlné prezeranie obrázky na vašej stránke. Jednoduchá inštalácia a funguje vo všetkých populárnych prehliadačoch. Môžete vidieť príklad práce. Pripojenie samotnej knižnice sa vykonáva v dvoch krokoch:
Inštalácia
Lightbox používa knižnice Prototype a Scriptaculous. Musíte ich zahrnúť do hlavičky stránky HTML:
Aktivácia
Aby sa obrázok otvoril pomocou Lightboxu, musíte do značky odkazu na obrázok pridať atribút rel=”lightbox”. Názov, ak je to potrebné, možno umiestniť do atribútu title. Napríklad takto:
Ak potrebujete umiestniť niekoľko logicky súvisiacich obrázkov a usporiadať navigáciu medzi nimi vo výreze, potom musíte umiestniť názov skupiny do hranatých zátvoriek pre každý súvisiaci obrázok v atribúte rel=”lightbox”. Napríklad:
obrázok #1
obrázok #2
obrázok #3
Na stránku je možné umiestniť viacero fotogalérií a každá z nich môže obsahovať ľubovoľný počet obrázkov.
Predchádzajúca verzia knižnice LightBox bola implementovaná bez použitia knižníc tretích strán. Nemá žiadnu animáciu a žiadnu možnosť prezerania viacerých súvisiacich obrázkov.
Komentáre: 8
správca:
qpeo, skontroloval som prácu knižnice v 6. a 7. verzii MS IE - nezaznamenal som žiadne problémy.
Elena:
Ahoj.
Ďakujem za vašu stránku a za tento skript. Veľmi jednoduché položenie, jediná otázka. Dá sa to spraviť tak, aby tam bola aj slide show, teda neklikať myšou, ale meniť samotné obrázky? Môžete pridať nejaký kód?
Napíšte kto vie, vopred ďakujem za odpoveď.
UPD 2014-02-14
Pamätáte si, že som pred šiestimi mesiacmi zdieľal skript na prezeranie fotografií? Tiež som sa pochválil, že váži málo, pracuje rýchlo a celkovo je pekný. Či je to naozaj tak, možno posúdiť len zvonku a ja vám dám ešte pár argumentov v prospech scenára. Dnes vám dávam do pozornosti jeho vylepšenú verziu - quickBox 0.2.
Prečo QuickBox?
O niečo viac ako všetci používajú skripty, ktoré sa stali tradičnou normou. Ak niekde existuje zoom skript, potom je to polovica času Slim Box alebo svetelný box. Namiesto 6 súborov potrebných pre svetelný box, môj skript vyžaduje iba dva: jeden css a jeden JS. Na svoju prácu nepotrebuje obrázky a pred zobrazením na obrazovke si fotografie vopred načíta a váži 6,5 KB.
Tu sú jeho hlavné charakteristiky:
- žiadna grafika, všetko je postavené na HTML+CSS
- na prácu sú potrebné dva súbory +
- ovládanie šípkami „doľava“, „doprava“ a tlačidlom Esc (funguje vo Win aj MacOS). Po zväčšení fotografie môžete prejsť na nasledujúcu alebo predchádzajúcu stlačením kurzora na klávesnici a zatvoriť okno - Esc alebo odkaz „Zatvoriť“ vpravo hore.
- automatické vytváranie galérie: ak je na stránke viac ako jedna fotografia, ktorú chcete otvoriť pre väčšie zobrazenie, skript automaticky vytvorí galériu a vľavo hore zobrazí zoznam obrázkov. LightBox ani SlimBox to nedokážu.
- ak sú pri fotografiách vyplnené atribúty názvu, automaticky sa zobrazia pod každou fotografiou ako popis.
- skript skontroluje, či je zahrnutý jQuery, a ak nie, načíta sa
Ako to vyzerá?
Rozosmejem vás, ale vizuálne rozdiely oproti prvej verzii nie sú okrem štýlu otvárania okna. Skript pri práci vyzerá takto:
Príklad
Skript v akcii môžete vidieť na .
Ako nainštalovať
Inštalácia trvá 1 minútu. Súbory budete musieť nahrať do ľubovoľného priečinka na vašom hostingu cez ftp.
- Ako nainštalovať?
- Veľmi jednoduché.
Ďakujem, veľmi si mi pomohol.
Nahrávanie obsahu archívu do koreňový priečinok/js/. V hlavičke dokumentu pred záverečnou značkou napíš riadok:
Ak nemáte povolený jQuery, stiahnite si ho z: /jquery.js. A aby scenár vedel spracovať vaše fotografie. musíte k nim pridať atribút: class='quickbox'. Ako príklad uvádzame 4 fotografie:
Stiahnuť ▼
Skript je zadarmo, používajte ho a užívajte si život. Nesnažte sa to prosím predať, nelámte zdravý rozum :-).
Skvelá alternatíva k LightBox pomocou jQuery.
2. javascriptová galéria "Awesome Box"
Podporuje IE6. Navigácia pomocou klávesnice je možná: tlačidlo n (ďalší) - ďalší obrázok; Tlačidlo p (predchádzajúce) - predchádzajúce.
2. Mootools zobrazujúci obsah v modálnych oknách "Bumpbox 2.0"
podpora rôznych formátov: PDF, flv, swf, zvuk, obsah HTML, podpora rámca.
Kompaktný a ľahko pripojiteľný skript, ktorý vám umožní zobraziť zväčšené obrázky v pop-up bloku. Stránka v ruštine.
4. jQuery plugin "ColorBox"
Plugin je implementovaný v piatich rôznych štýloch. Ak ho chcete vidieť v akcii s rôznymi dizajnmi, postupujte podľa odkazov Príklady 1 až 5.
5 Visual Lightbox
Ďalší skript z rodiny lightboxov. Prispôsobiť je možné ako miniatúry obrázkov, tak aj štýl zobrazenia fotografie v plnej veľkosti.
6. Jednoduchý modálny box s vyskakovacím obrázkom v štýle lightboxu JQuery
Plynulý prechod z monochromatickej na farebnú pri umiestnení kurzora myši pomocou jQuery.
7. javascriptová galéria "EnlargeIt!"
8. Vyskakovacie okno „LightWindow“ v štýle Lightbox
V kontextovom okne je možné zobraziť informácie v rôznych formátoch: jednotlivé obrázky, galéria, mediálne súbory, formuláre. Ukážková stránka obsahuje odkazy na rôzne možnosti obsahu.
9. Doplnok jQuery SuperBox
Ďalšia alternatíva k známemu doplnku LightBox. Kliknutím na obrázok na stránke s ukážkou uvidíte skript v akcii.
10.jQuery Facebox Plugin
11. javascript plugin "FancyZoom"
12. "FancyZoom" pomocou knižnice jQuery
13. jQuery plugin "YoxView" na zobrazovanie obrázkov, flashu a videa
Úžasný efekt hladkého prechodu obsahu. Na stránke s popisom nájdete odkazy na všetky ukážkové príklady pluginu.
14. Plugin "Floatbox"
15. Greybox
16. "Highslide JS"
17. Doplnok Mootools "ImageZoom"
18. jQuery plugin "lightbox"
19. Lightbox+
Zmena veľkosti okna prehliadača zmení veľkosť obrázka.
20. Plugin "LightBox2"
Využitie javascriptová knižnica prototyp.
21. "Zapaľovač 2"
22. jQuery Plugin pre zobrazovanie "TopUp" obrázkov
23. Mootools Popup Modal "SimpleModal"
Zobrazovanie rôzneho obsahu v modálne okná.
24. MediaBoxAdvanced
Zobrazovanie informácií v modálnych oknách pomocou Mootools: obrázky, videá, animácie, sociálne služby atď.