Web design și optimizare pentru motoarele de căutare. Descrierea galeriei jQuery Lightbox Lightbox

Scriptul organizează vizualizarea imaginilor într-o fereastră pop-up. Vizualizarea poate fi organizată fie după o singură imagine, fie după o galerie, derulând imaginile într-o fereastră pop-up.
Cel mai simplu și mai rapid script de instalat. Se instalează și se configurează în doar câteva minute.

Cum se instalează lightbox Descărcați arhiva, despachetați-o și încărcați-o pe server.
Apoi, încorporați scriptul în site-ul dvs. web. ÎN cod html scrie codul pe pagina

Și ultimul pas. Ieșirea imaginilor.
Produceți imagini astfel:

Codul standard pentru afișarea unei imagini mici și a unui link către o imagine mare, doar doi parametri sunt adăugați la link.
Iată un exemplu al acestui cod - când faceți clic pe imagine, apare o imagine mare.

Parametrul data-lightbox="image" este responsabil pentru acest efect.
Dacă aveți multe imagini pe pagină, puteți deschide imaginile fără a derula într-o fereastră pop-up sau puteți combina imagini și acestea vor derula într-o fereastră pop-up.
Pentru a combina imagini, trebuie să utilizați un nume pentru fiecare grup de imagini

După cum puteți vedea, toate imaginile pot fi derulate într-o fereastră pop-up, deoarece caseta de date este aceeași pentru toată lumea.
Dacă doriți să separați imaginile, astfel încât acestea să nu defileze, utilizați un cod ca acesta

Acum fiecare imagine se deschide separat, adică nu există nicio modalitate de a derula la următoarea.

Ce este în versiunea modernizată Buton pentru a mări imaginea la dimensiunea reală. O puteți vedea în toate exemplele. Nu este în versiunea originală
Există o setare în script-ul în sine, puteți dezactiva acest buton.

Iar a doua completare de care puțini oameni au nevoie este eliminarea imaginilor duplicate.
Este dezactivat implicit, dar îl puteți activa direct în script, în același loc în care este activat butonul de dimensiune reală.
În utilizarea normală a scenariului această funcție Aduce doar rău; poate fi folosit doar în situații complet fără speranță.

Observați că trei dintre linkuri sunt goale, ceea ce înseamnă că se leagă la imagini mari, dar nimic între etichete, iar un link este umplut cu o imagine.
Drept urmare, în browser este vizibilă o singură imagine; când dați clic pe ea, se deschide o imagine mai mare și toate imaginile din linkurile goale sunt trase în sus și puteți derula prin ea.
Și uite aici, în linkuri sunt două poze identice (evidențiate cu roșu) și când vei derula, vei vedea două imagini identice.
Dacă în exemplu concret Dacă activați eliminarea duplicatelor, nu vor exista imagini duplicate.

Desigur, o astfel de situație nu ar trebui să existe, de ce să afișați două imagini identice și apoi să le ștergeți. Dar, destul de ciudat, m-am confruntat cu această situație: într-un magazin online, fotografiile duplicate trebuiau să fie afișate pentru un produs (au fost înlocuiri inteligente de fotografii prin scripturi), iar atunci când erau vizualizate prin lightbox, fotografiile duplicate arătau foarte greșit. Aici este utilă eliminarea duplicatelor.

Comentarii

12.11.2014 Victor
Scenariul este foarte bun. Puteți chiar descrie o imagine folosind data-title. Dar am avut o problemă, am avut un script pe pagină care a împins un bloc în lateral când am conectat acest script, a dispărut. Mai mult, dispare dacă sunt conectate scripturi js. Am crezut că este conflictual din cauza versiunii, dar nu din cauza lor.

23.05.2015 Victor
Nu merge pentru mine când
href="http://ikk.secrieru.ru/products/Gallery/000039.jpg?ver=20150523142822"
arata asa. Fără?ver=20150523142822
lucrări

25.05.2015 kaha
Mulţumesc mult

29.06.2015 Andrei
Vă mulțumesc foarte mult pentru munca dvs.! Totul a funcționat aproape prima dată)

26.08.2015 Alexandru
Am încercat diferiți analogi. Acesta a devenit imediat fără conflicte. crește la original dimensiunea este gut.Daca as folosi mouse-ul pentru a lua si muta campul pozei, ar fi o mizerie completa

01.11.2015 Igor
Buna ziua!
Super galerie. Mulţumesc mult.
Doar aceasta intrebare:
În exemplul de mai sus (3 imagini), imaginile sunt afișate în buclă. Dar în versiunea descărcată a lightbox-2.7.1 această funcție nu funcționează. La vizualizarea ultimei imagini, butonul nu mai apare.
Spune-mi, te rog, care ar putea fi motivul?

14.11.2015 Anton

15.11.2015 Anton
Pe IOS și Android, estomparea ecranului nu acoperă întreaga pagină!!! care ar putea fi problema. Într-un LightBox obișnuit - totul este OK!

30.03.2016 Anton
Buna ziua!
Este posibil să deschideți imaginea la o rezoluție mai mare?

18.11.2016 Yura
Mulţumesc mult! Totul funcționează perfect!

05.04.2017 Igor
Mulțumesc foarte mult pentru scenariu! Caut ceva asemanator si usor de instalat de mult timp.
Numai dintr-un motiv oarecare sub fotografiile mele apar inscripții ciudate

Poate codarea trebuie corectată undeva?

09.12.2017 Barsuk
Unde ai fost înainte? Mi-am petrecut toată ziua încercând să-mi dau seama cum să elimin duplicatele))

doar am pagina principala o previzualizare a imaginii principale, iar în partea de jos există previzualizări și mai mici ale altora suplimentare, din această cauză au existat duplicate în galerie.

Am revizuit de multe ori diverse galerii de imagini și am adunat o colecție extinsă de prezentări de diapozitive și plugin-uri spectaculoase. Lightbox este, de asemenea, disponibil exclusiv pe CSS3, fără a conecta biblioteci js suplimentare. Dar timpul nu stă pe loc, utilizatorii folosesc din ce în ce mai mult diverse dispozitive mobile pentru a naviga pe internet, ceea ce înseamnă că adaptabilitatea elementelor web și în special a galeriilor foto cu efectul „ ” devine una dintre prioritățile cărora designerii și dezvoltatorii web ar trebui să le acorde atenție la.

Vă prezint o altă selecție de 15 plugin-uri jQuery adaptive care sunt prietenoase atât cu browserele desktop și se potrivesc perfect pe ecranele diverselor dispozitive mobile (laptop-uri, smartphone-uri, tablete etc.).

Urmăriți demo-ul de pe site-urile dezvoltatorilor, descărcați pluginul care vă place și creați, creați, creați...

1. iLightbox

iLighbox este un plugin jQuery Lightbox ușor, cu suport pentru o gamă largă de tipuri variate fișiere: imagini, videoclipuri, Flash/SWF, conținut Ajax, cadre și hărți încorporate. Acest plugin adaugă și butoane retele sociale, care permite utilizatorilor să partajeze conținut prin Facebook, Twitter sau Reddit. O oportunitate excelentă de a organiza prezentări de diapozitive, galerii de imagini și videoclipuri spectaculoase, cu vizionare în modurile normal și ecran complet.

iLighbox funcționează destul de repede și atunci când este vizualizat dispozitive mobile, afișează mai mult decât corect conținutul procesat. Printre altele, folosind acest plugin, puteți implementa cu ușurință afișarea blocurilor de informații ca o fereastră modală.

Dependență: jQuery
Suport browser: IE7+, Chrome, Firefox, Safari și Opera
Licență: Diavolul știe)))

2. SwipeBox

Swipebox este un plugin jQuery cu suport pentru ecrane tactile platforme mobile. Pe lângă imagini, pluginul acceptă videoclipuri încorporate de pe Youtube și Vimeo. Swipebox este foarte ușor de atașat la orice proiect; pluginul are mai multe opțiuni intuitive pentru personalizarea funcționalității și comportamentului său. Site-ul web al dezvoltatorului are documentație detaliată despre conectarea și utilizarea pluginului, fără pufuri inutile, totul este exact la obiect, așa că cred că nu va fi dificil să-mi dau seama ce, unde și de ce.

Dependență: jQuery
Suport browser: IE9+, Chrome, Safari, Firefox, Opera, IOS4+, Android și Windows Phone
Licență: nedeterminată, poate vei avea noroc)))

3.MagnificPopup

Un plugin lightbox cunoscut și bine dovedit bazat pe jQuery sau Zepto.js. Autorul pluginului este Dmitry Semenov, care este și dezvoltatorul pluginului PhotoSwipe, despre care voi vorbi mai jos. Vine ca un plugin jQuery/Zepto, are mai multe oportunități ample lipsesc în PhotoSwipe, cum ar fi suportul video, afișarea hărților și a conținutului Ajax, implementarea ferestrelor modale cu formulare încorporate. După toate criteriile, acesta este un alt instrument grozav pentru un dezvoltator web. Există un plugin separat pentru WordPress și documentație detaliată despre configurare și utilizare. Singurul lucru deprimant este lipsa documentației în limba rusă, judecând după nume și prenume, autorul pare a fi rus, nu a înțeles niciodată dacă a fost dăunător, sau din cauza unei conștiințe imaginare a propriei sale sofisticari, dar bla. Ei bine, bine, cine trebuie să-și dea seama, nici noi nu am fiert ceaiul fiert moale))).

Dependență: jQuery 1.9.1+ sau Zepto.js
Suport browser: IE7 (parțial), IE8+, Chrome, Firefox, Safari și Opera
Licență: licență MIT

4.PhotoSwipe

Dependență: Javascript sau jQuery
Suport pentru browser
Licență: licență MIT

11.FeatherLight

Un plugin lightbox de 6 kbit pentru dezvoltatori mai mult sau mai puțin pricepuți, echipat cu toate cele mai necesare funcții. Pe lângă suportul pentru toate tipurile de conținut obișnuite (text, imagini, iframe, Ajax), există posibilitatea de a conecta altele suplimentare și, de asemenea, puteți dezvolta propriul dvs. extensie nativă pentru acest plugin, care vă va satisface pe deplin nevoile atunci când creați un nou proiect. Cum funcționează toată chestia asta (dezvoltarea extensiilor), nu m-am uitat cu adevărat, dar cei care instalează acest plugin cred că își vor da seama))).

Dependență: jQuery
Suport browser: IE8+, Chrome, Firefox, Safari și Opera
Licență: licență MIT

12. LightGallery

LightGallery este un plugin lightbox multifuncțional cu multe caracteristici suplimentare. Vine cu peste 20 de opțiuni pentru a personaliza cele mai mici detalii ale Lightbox-ului. Există totul aici, bine, sau aproape totul)). Galerie completă de imagini cu miniaturi bine aranjate, elemente de navigare și derulare a miniaturilor. Markup HTML simplu sub forma unei liste neordonate

folosind CSS

Dependență: jQuery
Suport browser: IE7+, Chrome, Firefox, Safari, Opera, iOS, Android și Windows Phone
Licență: licență MIT

Neobișnuit, aș spune chiar: o implementare neobișnuită a casetei de lumină, sau mai degrabă, o prezentare neobișnuită a conținutului, atunci când o imagine sau un videoclip, în designul casetei de lumină, apare în dreapta, umplând nu întregul ecran, ci doar o dimensiune dată de o imagine sau un videoclip la dimensiune completă. Pe ecranele mari, această abordare este de înțeles; interacțiunea cu pagina rămâne posibilă. Pe micile ecrane ale dispozitivelor mobile, tot acest design inovator se transformă fără probleme într-o „lightbox” clasică. Ideea este interesantă, uită-te la demo, poate cineva va adăuga o asemenea creativitate.

Dependență: jQuery
Suport browser: IE7+, Chrome, Firefox, Safari, Opera, iOS 5+ și Android 3+
Licență: licență Creative Commons BY-NC-ND 3.0

Un plugin lightbox ușor de utilizat, care merge bine cu orice proiect și, de asemenea, arată bine pe orice ecran. Pluginul LightLayer oferă control asupra multor setări, cum ar fi schimbarea culorii de fundal și a gradului de transparență, poziția blocului de bază, alegerea efectelor de tranziție la deschidere/închidere, funcții pe care utilizatorii le pot manipula independent. Plugin-ul funcționează excelent cu conținut extern de site-uri web, playere video încorporate și hărți.

Dependență: jQuery
Suport browser: IE9+, Chrome, Firefox, Safari și Opera
Licență: licență MIT

Fluidbox este un plugin lightbox exclusiv pentru imagini. Numărul de variații posibile în prezentarea imaginii este cu adevărat impresionant. Plugin-ul funcționează excelent cu imagini în diferite modele, inclusiv imagini plutitoare, imagini cu poziționare absolută, imagini și fotografii înrămate și indentate, cu imagini unice și combinate într-o galerie. În general, este o pierdere de timp, încă nu este posibil să descrii toate capacitățile pluginului într-o scurtă prezentare, așa că este mai bine să urmărești demo-ul, să îl răsuciți, să îl întoarceți și cred că multor oameni le va plăcea acest plugin .

Dependență: jQuery
Suport browser: IE9+, Chrome, Firefox, Safari, Opera
Licență: licență MIT

Probabil asta e tot! Sper ca acesta scurtă recenzie, vă va ajuta să înțelegeți mulțimea de produse de dezvoltare web oferite. Aș dori să menționez că nu am folosit toate pluginurile prezentate în selecție pe proiecte de lucru; majoritatea le-am testat pe site-uri de testare sau la atelier, așa că, dacă apar întrebări, cel mai probabil le vom rezolva împreună și împreună, ca întotdeauna Vom reuși.

Căutați un șablon rusesc potrivit pentru scopurile dvs.? În acest caz, probabil că ar trebui să vizitați piața TemplateMonster. Din simplul motiv că a apărut destul de recent site-ul noua sectiuneșabloane Acum fiecare utilizator se poate familiariza cu colecția, care va fi actualizată și actualizată. Textele pentru șabloane au fost scrise de mână. Dar acesta nu este singurul avantaj al datelor. soluții gata făcute. La urma urmei, în pachetele lor puteți găsi tot ceea ce vă va ușura munca la dezvoltarea unui proiect online, inclusiv un editor vizual.

Cu tot respectul, Andrew

Este cu adevărat grozav că tot mai multe dintre cele mai noi tehnologii web ne sunt disponibile, cu ajutorul cărora munca noastră va deveni mult mai ușoară. Ferestre modale - element funcţional pentru afișarea oricărui tip de conținut HTML, axat pe crearea unui design și interfață ușor de utilizat.

În această recenzie, am compilat o listă de biblioteci și script-uri JQuery pentru crearea casetelor lightbox care vor ajuta dezvoltatorii și designerii să creeze site-uri web și mai bune și mai profesionale.

Puteți adăuga cu ușurință scripturile de mai jos pe site-ul dvs. Deci, fără alte prelungiri, să trecem la subiect și să aruncăm o privire la aceste biblioteci super jQuery lightbox pe care le puteți adăuga la arsenalul dvs.

PhotoSwipe este o galerie foto HTML bazată pe CSS și JavaScript, concepută special pentru dispozitive mobile. Când l-au dezvoltat, autorii au luat ca model serviciile de vizualizare a imaginilor pentru dispozitivele mobile IOS și Google. PhotoSwipe are o interfață familiară și intuitivă care facilitează lucrul cu imagini pe un site mobil.

Sunt acceptate toate funcțiile de bază: trecerea la imaginea următoare sau anterioară, mărirea, tragerea, micșorarea sau închiderea și altele.

Swipebox – plugin JQuery pentru computere desktop, smartphone-uri și tablete. Acceptă controale tactile pentru dispozitive mobile, navigare cu tastatură pentru dispozitive desktop, tranziții CSS cu o alternativă la controalele JQuery și este destul de ușor de personalizat.

Pluginul a fost testat pe Chrome, Safari, Firefox, Opera, Internet Explorer 8+, iOS4+, Android, Windows Phone. Lansat sub licență MIT.

iLightBox facilitează crearea unui responsive foarte frumos ferestre modale folosind JQuery. Combinând suportul pentru o gamă largă de conținut media cu skinuri grozave și un API ușor de utilizat, iLightBox se străduiește să facă lightbox cât se poate de perfectă. iLightBox oferă vizualizare pe tot ecranul, skin-uri compatibile cu Retina, gestionarea evenimentelor tactile, integrare YouTube și Vimeo pentru videoclipuri HTML5 și un API JavaScript puternic. Pluginul are suport gratuitși actualizări de versiuni.

Image Lightbox este un plugin minimalist, extensibil și personalizabil pentru IOS, Android și Windows Phone. Puteți încărca pur și simplu următoarea imagine folosind tastatura datorită utilizării transformărilor și tranzițiilor CSS.

Magnific Popup este gratuit jquery receptiv un plugin care se concentrează pe oferirea celei mai bune experiențe între utilizator și dispozitiv. Majoritatea pluginurilor lightbox necesită să definiți dimensiunea ferestrei folosind JS. În Magnific Popup, puteți utiliza unități relative, cum ar fi EM sau redimensionați caseta de lumină folosind interogări media CSS.

Nivo Lightbox este un plugin pentru lightbox flexibil. Există multe opțiuni din care puteți alege, astfel încât să puteți schimba cu ușurință aspect caseta de lumina. De exemplu, schimbați tema, efectul de tranziție și metoda de navigare.

Lightcase este un plugin lightbox flexibil, receptiv și extensibil dezvoltat cu folosind JQuery. Funcționează perfect în toate browserele populare, cum ar fi Internet Explorer 7+, Firefox, Opera, Webkit și altele. Pluginul acceptă apeluri foto, video, video HTML5, Iframe, SWF și AJAX.

LightLayer este un script pentru afișarea casetelor de lumină adaptive, funcționează bine împreună cu alte componente pe orice ecran. Acest script este într-adevăr foarte ușor de utilizat. LightLayer oferă control asupra multor parametri: culoarea și opacitatea fundalului, poziția casetei luminoase, tranzițiile de deschidere/închidere și multe alte caracteristici personalizabile.

Strip este o casetă lightbox care se extinde doar la o parte a paginii. Acest lucru îl face mai puțin intruziv și vă permite să interacționați cu alte elemente ale paginii pe ecrane mai mari; Pe dispozitivele mobile, caseta de lumină are un aspect clasic. Strip folosește JQuery și este acceptat în toate browserele majore.

Fluidbox este un plugin jQuery conceput pentru a oferi o casetă de lumină discretă, receptivă, ideală pentru imagini de înaltă rezoluție. Funcționează excelent pe dispozitive mobile și poate fi folosit și pe ecrane cu rezoluție mai mare pentru o imagine frumoasă.

Featherlight este un plugin foarte ușor, cu 400 de linii de JavaScript, 100 de linii de CSS și o dimensiune mai mică de 6 Kb. Lightbox inteligent, receptiv, acceptă imagini, AJAX și iframe în mod implicit. De asemenea, îl puteți adapta în funcție de nevoile dvs. Featherlight funcționează în IE8+, toată lumea browsere moderneși platforme mobile.

Yalb înseamnă Yet Another Lightbox - dar nu este. Yalb vine cu un set mare de interfețe, inclusiv evenimente personalizate care vă permit să determinați starea acestuia (deschis, închis).

→ Lightbox pe jQuery

Articolul oferă un exemplu de lansare a pluginului Lightbox Gallery în jquery și aici puteți descărca o versiune de lucru. Iată cum funcționează de fapt:

Lucrul bun despre această implementare lightbox este că poate fi controlată printr-un hash de configurare. Pornește foarte ușor. Pentru a rula pluginul, aveți nevoie de orice bibliotecă jquery, începând cu versiunea 1.2.6, plugin-ul în sine și un fișier de stil. În arhivă, chiar mai jos, este versiunea finalizată. Descărcați, extrageți și deschideți fișierul index.html în orice browser. Ar trebui să funcționeze.

Sper că toată lumea înțelege cum să-l lanseze. Vă voi spune doar cum să gestionați setările lightbox. Permiteți-mi să observ imediat că pluginul nu funcționează în IE 6 și, prin urmare, setăm condiția de inițializare pentru toată lumea, cu excepția „măgarului”. Următorul încă unul punct important: $(document).ready , deoarece inițializarea nu va funcționa până când arborele DOM este gata. Procesul de inițializare în sine decurge astfel:

$("#galeria a").lightbox();

Exemplu de cod sursă:

dacă (!(navigator.userAgent.indexOf("MSIE 6") >= 0))( $(document).ready(function())( $("#galeria a").lightbox(); $.Lightbox. construct (( „viteză”: 500, „show_linkback”: adevărat, „keys”: ( închidere: „q”, anterioară: „z”, următor: „x”), „opacitate”: 0,8, text: ( imagine: „ Poza”, din: „de la”, close: „Închide”, closeInfo: „Puteți încheia vizualizarea făcând clic în afara imaginii.”, ajutor: ( închidere: „”, interacționează: „Ajutor interactiv” ), despre: ( text: "", titlu: "", link: "/index.shtml" ) ), fișiere: ( imagini: ( anterior: "/demo/img/jquery-lightbox/prev.gif", următorul: "/demo/ img/ jquery-lightbox/next.gif", gol: "/demo/img/jquery-lightbox/blank.gif", se încarcă: "/demo/img/jquery-lightbox/loading.gif" ) ) )); ) );)

viteza - viteza efectului de deschidere si inchidere a fotografiei, in milisecunde.

Tastele parametrilor hash: close, prev și next sunt tastele care oferă control alternativ pentru vizualizarea galeriei.

opacitate - transparența fundalului întunecat. Acceptă valori de la 0 la 1. Culoarea de fundal poate fi schimbată în fișierul de stil.

Parametrii hash-ului imaginilor, imbricate în hash-ul fișierelor, sunt căile către imagini pentru fundal, animația indicatorului de încărcare și butoanele înapoi-înainte.

De asemenea, puteți schimba etichetele de navigare în hash-ul textului.

Cea mai populară bibliotecă este Lightbox Javascript, pe care o folosim de mulți ani pe desktop-uri, dar nu și pe platformele mobile.

Vă prezint 14 plugin-uri Lightbox cu suport pentru platforme mobile.

PhotoSwipe este un plugin ușor, activat pentru atingere și, cel mai important, modular, care vă permite să eliminați părțile inutile care nu sunt necesare. Funcționează bine în browsere mobile. Puteți schimba imaginile cu o glisare a degetului ca și cum ar fi aplicație standard, cu tranziții line.

Biblioteci necesare: niciuna.
Suport browser: IE8+, Chrome, Firefox, Safari, Opera și alte browsere mobile.
Licență: Licență MIT

Magnific Popup este un alt plugin lightbox dezvoltat de același autor ca PhotoSwipe, Dmitry Semenov. Pluginul vine ca un plugin JQuery/Zepto și include, de asemenea, suportul căruia îi lipsește PhotoSwipe, cum ar fi suport video, hărți și Ajax. Aceasta este o alternativă excelentă pentru cei care preferă să aibă mai multe opțiuni la îndemână.

Biblioteci necesare: JQuery 1.9.1+ sau Zepto.js
Suport browser: IE7 (parțial), .
Licență: Licență MIT

Swipebox este un plugin JQuery cu suport pentru gesturi tactile pentru platformele mobile. De asemenea, acceptă videoclipuri YouTube și Vimeo, pe lângă imagini. Swipebox este ușor de instalat și are mai multe opțiuni pentru a-și personaliza configurarea. Cred că Swipebox este un plugin lightbox prea aglomerat pentru cei care nu cunosc JavaScript.

Inițial, pluginul Lightbox nu este inclus în Bootstrap. Lightbox pentru Bootstrap remediază acest lucru. Dacă utilizați Bootstrap, este foarte recomandat să utilizați această bibliotecă. Pluginul se integrează bine cu Bootstrap.

Biblioteci necesare: modulul JQuery și Bootstrap
Suport browser: IE8+, Chrome, Firefox, Safari și Opera
Licență: licență GNU

Nivo Lightbox este un plugin pentru lightbox extrem de personalizabil. O varietate de opțiuni vă permit să schimbați aspectul. De exemplu: tema, animația aspectului și tipul de navigare.

Biblioteci necesare: JQuery
Suport browser:
Licență: Licență MIT

ImageLightbox este un plugin lightbox simplu, fără bibelouri. Este folosit doar în scopuri de imagine, de unde și numele. Nici videoclipurile, nici alte tipuri nu sunt acceptate. De asemenea, nu necesită nici un marcaj HTML suplimentar; etichetă e suficient. Acest plugin este ușor de utilizat.

Biblioteci necesare: JQuery
Suport browser: IE9+, Chrome, Firefox, Safari și Opera
Licență: nedefinită

Un alt plugin lightbox fără suplimente. Biblioteca cântărește doar 2 kiloocteți și funcționează doar cu imagini. Acesta este pluginul perfect dacă dezvoltați doar pentru ultima versiune browser și nu este nevoie să accepte video sau alte formate.

Biblioteci necesare: nu
Suport browser: Internet Explorer 10+, Chrome, Firefox, Safari și Opera
Licență: Licență MIT

Lightcase este un plugin excelent pentru lightbox. Acceptă mai multe tipuri de animații, cum ar fi: fade, elastic, zoom și scrolling. Mai mult decât atât, acceptă și diverse tipuri de media, inclusiv Youtube Embed, HTML Video, SWF și Input Forms.

Biblioteci necesare: JQuery
Suport browser: IE9+, Chrome, Firefox, Safari și Opera
Licență: licență GPL

Featherlight este un plugin de bază, cântărind 6 kiloocteți pentru dezvoltatorii experimentați și include doar elementele esențiale. Dacă aveți nevoie de un efect lightbox, de exemplu, pentru un grup de imagini dintr-o galerie, puteți activa extensia galeriei. De asemenea, puteți dezvolta propria extensie de plugin pe care să o utilizați în proiectele dvs.

Biblioteci necesare: JQuery
Suport browser: IE8+, Chrome, Firefox, Safari și Opera
Licență: Licență MIT

LightLayer este un plugin lightbox ușor de utilizat. Pluginul acceptă multe opțiuni, metode JavaScript personalizate și evenimente personalizate. Pluginul funcționează cu imagini, videoclipuri, hărți.

Biblioteci necesare: JQuery
Suport browser: IE9+, Chrome, Firefox, Safari și Opera
Licență: Licență MIT

LightGallery, un alt plugin lightbox cu o cantitate mare funcții. Include mai mult de 20 de opțiuni pentru a personaliza diverse detalii ale efectelor lightbox.

Biblioteci necesare: JQuery
Suport browser: IE7+, Chrome, Firefox, Safari, Opera, iOS, Android și Windows Phone
Licență: Licență MIT

Pluginul Fluidbox lightbox funcționează cu imagini. Include suport pentru diferite afișaje, inclusiv imagini plutitoare, imagini cu poziție absolută, imagini cu chenare și umplutură și galerii. Există și un plugin WordPress.

Biblioteci necesare: JQuery
Suport browser: IE9+, Chrome, Firefox, Safari, Opera
Licență: Licență MIT

StripJS este un plugin unic pentru lightbox. În loc să suprapună imaginea, modulul lightbox alunecă cu imaginea dintr-o parte în alta, astfel încât imaginea să nu blocheze tot conținutul. StripJS acceptă atât imagini, cât și videoclipuri.

Biblioteci necesare: JQuery
Suport browser: IE7+, Chrome, Firefox, Safari, Opera, IOS 5+ și Android 3+
Licență: Creative Commons BY-NC-ND 3.0 License