Web dizajn i optimizacija za tražilice. Opis jQuery Lightbox Lightbox galerije

Skripta organizira gledanje slika u skočnom prozoru. Gledanje se može organizirati po jednoj slici ili po galeriji, listajući slike u skočnom prozoru.
Najjednostavnija i najbrža skripta za instalaciju. Instalira se i konfigurira u samo nekoliko minuta.

Kako instalirati lightbox Preuzmite arhivu, raspakirajte je i postavite na poslužitelj.
Zatim ugradite skriptu u svoju web stranicu. U html kod napišite kod na stranici

I zadnji korak. Izlaz slika.
Ispisujete slike ovako:

Standardni kod za prikaz male slike i poveznice na veliku sliku, poveznici su dodana samo dva parametra.
Evo primjera ovog koda - kada kliknete na sliku, iskoči velika slika.

Parametar data-lightbox="image" odgovoran je za ovaj efekt.
Ako imate mnogo slika na stranici, možete otvoriti slike bez pomicanja u skočnom prozoru ili možete kombinirati slike i one će se pomicati u skočnom prozoru.
Za kombiniranje slika morate koristiti jedno ime za svaku grupu slika

Kao što vidite, sve slike se mogu pomicati u skočnom prozoru, budući da je data-lightbox isti za sve.
Ako želite razdvojiti slike kako se ne bi pomicale, upotrijebite ovakav kod

Sada se svaka slika otvara zasebno, odnosno ne postoji mogućnost skrolanja na sljedeću.

Što je u moderniziranoj verziji Gumb za povećanje slike u pravu veličinu. To možete vidjeti u svim primjerima. Nema ga u originalnoj verziji
U samoj skripti postoji postavka, možete isključiti ovaj gumb.

I drugi dodatak koji malo tko treba je uklanjanje duplih slika.
Onemogućen je prema zadanim postavkama, ali ga možete omogućiti izravno u skripti, na istom mjestu gdje je omogućen gumb u stvarnoj veličini.
U normalnoj uporabi skripte ovu funkciju Donosi samo štetu, može se koristiti samo u potpuno bezizlaznim situacijama.

Primijetite da su tri veze prazne, što znači da povezuju na velike slike, ali ništa između oznaka, a jedna je veza ispunjena slikom.
Kao rezultat toga, samo jedna slika je vidljiva u pregledniku, kada kliknete na nju, otvara se veća slika i sve slike iz praznih poveznica se povlače prema gore i možete listati po njoj.
A pogledaj ovdje, u linkovima su dvije identične slike (označene crvenom bojom) i kad skrolaš vidjet ćeš dvije identične slike.
Ako u konkretan primjer Ako omogućite uklanjanje duplikata, neće biti duplikata slika.

Naravno, takva situacija ne bi trebala postojati, zašto prikazati dvije identične slike, a zatim ih izbrisati. Ali čudno, naišao sam na ovu situaciju: u jednoj internetskoj trgovini trebale su biti prikazane duplikate fotografija za proizvod (bilo je pametnih zamjena fotografija kroz skripte), a kada su se gledale kroz lightbox, duplikati fotografija izgledali su vrlo pogrešno. Ovdje je korisno uklanjanje duplikata.

Komentari

11.12.2014 Viktore
Scenarij je jako dobar. Možete čak opisati sliku koristeći data-title. Ali imao sam problem, imao sam skriptu na stranici koja je gurnula blok u stranu kada sam povezao ovu skriptu, nestala je. Štoviše, nestaje ako su js skripte povezane. Mislio sam da je konfliktno zbog verzije, ali ne zbog njih.

23.05.2015 Viktor
Ne radi mi kada
href="http://ikk.secrieru.ru/products/Gallery/000039.jpg?ver=20150523142822"
izgleda ovako. Bez?ver=20150523142822
djela

25.05.2015 kaha
hvala puno

29.06.2015 Andrej
Hvala vam puno na vašem radu! Sve je radilo gotovo prvi put)

26.08.2015 Aleksandar
Pokušao sam različite analoge. Ovaj je odmah postao bez sukoba. povećati na original velicina je gut.Kada bih misem uzimao i pomicao polje slike bio bi totalni haos

01.11.2015 Igor
Zdravo!
Sjajna galerija. Hvala puno.
Samo ovo pitanje:
U gornjem primjeru (3 slike), slike su prikazane u petlji. Ali u preuzetoj verziji lightbox-2.7.1 ova funkcija ne radi. Kada gledate posljednju sliku, gumb se više ne pojavljuje.
Recite mi, molim vas, što bi mogao biti razlog?

14.11.2015 Anton

15.11.2015 Anton
Na iOS-u i Androidu zatamnjivanje ekrana ne pokriva cijelu stranicu!!! u čemu bi mogao biti problem. U običnom LightBoxu - sve je u redu!

30.03.2016 Anton
Zdravo!
Je li moguće otvoriti sliku u većoj rezoluciji?

18.11.2016 Jura
Hvala puno! Sve radi savršeno!

05/04/2017 Igor
Hvala puno na scenariju! Već dugo tražim nešto slično i jednostavno za montažu.
Samo se iz nekog razloga ispod mojih fotografija pojavljuju čudni natpisi RR·RẑR±SĐR°R¶RµRẐRëRµ 8 ReR· 8

Možda treba negdje ispraviti kodiranje?

09/12/2017 Barsuk
Gdje si bio prije? Proveo sam cijeli dan pokušavajući shvatiti kako ukloniti duplikate))

Samo jesam početna stranica pregled glavne slike, a na dnu su još manji pregledi dodatnih, zbog toga je bilo duplikata u galeriji.

Mnogo sam puta pregledao razne galerije slika i prikupio opsežnu zbirku spektakularnih dijaprojekcija i dodataka. Lightbox je također dostupan isključivo na CSS3, bez povezivanja dodatnih js biblioteka. No, vrijeme ne stoji, korisnici sve više koriste razne mobilne uređaje za surfanje internetom, što znači da prilagodljivost web elemenata, a posebice fotogalerija s “ ” efektom postaje jedan od prioriteta na koje web dizajneri i programeri trebaju obratiti pozornost. do.

Predstavljam još jedan izbor od 15 prilagodljivih jQuery dodataka koji su prijateljski nastrojeni s preglednicima stolnih računala i savršeno se uklapaju u zaslone raznih mobilnih uređaja (prijenosna računala, pametni telefoni, tableti itd.).

Pogledajte demo na web stranicama programera, preuzmite dodatak koji vam se sviđa i stvarajte, stvarajte, stvarajte...

1. iLightbox

iLighbox je lagani jQuery Lightbox dodatak s podrškom za širok raspon različite vrste datoteke: slike, video zapisi, Flash/SWF, Ajax sadržaj, okviri i ugrađene karte. Ovaj dodatak također dodaje gumbe društvene mreže, koji korisnicima omogućuje dijeljenje sadržaja putem Facebooka, Twittera ili Reddita. Izvrsna prilika za organiziranje spektakularnih projekcija slajdova, galerija slika i videa, uz gledanje u normalnom i cijelom zaslonu.

iLighbox radi prilično brzo i kada se gleda na Mobilni uredaji, više nego korektno prikazuje obrađen sadržaj. Između ostalog, pomoću ovog dodatka možete jednostavno implementirati prikaz blokova informacija poput modalnog prozora.

Ovisnost: jQuery
Podrška za preglednike: IE7+, Chrome, Firefox, Safari i Opera
Licenca: Vrag ga zna)))

2. SwipeBox

Swipebox je jQuery dodatak s podrškom za ekrani osjetljivi na dodir mobilne platforme. Osim slika, dodatak podržava ugrađene videozapise s Youtubea i Vimea. Swipebox je vrlo lako priključiti na bilo koji projekt; dodatak ima nekoliko intuitivnih opcija za prilagodbu njegove funkcionalnosti i ponašanja. Na web stranici programera nalazi se detaljna dokumentacija o povezivanju i korištenju dodatka, bez nepotrebnog zezanja, sve je točno, tako da mislim da neće biti teško shvatiti što, gdje i zašto.

Ovisnost: jQuery
Podrška za preglednike: IE9+, Chrome, Safari, Firefox, Opera, IOS4+, Android i Windows Phone
Licenca: Nije određeno, možda ćete imati sreće)))

3.MagnificPopup

Dugo poznati i dobro dokazani dodatak za svjetlosni okvir temeljen na jQuery ili Zepto.js. Autor dodatka je Dmitry Semenov, koji je također programer dodatka PhotoSwipe, o kojem ću govoriti u nastavku. Dolazi kao jQuery/Zepto dodatak, ima više dovoljno mogućnosti nedostaju u PhotoSwipeu, kao što su video podrška, prikaz karata i Ajax sadržaja, implementacija modalnih prozora s ugrađenim obrascima. Po svim kriterijima, ovo je još jedan odličan alat za web programere. Postoji zaseban dodatak za WordPress i detaljna dokumentacija o postavljanju i korištenju. Jedina depresivna stvar je nedostatak dokumentacije na ruskom, sudeći po imenu i prezimenu, autor je izgleda Rus, nikad nije shvatio da li je to štetno, ili zbog umišljene svijesti o vlastitoj sofisticiranosti, ali bljak. Pa, dobro, tko to treba shvatiti, također nismo kuhali čaj meko kuhan))).

Zavisnost: jQuery 1.9.1+ ili Zepto.js
Podrška za preglednik: IE7 (djelomično), IE8+, Chrome, Firefox, Safari i Opera
Licenca: MIT licenca

4.PhotoSwipe

Zavisnost: Javascript ili jQuery
Podrška za preglednik
Licenca: MIT licenca

11.FeatherLight

6 kbit lightbox dodatak za više ili manje pametne programere, opremljen svim najpotrebnijim funkcijama. Osim što podržava sve uobičajene vrste sadržaja (tekst, slike, iframe, Ajax), postoji mogućnost povezivanja dodatnih, a možete i razviti vlastiti nativno proširenje za ovaj dodatak, koji će u potpunosti zadovoljiti vaše potrebe prilikom izrade novog projekta. Kako cijela ta stvar (razvoj proširenja) funkcionira, nisam baš istražio, ali oni koji instaliraju ovaj dodatak, mislim da će shvatiti))).

Ovisnost: jQuery
Podrška za preglednike: IE8+, Chrome, Firefox, Safari i Opera
Licenca: MIT licenca

12. LightGallery

LightGallery je višenamjenski dodatak za lightbox s mnogo dodatne mogućnosti. Dolazi s više od 20 opcija za prilagodbu najsitnijih detalja Lightboxa. Ovdje ima svega, dobro, ili gotovo sve)). Cijela galerija slika s uredno posloženim sličicama, navigacijskim elementima i pomicanjem sličica. Jednostavno HTML označavanje u obliku neuređenog popisa

koristeći CSS

Ovisnost: jQuery
Podrška za preglednike: IE7+, Chrome, Firefox, Safari, Opera, iOS, Android i Windows Phone
Licenca: MIT licenca

Neobično, čak bih rekao: neobična implementacija lightboxa, odnosno neobična prezentacija sadržaja, kada se slika ili video, u dizajnu lightboxa, pojavi s desne strane, ne ispunjavajući cijeli ekran, već samo određenu veličinu sliku ili video u punoj veličini. Na velikim zaslonima ovaj je pristup razumljiv; interakcija sa stranicom ostaje moguća. Na malim ekranima mobilnih uređaja, sav ovaj inovativni dizajn glatko se pretvara u klasični “lightbox”. Ideja je zanimljiva, pogledajte demo, možda će netko dodati takvu kreativnost.

Ovisnost: jQuery
Podrška za preglednike: IE7+, Chrome, Firefox, Safari, Opera, iOS 5+ i Android 3+
Licenca: licenca Creative Commons BY-NC-ND 3.0

Lightbox plugin jednostavan za korištenje koji ide dobro uz bilo koji projekt i također dobro izgleda na bilo kojem zaslonu. Dodatak LightLayer omogućuje kontrolu nad mnogim postavkama, poput promjene boje pozadine i stupnja prozirnosti, položaja osnovnog bloka, odabira prijelaznih efekata pri otvaranju/zatvaranju, funkcijama kojima korisnici mogu samostalno upravljati. Dodatak odlično funkcionira s vanjskim sadržajem web stranice, ugrađenim video playerima i kartama.

Ovisnost: jQuery
Podrška za preglednike: IE9+, Chrome, Firefox, Safari i Opera
Licenca: MIT licenca

Fluidbox je dodatak za lightbox isključivo za slike. Broj mogućih varijacija u prezentaciji slike doista je impresivan. Dodatak izvrsno funkcionira sa slikama u različitim dizajnima, uključujući plutajuće slike, slike s apsolutnim pozicioniranjem, slike i fotografije uokvirene i uvučene, s pojedinačnim slikama i kombinirane u galeriju. Općenito, to je gubljenje vremena, još uvijek nije moguće opisati sve mogućnosti dodatka u kratkoj prezentaciji, pa je bolje pogledati demo, zavrtjeti ga, okrenuti ga, a mislim da će se mnogima svidjeti ovaj dodatak .

Ovisnost: jQuery
Podrška za preglednike: IE9+, Chrome, Firefox, Safari, Opera
Licenca: MIT licenca

To je vjerojatno sve! nadam se ovaj kratki osvrt, pomoći će vam razumjeti hrpu ponuđenih proizvoda za web razvoj. Napominjem da nisam koristio sve dodatke predstavljene u izboru na radnim projektima, većinu sam testirao na testnim stranicama ili na radionici, pa ako se pojave neka pitanja, najvjerojatnije ćemo ih zajedno riješiti, a zajedno, kao i uvijek, uspjet ćemo.

Tražite li odgovarajući ruski predložak za svoje potrebe? U ovom slučaju, vjerojatno biste trebali posjetiti TemplateMonster tržište. Iz jednostavnog razloga jer se stranica pojavila nedavno novi odjeljakšablone Sada se svaki korisnik može upoznati sa zbirkom koja će se ažurirati i ažurirati. Tekstovi za predloške pisani su rukom. Ali to nije jedina prednost podataka. gotova rješenja. Uostalom, u njihovim paketima možete pronaći sve što će vam olakšati rad na razvoju online projekta, uključujući i vizualni editor.

Sa svim poštovanjem, Andrew

Zaista je super što nam je dostupno sve više najnovijih web tehnologija uz pomoć kojih će nam posao biti znatno lakši. Modalni prozori – funkcionalni element za prikazivanje bilo koje vrste HTML sadržaja, usmjeren na stvaranje dizajna i sučelja prilagođenog korisniku.

U ovoj smo recenziji sastavili popis JQuery biblioteka i skripti za izradu svjetlosnih okvira koji će pomoći programerima i dizajnerima u stvaranju još boljih i profesionalnijih web stranica.

Možete jednostavno dodati donje skripte na svoju web stranicu. Dakle, bez daljnjeg odlaganja, prijeđimo na stvar i pogledajmo ove super jQuery lightbox biblioteke koje možete dodati svom arsenalu.

PhotoSwipe je HTML galerija fotografija koja se temelji na CSS-u i JavaScriptu i dizajnirana posebno za mobilne uređaje. Prilikom razvoja autori su kao model uzeli usluge pregledavanja slika za IOS i Google mobilne uređaje. PhotoSwipe ima poznato i intuitivno sučelje koje olakšava rad sa slikama na mobilnom mjestu.

Podržane su sve osnovne funkcije: pomicanje na sljedeću ili prethodnu sliku, povećavanje, povlačenje, smanjivanje ili zatvaranje i druge.

Swipebox – JQuery dodatak za desktop računala, pametne telefone i tablete. Podržava dodirne kontrole za mobilne uređaje, navigaciju tipkovnicom za stolne uređaje, CSS prijelaze s rezervnim JQuery kontrolama i prilično ga je lako prilagoditi.

Dodatak je testiran na Chromeu, Safariju, Firefoxu, Operi, Internet Explorer 8+, iOS4+, Android, Windows Phone. Izdano pod licencom MIT-a.

iLightBox olakšava stvaranje vrlo lijepih responsive modalni prozori koristeći JQuery. Kombinirajući podršku za širok raspon medijskih sadržaja sa sjajnim maskama i API-jem prilagođenim korisniku, iLightBox nastoji učiniti lightbox što savršenijim. iLightBox omogućuje prikaz preko cijelog zaslona, maske kompatibilne s Retina-om, upravljanje događajima dodirom, integraciju YouTubea i Vimea za HTML5 video i moćan JavaScript API. Dodatak ima besplatna podrška i ažuriranja verzija.

Image Lightbox je minimalistički, proširiv i prilagodljiv dodatak za IOS, Android i Windows Phone. Sljedeću sliku možete jednostavno učitati pomoću tipkovnice zahvaljujući korištenju CSS transformacija i prijelaza.

Magnific Popup je besplatan odgovarajući jquery dodatak koji je usmjeren na pružanje najboljeg iskustva između korisnika i uređaja. Većina dodataka za lightbox zahtijeva da definirate veličinu prozora pomoću JS-a. U Magnific Popupu možete koristiti relativne jedinice kao što je EM ili promijeniti veličinu okvira za osvjetljavanje pomoću CSS medijskih upita.

Nivo Lightbox je fleksibilni dodatak za lightbox. Postoji mnogo opcija koje možete izabrati tako da ih možete jednostavno promijeniti izgled svjetleća kutija. Na primjer, promijenite temu, efekt prijelaza i način navigacije.

Lightcase je fleksibilan, responzivan i proširiv dodatak za lightbox razvijen s koristeći JQuery. Savršeno radi u svim popularnim preglednicima kao što su Internet Explorer 7+, Firefox, Opera, Webkit i drugi. Dodatak podržava fotografije, video, HTML5 video, Iframe, SWF i AJAX pozive.

LightLayer je skripta za prikazivanje prilagodljivih svjetlosnih okvira, dobro funkcionira zajedno s drugim komponentama na bilo kojem zaslonu. Ova skripta je stvarno vrlo jednostavna za korištenje. LightLayer omogućuje kontrolu nad mnogim parametrima: bojom i neprozirnošću pozadine, položajem okvira za osvjetljavanje, prijelazima otvaranja/zatvaranja i mnogim drugim prilagodljivim značajkama.

Strip je lightbox koji se proširuje samo na dio stranice. To ga čini manje nametljivim i omogućuje vam interakciju s drugim elementima stranice na većim zaslonima; Na mobilnim uređajima lightbox ima klasičan izgled. Strip koristi JQuery i podržan je u svim glavnim preglednicima.

Fluidbox je jQuery dodatak dizajniran za pružanje nenametljivog, responzivnog okvira za svjetlo koji je idealan za slike visoke rezolucije. Izvrsno radi na mobilnim uređajima, a može se koristiti i na zaslonima veće razlučivosti za ispis prekrasne slike.

Featherlight je vrlo lagani dodatak s 400 redaka JavaScripta, 100 redaka CSS-a i veličine manje od 6 Kb. Pametan, responzivni lightbox, podržava slike, AJAX i iframe prema zadanim postavkama. Također ga možete prilagoditi svojim potrebama. Featherlight radi u IE8+, svima moderni preglednici i mobilne platforme.

Yalb je kratica za Yet Another Lightbox - ali nije. Yalb dolazi s velikim skupom sučelja, uključujući prilagođene događaje koji vam omogućuju da odredite njegovo stanje (otvoreno, zatvoreno).

→ Lightbox s jQueryjem

U članku je prikazan primjer pokretanja dodatka galerije lightboxa u jqueryju, a ovdje možete preuzeti radnu verziju. Ovako to zapravo funkcionira:

Dobra stvar kod ove implementacije lightboxa je da se njime može upravljati putem hash konfiguracije. Pokreće se vrlo lako. Za pokretanje dodatka potrebna vam je bilo koja biblioteka jquery, počevši od verzije 1.2.6, sam dodatak za okvir za osvjetljavanje i datoteka stila. U arhivi, odmah ispod, nalazi se gotova verzija. Preuzmite, izdvojite i otvorite datoteku index.html u bilo kojem pregledniku. Trebalo bi raditi.

Nadam se da svi razumiju kako ga pokrenuti. Samo ću vam reći kako upravljati postavkama lightboxa. Odmah da napomenem da dodatak ne radi u IE 6, pa smo postavili uvjet inicijalizacije za sve osim za "magarca". Sljedeći još jedan važna točka: $(document).ready, jer inicijalizacija neće raditi dok DOM stablo ne bude spremno. Sam proces inicijalizacije ide ovako:

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

Primjer izvornog koda:

if (!(navigator.userAgent.indexOf("MSIE 6") >= 0))( $(document).ready(function())( $("#gallery a").lightbox(); $.Lightbox. konstrukcija (( "brzina": 500, "show_linkback": istina, "ključevi": ( zatvori: "q", prethodni: "z", sljedeći: "x"), "neprozirnost": 0,8, tekst: ( slika: " Slika", od: "od", close: "Zatvori", closeInfo: "Možete završiti gledanje klikom izvan slike.", pomoć: ( zatvori: "", interakcija: "Interaktivna pomoć"), o: ( tekst: "", naslov: "", veza: "/index.shtml" ) ), datoteke: ( slike: ( prethodni: "/demo/img/jquery-lightbox/prev.gif", sljedeći: "/demo/ img/ jquery-lightbox/next.gif", prazno: "/demo/img/jquery-lightbox/blank.gif", učitavanje: "/demo/img/jquery-lightbox/loading.gif" ) ) )); ) );)

brzina - brzina efekta otvaranja i zatvaranja fotografije, u milisekundama.

Tipke parametara raspršivanja: close, prev i next su tipke koje pružaju alternativnu kontrolu za gledanje galerije.

neprozirnost - prozirnost zatamnjene pozadine. Prihvaća vrijednosti od 0 do 1. Boja pozadine može se promijeniti u datoteci stila.

Parametri hash-a slika, ugniježđeni u hash-u datoteka, su staze do slika za pozadinu, animacija indikatora učitavanja i gumbi natrag-naprijed.

Također možete promijeniti navigacijske oznake u hash tekstu.

Najpopularnija biblioteka je Lightbox Javascript, koju već dugi niz godina koristimo na stolnim računalima, ali ne i na mobilnim platformama.

Predstavljam vam 14 Lightbox dodataka s podrškom za mobilne platforme.

PhotoSwipe je lagani dodatak s omogućenim dodirom i što je najvažnije modularan dodatak koji vam omogućuje uklanjanje nepotrebnih dijelova koji vam nisu potrebni. Djeluje dobro u mobilni preglednici. Slike možete mijenjati prelaskom prsta kao da jesu standardna aplikacija, s glatkim prijelazima.

Potrebne biblioteke: nema.
Podrška za preglednike: IE8+, Chrome, Firefox, Safari, Opera i drugi mobilni preglednici.
Licenca: MIT licenca

Magnific Popup još je jedan dodatak za lightbox kojeg je razvio isti autor kao PhotoSwipe, Dmitry Semenov. Dodatak dolazi kao JQuery/Zepto dodatak i također uključuje podršku koja PhotoSwipe nedostaje, kao što su video, karte i Ajax podrška. Ovo je izvrsna alternativa za one koji više vole imati više opcija nadohvat ruke.

Potrebne biblioteke: JQuery 1.9.1+ ili Zepto.js
Podrška preglednika: IE7 (djelomično), .
Licenca: MIT licenca

Swipebox je JQuery dodatak s podrškom za geste dodira za mobilne platforme. Također podržava Youtube i Vimeo videozapise uz slike. Swipebox je jednostavan za instalaciju i ima nekoliko opcija za prilagodbu postavki. Mislim da je Swipebox previše pretrpan dodatak za lightbox za one koji ne znaju JavaScript.

U početku Lightbox dodatak nije uključen u Bootstrap. Lightbox za Bootstrap to popravlja. Ako koristite Bootstrap, toplo se preporučuje korištenje ove biblioteke. Dodatak se dobro integrira s Bootstrapom.

Potrebne biblioteke: JQuery i Bootstrap modul
Podrška za preglednike: IE8+, Chrome, Firefox, Safari i Opera
Licenca: GNU licenca

Nivo Lightbox je visoko prilagodljiv dodatak za okvir za osvjetljavanje. Različite opcije omogućuju vam promjenu izgleda. Na primjer: tema, animacija izgleda i vrsta navigacije.

Potrebne biblioteke: JQuery
Podrška za preglednik:
Licenca: MIT licenca

ImageLightbox jednostavan je dodatak za okvir za osvjetljavanje bez dodataka. Koristi se samo u slikovne svrhe, otuda i naziv. Ni video niti druge vrste nisu podržane. Također ne zahtijeva nikakve dodatne HTML oznake; označiti dovoljno je. Ovaj dodatak je jednostavan za korištenje.

Potrebne biblioteke: JQuery
Podrška za preglednike: IE9+, Chrome, Firefox, Safari i Opera
Licenca: Nije definirana

Još jedan dodatak za lightbox bez dodataka. Knjižnica je teška samo 2 kilobajta i radi samo sa slikama. Ovo je savršen dodatak ako razvijate samo za Najnovija verzija preglednik i nema potrebe za podrškom za video ili druge formate.

Potrebne knjižnice: br
Podrška za preglednike: Internet Explorer 10+, Chrome, Firefox, Safari i Opera
Licenca: MIT licenca

Lightcase je izvrstan dodatak za okvir za osvjetljavanje. Podržava nekoliko vrsta animacija, kao što su: blijeđenje, elastičnost, zumiranje i pomicanje. Štoviše, također podržava razne vrste medija uključujući Youtube Embed, HTML Video, SWF i Input Forms.

Potrebne biblioteke: JQuery
Podrška za preglednike: IE9+, Chrome, Firefox, Safari i Opera
Licenca: GPL licenca

Featherlight je osnovni dodatak, težak 6 kilobajta za pametne programere i uključuje samo najvažnije. Ako vam je potreban svjetlosni efekt, na primjer, za grupu slika u galeriji, možete omogućiti proširenje galerije. Također možete razviti vlastito proširenje dodatka za korištenje u svojim projektima.

Potrebne biblioteke: JQuery
Podrška za preglednike: IE8+, Chrome, Firefox, Safari i Opera
Licenca: MIT licenca

LightLayer je dodatak za lightbox koji je jednostavan za korištenje. Dodatak podržava mnoge opcije, prilagođene JavaScript metode i prilagođene događaje. Dodatak radi sa slikama, videozapisima, kartama.

Potrebne biblioteke: JQuery
Podrška za preglednike: IE9+, Chrome, Firefox, Safari i Opera
Licenca: MIT licenca

LightGallery, još jedan dodatak za lightbox s veliki iznos funkcije. Uključuje više od 20 opcija za prilagodbu raznih detalja efekata lightboxa.

Potrebne biblioteke: JQuery
Podrška za preglednike: IE7+, Chrome, Firefox, Safari, Opera, iOS, Android i Windows Phone
Licenca: MIT licenca

Dodatak Fluidbox lightbox radi sa slikama. Uključuje podršku za različite prikaze, uključujući plutajuće slike, slike apsolutnog položaja, slike s obrubima i ispunama te galerije. Tu je i dodatak za WordPress.

Potrebne biblioteke: JQuery
Podrška za preglednike: IE9+, Chrome, Firefox, Safari, Opera
Licenca: MIT licenca

StripJS je jedinstveni lightbox dodatak. Umjesto preklapanja slike, lightbox modul klizi sa slikom s jedne na drugu stranu tako da slika ne blokira sav sadržaj. StripJS podržava i slike i videozapise.

Potrebne biblioteke: JQuery
Podrška za preglednike: IE7+, Chrome, Firefox, Safari, Opera, IOS 5+ i Android 3+
Licenca: licenca Creative Commons BY-NC-ND 3.0