15 Lightbox-kirjastoa mobiilivastaavuuteen

Lightbox on yksi suosittu tapa peittää kuvat verkossa. Kun napsautat kuvaa, Lightbox ilmestyy jonkinlaiseen animaatioon ja himmentää taustaa, joten painopiste on itse kuvassa. Kuva on myös mittakaavassa suurempi. Suosituimmat Lightbox-JavaScript-kirjastot, joita olemme jo vuosia tunteneet, antavat tämän hyvin työpöydälle, mutta ei niin paljon mobiilialustoilla.

Tämän jättäminen huomiotta ja tarve reagoida, ei ole nykyään hyvä idea, minkä vuoksi tämä 15 herkkä Lightbox-kirjaston kokoelma on tarkistettava.

Lisää Hongkiatista:

• Modal-ikkunan luominen helposti HTML5-valintaikkunan avulla
• Top 10 Free Responsive Image galleriat / diaesitykset
• Luo, hallitse ja muokkaa sivustosi parempaa modaaliaikkunaa Vexillä
• jQuery Kuvagalleriat & Sliders - Best Of

PhotoSwipe

PhotoSwipe on ylivoimaisesti suosikkini ligthbox-plugin. Se on kevyt, kosketusmahdollisuus ja mikä tärkeintä, modulaarinen, joka sallii ojentaa muutamia osia, joita ei tarvita. Se toimii hienosti mobiililaitteissa. Voit pyyhkiä kuvia sormillasi, kuten olisit alkuperäisessä sovelluksessa, ja siirtyminen kulkee todella tasaisesti.

• riippuvuus: Ei mitään
• Selaimen tuki: IE8 +, Chrome, Firefox, Safari, Opera ja muutama mobiili-selain.
• lisenssi: MIT-lisenssi

MagnificPopup

MagnificPopup on toinen Lightbox-laajennus, jonka on kehittänyt sama henkilö, joka antoi meille PhotoSwipe, Dmitry Semenov. Se on jQuery / Zepto-laajennus, ja se tuo myös ominaisuuksia, jotka puuttuvat PhotoSwipe-ohjelmasta, kuten video-, kartta- ja Ajax-sisällön tuki. Tämä on erinomainen vaihtoehto niille, jotka haluavat enemmän ominaisuuksia.

• riippuvuus: jQuery 1.9.1+ tai Zepto.js
• Selaimen tuki: IE7 (osittain), IE8 +, Chrome, Firefox, Safari ja Opera.
• lisenssi: MIT-lisenssi

SwipeBox

Swipebox on jQuery-laajennus, jossa on kosketus eleiden tuki mobiilialustalle. Se tukee myös Youtube- ja Vimeo-videoita videoiden ohella. Swipebox on myös suorastaan ​​helppo toteuttaa, ja sillä on kourallinen vaihtoehtoja sen käyttäytymisen mukauttamiseksi. Mielestäni Swipebox on suuri lightbox-plugin JavaScript-noobsille.

• riippuvuus: jQuery
• Selaimen tuki: IE9 +, Chrome, Safari, Firefox, Opera, IOS4 +, Android ja Windows Phone.
• lisenssi: määrittelemätön

iLightbox

iLighbox on jQuery-lightbox-laajennukset, joissa on laaja valikoima mediatyyppejä: videot, Flash / SWF, Ajax-sisältö, iframe ja kartat. Tämä plugin lisää myös sosiaalisen median painikkeet median päälle, jolloin käyttäjät voivat jakaa sen Facebookiin, Twitteriin tai Redditiin. Katso myös edistyneestä osiosta, miten iLightboxia voidaan käyttää eri skenaarioissa.

• riippuvuus: jQuery
• Selaimen tuki: IE7 +, Chrome, Firefox, Safari ja Opera
• lisenssi: määrittelemätön

Lightbox Bootstrapille

Lightbox on yksi Bootstrapin hirveästi puuttuvista kappaleista. Tämä laajennus korjaa sen. Jos käytät Bootstrapia, suosittelen tätä kirjastoa. Plugin on integroitu hyvin Bootstrapin koodipohjaan.

• riippuvuus: jQuery ja Bootstrap Modal
• Selaimen tuki: IE8 +, Chrome, Firefox, Safari ja Opera
• lisenssi: GNU-lisenssi

Nivo Lightbox

Nivo Lightbox on joustava lightbox-laajennus. Mukana on useita vaihtoehtoja, joilla voit muuttaa ulkonäköä haluamallasi tavalla, kuten teeman, siirtymävaiheen vaikutuksen ja navigoinnin vaihtamiseen.

• riippuvuus: jQuery
• Selaimen tuki: IE9 +, Chrome, Firefox, Safari ja Opera
• lisenssi: MIT-lisenssi

ImageLightbox

ImageLightbox on lightbox-laajennus ilman paisuntaa. Se on rakennettu erityisesti kuvaan, jolloin annettu nimi - ei tueta videota tai muuta tulostusmateriaalityyppiä. Se ei myöskään vaadi ulkopuolista HTML-merkintää; elementti on riittävä. Plugin toimii vain.

• riippuvuus: jQuery
• Selaimen tuki: IE9 +, Chrome, Firefox, Safari ja Opera
• lisenssi: määrittelemätön

Mini Lightbox

Toinen lightbox-laajennus, jossa ei ole mitään paisumista. Kirjasto on vain 2kb ja toimii vain kuvilla. Se on täydellinen plugin, jos valitset vain uusimman selaimen ja sinun ei tarvitse peittää muita mediatyyppejä, kuten videoita.

• riippuvuus: Ei mitään
• Selaimen tuki: IE10 +, Chrome, Firefox, Safari ja Opera
• lisenssi: MIT-lisenssi

LightCase

Lightcase on ihana lightbox-laajennus. Siinä on useita animaatioita, jotka tekevät käyttäjän vuorovaikutuksesta eläväksi, kuten häipyminen, joustava zoom ja vieritys. Lisäksi se tukee myös erilaisia ​​medioita, kuten Youtube-upotusta, HTML-videoita, SWF: ää ja syöttölomakkeita. Lisäosaa ei myöskään voida käsitellä tai virheitä löytää

• riippuvuus: jQuery
• Selaimen tuki: IE9 +, Chrome, Firefox, Safari ja Opera
• lisenssi: GPL-lisenssi

Yalb

Yalb tarkoittaa vielä muuta valoa - mutta se ei ole. Yalbissa on kourallinen API-sovelluksia, mukaan lukien mukautetut tapahtumat, joiden avulla voit tunnistaa lightbox-tilat, kuten silloin, kun se on avata ja milloin se on kiinni. Yalbissa on kaksi versiota: Vanilla JavaScript ja jQuery plugin.

• riippuvuus: Ei mitään
• Selaimen tuki: IE9 +, Chrome, Firefox, Safari ja Opera
• lisenssi: MIT-lisenssi

Höyhenen kevyt

6kb Höyhenen kevyt on paljain plugin taju kehittäjä ja kuljettaa vain olennaiset. Jos tarvitset esimerkiksi ryhmäkuvan valolaatikkoon galleriassa, voit lisätä gallerian laajennuksen. Voit myös kehittää oman laajennuksesi tähän laajennukseen, jotta se sopii projektisi tarpeisiin.

• riippuvuus: jQuery
• Selaimen tuki: IE8 +, Chrome, Firefox, Safari ja Opera
• lisenssi: MIT-lisenssi

LightLayer

LightLayer on helppokäyttöinen lightbox-laajennus. Siinä on muutamia vaihtoehtoja, mukautettuja JavaScript-menetelmiä ja mukautettuja tapahtumia. laajennus toimii kuvien, videoiden, karttojen ja ulkoisen sisällön kanssa. Mitä muuta voimme kysyä.

• riippuvuus: jQuery
• Selaimen tuki: IE9 +, Chrome, Firefox, Safari ja Opera
• lisenssi: MIT-lisenssi

LightGallery

LightGallery, toinen lightbox-laajennus, johon on lisätty paljon ominaisuuksia. Siinä on yli 20 vaihtoehtoa, joilla voit muokata valopöydän pienimpiä yksityiskohtia.

• riippuvuus: jQuery
• Selaimen tuki: IE7 +, Chrome, Firefox, Safari, Opera, iOS, Android ja Windows Phone
• lisenssi: MIT-lisenssi

FluidBox

Fluidbox on kuva Lightbox-laajennus, joka on saanut inspiraation Mediumista. Se toimii kuvissa eri olosuhteissa, kuten kelluva kuva, kuva absoluuttinen sijainti, kuvat, joilla on raja ja pehmuste, ja galleriat. Tarkista, miten se on rakennettu. Jos tarvitset WordPress-laajennuksen, on olemassa yksi.

• riippuvuus: jQuery
• Selaimen tuki: IE9 +, Chrome, Firefox, Safari, Opera
• lisenssi: MIT-lisenssi

StripJS

StripJS on ainutlaatuinen lightbox-laajennus. Sen sijaan, että laajennettaisiin kuvaa, plugin liukuu kuvat sivulta, jotta se ei estä koko sisältöä. StripJS tukee sekä kuvaa että videota.

• riippuvuus: jQuery
• Selaimen tuki: IE7 +, Chrome, Firefox, Safari, Opera, iOS 5+ ja Android 3+
• lisenssi: Creative Commons BY-NC-ND 3.0 -lisenssi