Reaktyvi šviesdėžės galerija. Web dizainas ir optimizavimas paieškos sistemoms

„Lightbox“ yra „jQuery“ papildinys, naudojamas vaizdui ar bet kokiam kitam turiniui rodyti specialiai sukurtame lange, kuris paprastai rodomas permatomame tamsesniame pagrindinio puslapio turinio viršuje.

Prieš įdiegdami papildinį puslapyje ir jį nustatydami, pažvelkime į pavyzdžius:

Darbo su „Lightbox“ pradžia

Atsisiųskite naujausią papildinio versiją (taip pat galima per Bower: bower install lightbox2 --save). Po to išpakuokite zip failą ir pažiūrėkite į aplanke esantį pašalintą darbo pavyzdį pavyzdžių.

Pasiruošę įdiegti „Lightbox“ savo puslapyje? Pradėkite sujungdami CSS ir Javascript. Galite paimti abu šiuos failus iš aplanko raj. Įklijuokite šį kodą tarp savo tinklalapio žymų head

Įterpkite šį kodą, jungiantį papildinį, prieš uždarymo turinio žymą:

Įsitikinkite, kad taip pat įkeltas jQuery, kurio reikalauja Lightbox. Jei puslapyje jau naudojate JQuery (reikia JQuery 1.7 ar naujesnės versijos), įsitikinkite, kad jis įkeliamas prieš lightbox.js. Jei neturite įgalintos „jQuery“, naudokite dist/js/lightbox-plus-jquery.js, kurioje jau yra ši biblioteka, arba atsisiųskite naujausią versiją iš biuro. svetainę. Įsitikinkite, kad keturi vaizdai, išvardyti lightbox.css vietą nurodytoje vietoje. Galite fotografuoti iš aplanko /dist/images.

Dabar pereikime prie HTML kodo. Pridėkite duomenų šviesdėžės atributą prie nuorodos, kurioje yra vaizdai, kuriems norime pritaikyti savo papildinį. Atributo reikšmei naudokite pavadinimą, kuris yra unikalus kiekvienam vaizdui. Pavyzdžiui:

1 vaizdas

Jei norite rodyti pavadinimą, pridėkite duomenų pavadinimo atributą. Jei turite susijusių vaizdų grupę, kurią norėtumėte sujungti į rinkinį, reikiamiems vaizdams naudokite tą pačią reikšmę atribute data-lightbox. Pavyzdžiui:

2 vaizdas 3 vaizdas 4

„Lightbox“ nustatymai

Jei norite pakeisti bet kurią iš numatytųjų parinkčių, iškvieskite parinktį: metodas.

lightbox.option(( "resizeDuration": 200, "wrapAround": true ))

AlwaysShowNavOnTouchDevices Numatytoji vertė: false
Jeigu tiesa, tada kairėn ir dešinėn naršymo rodyklės, kurios rodomos ant pelės žymeklio, kai žiūrite vaizdų rinkinį, visada bus matomos įrenginiuose, kuriuose įgalintas jutiklinis
fadeDuration Numatytasis: 500
Laikas, per kurį konteineris išnyksta, milisekundėmis.
fitImagesInViewport Numatytoji vertė: true
Jeigu tiesa, tada proporcingai sumažinkite vaizdo dydį, kad vaizdas tilptų žiūrėjimo srityje. Tai apsaugo vartotoją nuo slinkimo, kad pamatytų visą vaizdą.
maxWidth
Jei nustatyta, vaizdo aukštis bus apribotas iki šios vertės (pikseliais). Kraštinių santykis nebus laikomasi.
maksimalus ūgis
Jei nustatyta, vaizdo plotis bus apribotas iki šios vertės (pikseliais). Kraštinių santykis nebus laikomasi.
positionFromTop Numatytoji vertė: 50
Atstumas nuo peržiūros srities viršaus iki šviesdėžės sudėtinio rodinio (pikseliais).
ResizeDuration Numatytoji vertė: 700
Laikas, per kurį „Lightbox“ sudėtinio rodinio plotis ir aukštis keisis keičiant vaizdus skirtingų dydžių(milisekundėmis).
showImageNumberLabel Numatytasis: true
Jeigu klaidinga, tekstas nurodys esamo vaizdo numerį ir bendrą vaizdų skaičių rinkinyje, pavyzdžiui: „Vaizdas 2 iš 4“.
wrapAround Numatytasis: false
Jeigu tiesa, tada, kai rodomas paskutinis vaizdas, kito vaizdo rodymo mygtukas nedingsta. Paspaudus ant jo bus rodomas pirmasis vaizdas.

Scenarijus organizuoja vaizdų peržiūrą iššokančiame lange. Peržiūra gali būti organizuojama pagal vieną vaizdą arba pagal galeriją, slenkant nuotraukas iššokančiame lange.
Paprasčiausias ir greičiausiai įdiegiamas scenarijus. Įdiegiama ir sukonfigūruojama vos per kelias minutes.

Kaip įdiegti „lightbox“ Atsisiųskite archyvą, išpakuokite jį ir įkelkite į serverį.
Tada įterpkite scenarijų į savo svetainę. IN html kodasįrašykite kodą puslapyje

Ir paskutinis žingsnis. Vaizdų išvedimas.
Išvedate tokius vaizdus:

Standartinis kodas, skirtas rodyti mažą vaizdą ir nuorodą į didelį vaizdą, prie nuorodos pridedami tik du parametrai.
Pateikiame šio kodo pavyzdį – spustelėjus paveikslėlį iššoka didelis vaizdas.

Už šį efektą atsakingas parametras data-lightbox="image".
Jei puslapyje yra daug vaizdų, galite atidaryti vaizdus neslinkdami iššokančiajame lange arba galite sujungti vaizdus ir jie bus slinkti iššokančiajame lange.
Norėdami sujungti vaizdus, reikia naudoti vieną pavadinimą kiekvienai paveikslėlių grupei

Kaip matote, visas nuotraukas galima slinkti iššokančiajame lange, nes duomenų šviesdėžė yra vienoda visiems.
Jei norite atskirti paveikslėlius, kad jie neslinktų, naudokite tokį kodą

Dabar kiekviena nuotrauka atsidaro atskirai, tai yra, nėra galimybės slinkti prie kitos.

Kas yra modernizuotoje versijoje Mygtukas, skirtas padidinti vaizdą iki tikro dydžio. Tai galite pamatyti visuose pavyzdžiuose. Jo nėra originalioje versijoje
Pačiame scenarijuje yra nustatymas, šį mygtuką galite išjungti.

O antrųjų nedaug būtinas papildymas, tai yra pasikartojančių nuotraukų išskyrimas.
Pagal numatytuosius nustatymus jis išjungtas, bet galite jį įjungti tiesiogiai scenarijuje, toje pačioje vietoje, kur įjungtas tikrojo dydžio mygtukas.
Įprastai naudojant scenarijų šią funkciją Jis atneša tik žalą; jį galima naudoti tik visiškai beviltiškose situacijose.

Atkreipkite dėmesį, kad trys nuorodos yra tuščios, tai reiškia, kad jos nukreipiamos į didelius vaizdus, tačiau tarp žymų nieko nėra, o viena nuoroda užpildyta vaizdu.
Dėl to naršyklėje matoma tik viena nuotrauka, ją paspaudus, atsidaro didesnė nuotrauka ir ištraukiamos visos nuotraukos iš tuščių nuorodų ir galima ją slinkti.
Ir pažiūrėkite čia, nuorodose yra dvi identiškos nuotraukos (paryškintos raudonai) ir kai slinksite, pamatysite dvi vienodas nuotraukas.
Jei į konkretus pavyzdys Jei įgalinsite pasikartojančių vaizdų pašalinimą, pasikartojančių vaizdų nebus.

Žinoma, tokios situacijos neturėtų būti, kam rodyti dvi vienodas nuotraukas ir tada jas ištrinti. Bet kaip bebūtų keista, susidūriau su tokia situacija: vienoje internetinėje parduotuvėje prie produkto turėjo būti rodomos pasikartojančios nuotraukos (buvo gudrūs nuotraukų keitimai per scenarijus), o žiūrint per lightbox, pasikartojančios nuotraukos atrodė labai negerai. Čia praverčia dublikatų pašalinimas.

Komentarai

2014-12-11 Viktoras
Scenarijus labai geras. Jūs netgi galite apibūdinti paveikslėlį naudodami duomenų pavadinimą. Bet turėjau problemų, puslapyje turėjau scenarijų, kuris prisijungus pastūmė bloką į šoną šio scenarijaus tai nuo manęs dingsta. Be to, jis išnyksta, jei prijungiami js scenarijai. Maniau, kad tai prieštarauja dėl versijos, bet ne dėl jų.

2015-05-23 Viktoras
Man neveikia kada
href="http://ikk.secrieru.ru/products/Gallery/000039.jpg?ver=20150523142822"
atrodo taip. Be?ver=20150523142822
darbai

2015-05-25 kaha
labai ačiū

2015-06-29 Andrejus
Labai ačiū už jūsų darbą! Viskas pavyko beveik pirmą kartą)

2015-08-26 Aleksandras
Išbandžiau įvairius analogus. Šis iš karto tapo be konfliktų. padidinti iki pradinio dydis yra gut Jei naudočiau pelę fotografuoti ir perkelti nuotraukos lauką, tai būtų visiška netvarka

2015 11 01 Igoris
Sveiki!
Puiki galerija. Labai ačiū.
Tik toks klausimas:
Aukščiau pateiktame pavyzdyje (3 nuotraukos) vaizdai rodomi kilpa. Tačiau atsisiųstoje „lightbox-2.7.1“ versijoje ši funkcija neveikia. Peržiūrint paskutinį vaizdą, mygtukas neberodomas.
Pasakyk man, prašau, kokia gali būti priežastis?

2015-11-14 Antanas

2015-11-15 Antanas
„IOS“ ir „Android“ ekrano užtemimas neuždengia viso puslapio!!! kame gali buti problema. Įprastoje LightBox – viskas gerai!

2016-03-30 Antanas
Sveiki!
Ar įmanoma paveikslėlį atidaryti didesne raiška?

2016-11-18 Jura
Labai ačiū! Viskas veikia puikiai!

2017-05-04 Igoris
Labai ačiū už scenarijų! Jau seniai ieškojau kažko panašaus ir lengvai montuojamo.
Tik kažkodėl po mano nuotraukomis atsiranda keisti užrašai РР·РѕР±СЂР°Р¶РµРЅРёРµ 8 РеР· 8

Gal reikia kur nors taisyti kodavimą?

2017 12 09 Barsuk
Kur tu buvai anksčiau? Visą dieną praleidau bandydamas išsiaiškinti, kaip pašalinti dublikatus))

Aš tiesiog turiu pagrindinis puslapis pagrindinio vaizdo peržiūra, o apačioje dar smulkesnės papildomos peržiūros, dėl to galerijoje atsirado dublikatų.

„Lightbox“ yra maža „JavaScript“ biblioteka, naudojama dideliems vaizdams rodyti viršuje Dabartinis puslapis. Jį lengva montuoti ir viskas veikia šiuolaikinės naršyklės.

Scenarijus leidžia rodyti vaizdus tiek pavienius, tiek su perjungimu iššokančiame lange.

Naudojimo instrukcijos.

I DALIS: Bibliotekos prijungimas.

1. Atsisiųskite ir išpakuokite archyvą su scenarijumi iš čia

2. JS aplanke raskite failus jquery-1.10.2.min.js ir lightbox-2.6.min.js ir nukopijuokite juos į aplanką su savo svetainės scenarijais.

3. Sujunkite šiuos scenarijus su savo puslapiu tarp žymų įrašydami šias eilutes:

4. Aplanke css raskite lightbox.css failą ir nukopijuokite jį į aplanką su stiliaus failais.

5. Prijunkite šį failą prie puslapio pridėdami šias eilutes tarp žymų:

6. Iš aplanko img nukopijuokite šiuos failus į savo serverį į aplanką su svetainės dizaino vaizdais: ir next.png . Šie failai naudojami lightbox.css stiliaus faile. Pagal numatytuosius nustatymus stiliaus failas nurodo vaizdus, esančius aplanke img, kuris turi tą patį pirminį kaip css aplanką. Jei jūsų vaizdų aplankas ir stilių aplankas yra visiškai skirtinguose aplankuose, turėtumėte pakeisti lightbox.css failo vaizdų kelius į atitinkamus.

II DALIS: Paveikslėlių įterpimas į puslapį.

Šis scenarijus suaktyvinamas spustelėjus nuorodą. Nuoroda gali būti tekstas arba vaizdas. Norėdami scenarijui nurodyti, kurią nuorodą jis turi apdoroti, prie nuorodos turite pridėti atributą data-lightbox ir priskirti bet kokią reikšmę.

Pavieniai paveikslėliai.

1 nuorodos tekstas 2 nuorodos tekstas 3

* pavadinimo atributą galima užpildyti pagal pageidavimą. Jei jis pilnas, jo turinys bus rodomas po iššokančiu vaizdu.

Paveikslėlių grupė.

Tarkime, kad turite vaizdų grupę ir spustelėję vieną iš nuorodų norite, kad iššokančiajame lange galėtumėte slinkti per visas šios grupės nuotraukas, neužverdami iššokančiojo lango.

1 nuorodos tekstas 2 nuorodos tekstas 3

*Anksčiau LiteBox scenarijui naudojote atributą rel="lightbox". Vis dar galite jį naudoti ir jis veiks, tačiau geriau naudoti naujus atributus, nes tai suteikia daugiau galimybių.

Atrodo, kad viskas padaryta, viskas turėtų veikti, bet:

Jei iš vaizdų sudarome paveikslėlių grupę, tai peržiūrint iššokančiame lange po paveikslėliais nurodomas „vaizdas 1 iš 8“? Norėčiau pamatyti kažką panašaus į šį „vaizdą 1 iš 8“.

Norėdami tai padaryti, failo lightbox-2.6.min.js 13 eilutėje turite pakeisti tai:

grąžinti "Vaizdas " + b + " iš " + c

grąžinti „ +c“ vaizdą „ +b +“.

grąžinti "Vaizdas " + b + " iš " + c

grąžinti "Vaizdas " +b +" iš " +c

Paskutinį kartą, kai naudojau šį scenarijų, reikėjo jį naudoti kartu su karuselės scenarijumi ir pastebėjau vieną gedimą.

Žemiau pateikiamas gedimo aprašymas ir kaip jį ištaisyti.

Jei puslapyje turime 2 skirtingas vaizdų grupes ir, pavyzdžiui, pirmoje grupėje nuotraukos turi antraštes (užpildomas pavadinimo atributas), o antroje grupėje pavadinimo atributo reikšmės yra tuščios arba nenurodyta visi, tada peržiūrint paveikslėlius be aprašymų (jei bent vieną nuotrauką peržiūrėjome su aprašymu), vis tiek rodysime paskutinės žiūrėtos nuotraukos aprašymą. Tai reiškia, kad scenarijus atsisako išvalyti iššokančiojo lango pavadinimą, jis pakeičia jį nauju, jei yra. Kaip tai ištaisyti?

Norėdami ištaisyti klaidą dėl atributo Title, pakeiskite tekstą failo lightbox-2.6.min.js 219 eilutėje:

if (typeof this.album.title !== "nedefined" amp;amp;amp;amp;amp;amp; this.album.title !== "") ( this.$lightbox.find(.lb-caption ").html(this.album.title).fadeIn("greitai") )

if (šio . albumo tipas [ this . currentImageIndex ] . title ! =="nedefined" & amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; & amp; amp; amp; amp; amp ; dabartinis

Populiariausia biblioteka yra „Lightbox Javascript“, kurią jau daugelį metų naudojame staliniuose kompiuteriuose, bet ne mobiliosios platformos Oi.

Pristatau jums 14 „Lightbox“ papildinių, palaikančių mobiliąsias platformas.

PhotoSwipe

PhotoSwipe yra lengvas, jutiklinis ir, svarbiausia, modulinis įskiepis, leidžiantis pašalinti nereikalingas dalis, kurių nereikia. Tai gerai veikia mobiliosios naršyklės. Galite pakeisti vaizdus braukdami pirštu taip, lyg tai būtų standartinė programa, su sklandžiais perėjimais.

Reikalingos bibliotekos: nėra.
Naršyklės palaikymas: IE8+, Chrome, Firefox, Safari, Opera ir kitos mobiliosios naršyklės.
Licencija: MIT licencija

Puikus iššokantis langas

„Magnific Popup“ yra dar vienas „lightbox“ papildinys, sukurtas to paties autoriaus kaip „PhotoSwipe“, Dmitrijus Semenovas. Papildinys pateikiamas kaip JQuery / Zepto įskiepis, taip pat apima palaikymą, kurio trūksta „PhotoSwipe“, pvz., vaizdo įrašų, žemėlapių ir „Ajax“ palaikymą. Tai puiki alternatyva tiems, kurie nori turėti daugiau galimybių po ranka.

Reikalingos bibliotekos: JQuery 1.9.1+ arba Zepto.js
Naršyklės palaikymas: IE7 (iš dalies), .
Licencija: MIT licencija

SwipeBox

„Swipebox“ yra „JQuery“ papildinys, palaikantis lietimo gestus mobiliosioms platformoms. Be vaizdų, jis taip pat palaiko „Youtube“ ir „Vimeo“ vaizdo įrašus. „Swipebox“ yra lengva įdiegti ir turi keletą parinkčių, kaip tinkinti jos sąranką. Manau, kad „Swipebox“ yra per daug perkrautas „lightbox“ įskiepis tiems, kurie nežino „JavaScript“.

„Bootstrap“ šviesdėžė

Iš pradžių „Lightbox“ papildinys neįtrauktas į „Bootstrap“. „Lightbox for Bootstrap“ tai ištaiso. Jei naudojate Bootstrap, labai rekomenduojama naudoti šią biblioteką. Papildinys gerai integruojamas su „Bootstrap“.

Reikalingos bibliotekos: JQuery ir Bootstrap modulis
Naršyklės palaikymas: IE8+, Chrome, Firefox, Safari ir Opera
Licencija: GNU licencija

Nivo Lightbox

„Nivo Lightbox“ yra lengvai pritaikomas „lightbox“ papildinys. Įvairios parinktys leidžia keisti išvaizda. Pavyzdžiui: tema, išvaizdos animacija ir naršymo tipas.

Reikalingos bibliotekos: JQuery
Naršyklės palaikymas:
Licencija: MIT licencija

ImageLightbox

„ImageLightbox“ yra paprastas „lightbox“ įskiepis be jokių smulkmenų. Jis naudojamas tik vaizdo tikslais, taigi ir pavadinimas. Nei vaizdo įrašai, nei kiti tipai nepalaikomi. Tam taip pat nereikia jokio papildomo HTML žymėjimo; žyma yra pakankamai. Šiuo papildiniu lengva naudotis.

Reikalingos bibliotekos: JQuery
Naršyklės palaikymas: IE9+, Chrome, Firefox, Safari ir Opera
Licencija: neapibrėžta

Mini šviesdėžė

Kitas „lightbox“ papildinys be priedų. Biblioteka sveria tik 2 kilobaitus ir veikia tik su vaizdais. Tai puikus papildinys, jei tik kuriate Naujausia versija naršyklėje ir nereikia palaikyti vaizdo ar kitų formatų.

Reikalingos bibliotekos: Nr
Naršyklės palaikymas: Internet Explorer 10+, „Chrome“, „Firefox“, „Safari“ ir „Opera“.
Licencija: MIT licencija

Šviesos dėklas

„Lightcase“ yra puikus „lightbox“ papildinys. Palaiko kelių tipų animacijas, tokias kaip: išnykimas, elastingumas, mastelio keitimas ir slinkimas. Be to, ji taip pat palaiko įvairių tipų laikmenas, įskaitant Youtube Embed, HTML Video, SWF ir įvesties formas.

Reikalingos bibliotekos: JQuery
Naršyklės palaikymas: IE9+, Chrome, Firefox, Safari ir Opera
Licencija: GPL licencija

Plunksnos šviesa

„Featherlight“ yra pagrindinis įskiepis, sveriantis 6 kilobaitus patyrusiems kūrėjams ir apimantis tik būtiniausius dalykus. Jei jums reikia šviesdėžės efekto, pavyzdžiui, vaizdų grupei galerijoje, galite įjungti galerijos plėtinį. Taip pat galite sukurti savo papildinio plėtinį, kurį naudosite savo projektuose.

Reikalingos bibliotekos: JQuery
Naršyklės palaikymas: IE8+, Chrome, Firefox, Safari ir Opera
Licencija: MIT licencija

LightLayer

„LightLayer“ yra lengvai naudojamas „lightbox“ papildinys. Papildinys palaiko daugybę parinkčių, tinkintas javascript metodus ir vartotojo įvykius. Papildinys veikia su vaizdais, vaizdo įrašais, žemėlapiais.

Reikalingos bibliotekos: JQuery
Naršyklės palaikymas: IE9+, Chrome, Firefox, Safari ir Opera
Licencija: MIT licencija

Šviesos galerija

„LightGallery“, kitas „lightbox“ papildinys su didelė suma funkcijas. Jame yra daugiau nei 20 parinkčių, leidžiančių tinkinti įvairias šviesdėžės efektų detales.

Reikalingos bibliotekos: JQuery
Naršyklės palaikymas: IE7+, Chrome, Firefox, Safari, Opera, IOS, Android ir Windows Phone
Licencija: MIT licencija

„FluidBox“.

„Fluidbox“ šviesdėžės papildinys veikia su vaizdais. Apima įvairių ekranų palaikymą, įskaitant slankiuosius vaizdus, absoliučios padėties vaizdus, vaizdus su kraštinėmis ir užpildu bei galerijas. Taip pat yra „WordPress“ papildinys.

Reikalingos bibliotekos: JQuery
Naršyklės palaikymas: IE9+, Chrome, Firefox, Safari, Opera
Licencija: MIT licencija

StripJS

StripJS yra unikalus šviesdėžės įskiepis. Užuot perdengęs vaizdą, šviesdėžės modulis slysta su vaizdu iš vienos pusės į kitą, kad vaizdas neužblokuotų viso turinio. StripJS palaiko ir vaizdus, ir vaizdo įrašus.

Reikalingos bibliotekos: JQuery
Naršyklės palaikymas: IE7 ir naujesnės versijos, „Chrome“, „Firefox“, „Safari“, „Opera“, „IOS 5“ ir naujesnės versijos ir „Android 3“ ar naujesnės versijos
Licencija: Creative Commons BY-NC-ND 3.0 licencija

Tikrai labai smagu, kad mums prieinama vis daugiau naujausių interneto technologijų, kurių pagalba mūsų darbas taps daug lengvesnis. Modaliniai langai yra funkcinis elementas, skirtas bet kokio tipo HTML turiniui rodyti, siekiant sukurti patogų dizainą ir sąsają.

Šioje apžvalgoje mes sudarėme JQuery bibliotekų ir scenarijų, skirtų šviesos dėžėms kurti, sąrašą, kurie padės kūrėjams ir dizaineriams sukurti dar geresnes ir profesionalesnes svetaines.

Toliau pateiktus scenarijus galite lengvai pridėti prie savo svetainės. Taigi, nieko nelaukdami, pereikime prie esmės ir pažvelkime į šias superines „jQuery“ šviesdėžės bibliotekas, kurias galite įtraukti į savo arsenalą.

1.Nuotrauka

„PhotoSwipe“ yra HTML nuotraukų galerija CSS pagrindu ir „JavaScript“, skirtos būtent mobiliesiems įrenginiams. Kurdami jį kaip pavyzdį autoriai ėmėsi vaizdų peržiūros paslaugas mobiliesiems telefonams. iOS įrenginiai ir Google. „PhotoSwipe“ turi pažįstamą ir intuityvią sąsają, kuri palengvina darbą su vaizdais svetainėje mobiliesiems.

Palaikomos visos pagrindinės funkcijos: perėjimas prie kito ar ankstesnio vaizdo, priartinimas, vilkimas, nutolinimas arba uždarymas ir kt.

2. Swipebox

Swipebox – JQuery papildinys, skirtas staliniams kompiuteriams, išmaniesiems telefonams ir planšetiniams kompiuteriams. Jis palaiko jutiklinis valdymas mobiliesiems įrenginiams, klaviatūros navigacija staliniams įrenginiams, CSS perėjimai su atsarginiais „JQuery“ valdikliais, gana lengva tinkinti.

Papildinys buvo išbandytas naudojant „Chrome“, „Safari“, „Firefox“, „Opera“, „Internet Explorer 8“ ir naujesnėse versijose, „iOS4“ ar naujesnėse versijose, „Android“, „Windows Phone“. Išleistas pagal MIT licenciją.

3. „iLightbox“.

iLightBox leidžia lengvai sukurti labai gražius reaguojančius modalinius langus naudojant JQuery. Derindama plataus medijos turinio palaikymą su puikiais apvalkalais ir patogia API, „iLightBox“ siekia, kad „lightbox“ būtų kuo tobulesnė. „iLightBox“ suteikia galimybę peržiūrėti pilno ekrano režimas, su tinklaine suderinamos odos, jutiklinis įvykių valdymas, „YouTube“ ir „Vimeo“ integracija HTML5 vaizdo įrašams, galinga „JavaScript“ API. Papildinys turi nemokama parama ir versijų atnaujinimus.

4. Vaizdo šviesdėžė

„Image Lightbox“ yra minimalistinis, išplečiamas ir pritaikomas papildinys, skirtas „IOS“, „Android“ ir „Windows Phone“. Naudodami CSS transformacijas ir perėjimus galite tiesiog įkelti kitą vaizdą naudodami klaviatūrą.

5. Didingas iššokantis langas

Magnific Popup nemokama reaguojanti jQuery papildinys, skirtas teikti geriausia sąveika tarp vartotojo ir įrenginio. Daugeliui „lightbox“ įskiepių reikia apibrėžti lango dydį naudojant JS. „Magnific Popup“ galite naudoti santykinius vienetus, pvz., EM, arba pakeisti šviesdėžės dydį naudodami CSS medijos užklausas.

6. Nivo Lightbox

„Nivo Lightbox“ yra lankstus „lightbox“ papildinys. Galima rinktis iš daugybės parinkčių, kuriomis galite lengvai pakeisti šviesdėžės išvaizdą. Pavyzdžiui, pakeiskite temą, perėjimo efektą ir naršymo metodą.

7.Šviesos dėklas

„Lightcase“ yra lankstus, reaguojantis ir išplečiamas „lightbox“ papildinys, sukurtas naudojant naudojant JQuery. Jis puikiai veikia visose populiariose naršyklėse, tokiose kaip Internet Explorer 7+, Firefox, Opera, Webkit ir kt. Papildinys palaiko nuotraukų, vaizdo įrašų, HTML5 vaizdo įrašų, Iframe, SWF ir AJAX skambučius.

8. Lightlayer.js

„LightLayer“ yra adaptyvių šviesdėžių rodymo scenarijus, jis puikiai veikia kartu su kitais komponentais bet kuriame ekrane. Šis scenarijus yra tikrai labai paprastas naudoti. „LightLayer“ suteikia galimybę valdyti daugybę parametrų: fono spalvą ir neskaidrumą, šviesdėžės padėtį, atidarymo/uždarymo perėjimus ir daugybę kitų pritaikomų funkcijų.

9. Strip.js

Juosta yra šviesdėžė, kuri išplečiama tik iki dalies puslapio. Tai daro jį mažiau įkyrų ir leidžia sąveikauti su kitais puslapio elementais dideli ekranai; įjungta mobiliuosius įrenginiusšviesdėžė turi klasikinę išvaizdą. Strip naudoja JQuery ir yra palaikoma visose pagrindinėse naršyklėse.

10. Fluidbox

„Fluidbox“ yra „jQuery“ įskiepis, sukurtas užtikrinti nepastebimą, reaguojančią šviesdėžę, kuri idealiai tinka vaizdams su didelės raiškos. Jis puikiai veikia mobiliuosiuose įrenginiuose ir taip pat gali būti naudojamas didesnės raiškos ekranuose, kad vaizdas būtų gražus.

11. Plunksnos šviesa

„Featherlight“ yra labai lengvas papildinys, kuriame yra 400 „JavaScript“ eilučių, 100 CSS eilučių ir mažesnis nei 6 KB. Išmanioji, reaguojanti šviesdėžė, pagal numatytuosius nustatymus palaiko vaizdus, AJAX ir iframe. Taip pat galite pritaikyti pagal savo poreikius. „Featherlight“ veikia IE8+, visose šiuolaikinėse naršyklėse ir mobiliosiose platformose.

12. Yalb

Yalb reiškia Yet Another Lightbox, bet taip nėra. „Yalb“ yra su dideliu sąsajų rinkiniu, įskaitant pasirinktinius įvykius, leidžiančius nustatyti jo būseną (atvira, uždaryta).