Acest articol conține cele mai bune pluginuri jQuery Lightbox care vă vor ajuta să creați site-uri web frumoase.

Aceste pluginuri jQuery sunt folosite pentru a adăuga ferestre pop-up pe site-ul dvs. Astfel de pluginuri sunt un instrument foarte puternic pentru orice designer și dezvoltator web, deoarece ajută la obținerea unor efecte foarte frumoase care conferă unui site web obișnuit un aspect spectaculos și atractiv. Pentru a utiliza pluginul jQuery, aveți nevoie de cunoștințe de bază despre JavaScript și jQuery. Dacă nu cunoașteți elementele de bază, citiți descrierea pluginului și urmați instrucțiunile.

Voi începe cu un plugin pe care l-am scris - . Puteți vedea cum funcționează pluginul în acest articol - toate imaginile se pot face clic. Scopul meu atunci când l-am dezvoltat a fost să realizez o casetă de lumină simplă din doar imagini, fără efecte de prezentare de diapozitive etc.

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

Inițial, pluginul lightbox nu este disponibil în Bootstrap. o repară. Dacă utilizați Bootstrap, este recomandat să utilizați această bibliotecă. Pluginul se integrează bine cu Bootstrap.

Strip 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. Strip acceptă atât imagini, cât și videoclipuri.

este o bibliotecă JavaScript pentru crearea de galerii lightbox receptive. Ușor și compatibil cu dispozitivele mobile, este ușor să personalizați și să utilizați tranzițiile de imagine CSS3.

Rebox este un lightbox foarte ușor și rapid pentru conținut. În principal, desigur, pentru imagini. Pentru a inițializa pluginul, trebuie doar să conectați biblioteca JS și CSS.

Excelent plugin lightbox. Acceptă mai multe tipuri de animații, cum ar fi: fade, elastic, zoom și scrolling. În plus, acceptă și diverse tipuri de media, inclusiv Youtube Embed, HTML Video, SWF și Input Forms.

LightGallery este un plugin jQuery extrem de personalizabil pentru crearea unei galerii receptive. Are absolut tot ce ai nevoie: vizualizare într-o casetă luminoasă, prezentare de diapozitive, zoom pe tot ecranul, previzualizări. De asemenea, utilizatorul care vizualizează galeria poate descărca imediat poza.

Spre deosebire de unii dintre frații săi din industrie, nu este o combină pentru a afișa ceva într-o fereastră pop-up. Plugin-ul a fost creat și funcționează numai în scopul de a afișa imagini – atât unice, cât și ca parte a unui set (galerie), dar acest lucru nu îl face mai puțin atractiv.

Pluginul jQuery LightBox este simplu, elegant, discret, nu necesită markup suplimentar și este folosit pentru a suprapune imagini pe pagina curentă datorită puterii și flexibilității selectorului jQuery.

Vă permite să creați casete de dialog în stilul facebook, în timp ce este posibil să creați casete de dialog cu text simplu al unor elemente, imagini, pagini ajax plasate în ele.

Folosit pentru a crea galerii foto și pentru a afișa alt conținut în ferestre modale frumoase. Dacă intenționați să aveți o galerie foto pe site-ul dvs. și să plasați conținut în ferestre modale, atunci acordați atenție acestui script.

Destul de ușor, poate redimensiona imaginile pentru a se potrivi cu dimensiunea ferestrei și este ușor de configurat.

ImageLightbox.js este o casetă lightbox numai pentru imagini, nu video, text și cadre în același timp. În mod implicit, nu există antete, butoane de navigare sau fundal.

Este un jQuery UI mediabox care este capabil să afișeze multe tipuri de conținut, inclusiv imagini și videoclipuri de pe YouTube și Vimeo. Există multe caracteristici unice, inclusiv Panorama și Live Re-size.

jQuery TosRus este un plugin jQuery convenabil și funcțional pentru lucrul cu videoclipuri și imagini. Scriptul poate acționa ca un instrument lightbox și un glisor orizontal în același timp. Conținutul din ferestrele modale este receptiv în mod implicit. Adaptat pentru dispozitive tactile.

- acesta este unul dintre tipurile de lightbox, bazat pe jQuery, cu funcționalități mai avansate decât cele tradiționale. La fel ca toți analogii, are o grămadă de setări pentru controlul transparenței fundalului, viteza de afișare, efectele, dimensiunile, etichetele etc.

este un plugin jQuery conceput pentru a implementa 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ă.

– 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.

jQuery Superbox facilitează crearea de casete lightbox pentru imagini, grupuri de imagini, pagini externe sau conținut specific. Pluginul este complet accesibil și explicit și folosește atributul „rel” pentru a rula scriptul și atributul „href” pentru a specifica adresa URL a imaginii sau a paginii.

— Plugin jQuery lightbox cu suport larg pentru diferite formate media: inclusiv video, Flash / SWF, Ajax, cadre și hărți. Acest plugin adaugă, de asemenea, butoane pentru rețelele sociale în partea de sus, permițând utilizatorilor săi să-l partajeze pe Facebook, Twitter sau Reddit. În plus, există setări suplimentare pentru a vedea care pot fi aplicate în diferite cazuri.

este un alt plugin responsive jQuery Lightbox care este potrivit pentru afișarea de imagini, iFrames, Google-Maps, Vimeo și videoclipuri YouTube. Plugin-ul calculează lățimea maximă a imaginii pe ecran și menține înălțimea proporțională, chiar dacă este mai mare decât înălțimea ferestrei.

Vă permite să creați cu ușurință ferestre pop-up frumoase folosind jQuery. Puteți îmbunătăți automat conținutul media sau puteți crea ferestre pop-up personalizate folosind un API puternic.

- cutie luminoasă adaptabilă excelentă. Poate fi folosit pentru a crea galerii uimitoare care vor arăta grozav pe orice ecran.

Magnific Popup este un plugin jQuery lightbox ușor de utilizat, cu accent pe performanță. Scopul său principal este de a oferi o experiență confortabilă pe orice dispozitiv.

Un plugin de bază care cântărește 6 kiloocteți pentru dezvoltatori 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.

În acest articol, am analizat 14 pluginuri WordPress cu efect Lightbox testate pentru efectul Lightbox pe site-ul WordPress. Lightbox este un efect foto în care fotografia este afișată pe o pagină web într-o fereastră modală când faceți clic pe fotografie.

În fereastra modală, fotografia este mărită la dimensiunea originalului. În același timp, o altă parte a paginii (fondul) dispare, „ecranul se stinge”. Acest lucru oferă vizitatorilor site-ului posibilitatea de a privi imaginea de aproape fără a părăsi pagina. Pentru efectul Lightbox de pe site-ul WordPress se folosesc biblioteci JavaScript: jQuery, MooTools.

• http://lokeshdhakar.com/projects/lightbox2/
• https://github.com/lokesh/lightbox2/

Lightbox JS este un script front-end simplu, discret, folosit pentru a suprapune imagini pe pagina curentă. Funcționează pe toate browserele moderne. Aceasta este cea mai recentă versiune a Lightbox JS inițial de Lokesh Dhakar. Caracteristicile pluginului includ:

• index.html
• JS/JQuery-1.7.2.min.js
• JS/lightbox.js
• CSS/lightbox.css
• imagini/close.png
• imagini/next.png
• imagini/prev.png
• Plus câteva fișiere pentru pagina demo

Pluginul Lightbox Plus este un plugin care implementează metoda Lightbox JS de către Lokesh Dhakar (vezi mai sus). Lightbox Plus este folosit pentru a crea suprapuneri de imagini pe ecranul paginii web și adaugă automat linkurile corecte la imaginea suprapusă. Lightbox Plus poate adăuga galerii de imagini în caseta dvs. de lumină WordPress, poate afișa prezentări simple de diapozitive, videoclipuri, formulare și conținut extern (texte) în suprapuneri de tip pop-up. Pagina din spate este întunecată cu un fundal întunecat sau deschis, așa-numitul efect de „pagină înnegrită”.

https://github.com/AlekseyKorzun/LightBox-Gone-Wild—onLoad

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.

Ș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 o mulțime de 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.

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 scriptului, această funcție provoacă doar rău, poate fi folosită numai î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.
Ca urmare, doar o singură imagine este vizibilă în browser când faceț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ă imagini identice (evidențiate cu roșu) și când vei derula, vei vedea două imagini identice.
Dacă într-un exemplu specific activați eliminarea duplicatelor, atunci 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 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 intestin Dacă aș folosi mouse-ul pentru a lua și a muta câmpul imaginii, ar fi o mizerie completă

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!

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))

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

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 browserele mobile. Poți schimba imaginile cu o glisare cu degetul, ca și cum ar fi o 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 un plugin ideal dacă dezvoltați doar cea mai recentă versiune a browserului și nu este nevoie să acceptați formate 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. În plus, 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 mai multe 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