15 Lightbox-bibliotek för mobilrespons

Lightbox är ett populärt sätt att lägg över bilder på webben. När du klickar på en bild dyker ljuset upp med någon form av animering och dämpar bakgrunden så att fokus ligger på själva bilden. Bilden är också större i skala. Mest populära Lightbox-JavaScript-bibliotek som vi har känt i åratal gör att du kan göra det bra på skrivbordet, men inte så mycket på mobila plattformar.

Att försumma detta och behovet av respons är inte en bra idé nuförtiden, varför denna samling av 15 lyhörda ljusbibliotek måste checkas ut.

Mer om Hongkiat:

• Skapa enkelt fönster med HTML5-dialog
• Top 10 Gratis Responsive Image Galleries / Slideshows
• Skapa, styra och anpassa Bättre Modalt fönster för din webbplats med Vex
• jQuery Bildgallerier & Sliders - Best Of

PhotoSwipe

PhotoSwipe är överlägset min favorit ligthbox plugin. Det är lätt, beröringsaktiverat och viktigast modulärt vilket gör att jag kan dölja några delar som inte behövs. Den går bra i mobila webbläsare. Du kan svepa genom bilder med fingrarna som du skulle i en inbyggd app, och övergången går riktigt jämn.

• Dependency: Ingen
• Webbläsarsupport: IE8 +, Chrome, Firefox, Safari, Opera och ett par mobila webbläsare.
• Licens: MIT-licens

MagnificPopup

MagnificPopup är en annan lightbox plugin, utvecklad av samma person som gav oss PhotoSwipe, Dmitry Semenov. Den kommer i form av ett jQuery / Zepto-plugin, och ger också funktioner som saknas i PhotoSwipe, t.ex. stöd för video, kartor och Ajax-innehåll. Detta är ett utmärkt alternativ för dem som föredrar att ha fler funktioner till hands.

• Dependency: jQuery 1.9.1+ eller Zepto.js
• Webbläsarsupport: IE7 (delvis), IE8 +, Chrome, Firefox, Safari och Opera.
• Licens: MIT-licens

SwipeBox

Swipebox är ett jQuery-plugin med touch gesture support för mobil plattform. Den stöder också videor från Youtube och Vimeo bortsett från bilder. Swipebox är också enkelt att implementera, och har en handfull alternativ för att anpassa sitt beteende. Jag tror att Swipebox är ett bra ljuskompatibelt plugin för JavaScript noobs.

• Dependency: jQuery
• Webbläsarsupport: IE9 +, Chrome, Safari, Firefox, Opera, IOS4 +, Android och Windows Phone.
• Licens: Odefinierad

iLightbox

iLighbox är en jQuery-ljuskälla plugin med ett brett utbud av media typer: inklusive video, Flash / SWF, Ajax innehåll, iframe och kartor. Denna plugin lägger också till sociala medier knappar ovanpå media, så att dina användare kan dela den till Facebook, Twitter eller Reddit. Kolla även in den avancerade sektionen för att se hur iLightbox kan tillämpas i olika scenarier.

• Dependency: jQuery
• Webbläsarsupport: IE7 +, Chrome, Firefox, Safari och Opera
• Licens: Odefinierad

Lightbox för Bootstrap

Ljuslåda är en av de brutalt saknade bitarna från Bootstrap. Detta plugin fixar det. Om du använder Bootstrap rekommenderar jag starkt att du använder det här biblioteket. Pluggen är väl integrerad med Bootstraps kodbas.

• Dependency: jQuery och Bootstrap Modal
• Webbläsarsupport: IE8 +, Chrome, Firefox, Safari och Opera
• Licens: GNU-licens

Nivo Lightbox

Nivo Lightbox är ett flexibelt lightbox-plugin. Flera alternativ är inkluderade för att ändra utseendet på det sätt du tycker om att det ska visas, till exempel byte av tema, övergångseffekt och byte av navigeringen.

• Dependency: jQuery
• Webbläsarsupport: IE9 +, Chrome, Firefox, Safari och Opera
• Licens: MIT-licens

ImageLightbox

ImageLightbox är ett lightbox-plugin utan uppblåsthet. Den är byggd speciellt för bild därmed namnet som ges - ingen video eller annan mediatyp stöds. Det kräver inte heller extern HTML-markup; de element är tillräckligt. Plugin fungerar bara.

• Dependency: jQuery
• Webbläsarsupport: IE9 +, Chrome, Firefox, Safari och Opera
• Licens: Odefinierad

Mini Lightbox

En annan lightbox plugin med ingen av uppblåst. Biblioteket är bara 2kb och fungerar bara med bilder. Det är det perfekta pluginet om du bara anger för den senaste webbläsaren och behöver inte överlappa andra medietyper som video.

• Dependency: Ingen
• Webbläsarsupport: IE10 +, Chrome, Firefox, Safari och Opera
• Licens: MIT-licens

LightCase

Lightcase är en härlig lightbox plugin. Den levereras med flera animeringar som gör användarinteraktionen levande, som blekning, elastisk zoom och rullning. Dessutom stöder den också olika typer av media, inklusive Youtube-inbädd, HTML-videor, SWF och inmatningsformulär. Pluggen hanterar även media korrekt, eller kan inte hittas

• Dependency: jQuery
• Webbläsarsupport: IE9 +, Chrome, Firefox, Safari och Opera
• Licens: GPL-licens

Yalb

Yalb står för ännu en lampa - men det är det inte. Yalb levereras med en handfull API, inklusive anpassade händelser som gör att du kan identifiera ljusboxstater, till exempel när det är öppna och när det är stänga. Yalb kommer i två versioner, Vanilla JavaScript och jQuery plugin.

• Dependency: Ingen
• Webbläsarsupport: IE9 +, Chrome, Firefox, Safari och Opera
• Licens: MIT-licens

Fjäderlätt

6kb Fjäderlätt är ett blott plugin för kunnig utvecklare och bär bara de viktigaste. Om du exempelvis behöver gruppera bildlampa i ett galleri kan du inkludera gallerietillägget. Du kan också utveckla din egen tillägg för det här pluginet för att passa dina projektbehov.

• Dependency: jQuery
• Webbläsarsupport: IE8 +, Chrome, Firefox, Safari och Opera
• Licens: MIT-licens

LightLayer

LightLayer är ett lättanvänt lightbox-plugin. Den har en handfull alternativ, anpassade JavaScript-metoder och anpassade händelser. plugin fungerar med bilder, videoklipp, kartor och externt innehåll. Vad mer kan vi fråga.

• Dependency: jQuery
• Webbläsarsupport: IE9 +, Chrome, Firefox, Safari och Opera
• Licens: MIT-licens

LightGallery

LightGallery, Ett annat lightbox-plugin med många funktioner tillagda. Den levereras med mer än 20 alternativ för att anpassa den minsta informationen om ljusboxen.

• Dependency: jQuery
• Webbläsarsupport: IE7 +, Chrome, Firefox, Safari, Opera, IOS, Android och Windows Phone
• Licens: MIT-licens

FluidBox

Fluidbox är ett plugin för bildlampa som inspireras från Medium. Den fungerar med bilder under olika omständigheter, inklusive flytande bild, bild med absolut position, bilder som har kant och vadderar, och gallerier. Kolla in hur den byggdes. Om du behöver ett WordPress-plugin finns det en.

• Dependency: jQuery
• Webbläsarsupport: IE9 +, Chrome, Firefox, Safari, Opera
• Licens: MIT-licens

StripJS

StripJS är ett unikt lightbox-plugin. Istället för att överla bilden ska pluggen bilderna in från sidan istället, så att den inte blockerar hela innehållet. StripJS stöder både bild och video.

• Dependency: jQuery
• Webbläsarsupport: IE7 +, Chrome, Firefox, Safari, Opera, IOS 5+ och Android 3+
• Licens: Creative Commons BY-NC-ND 3.0-licens