Plugin Lightbox. Utilizarea jQuery Lightbox pentru o galerie foto. Configurarea galeriei foto LightBox2
Unul dintre articolele anterioare a vorbit despre probabil cea mai populară galerie foto gratuită - Lightbox, creată pe baza bibliotecii de scripturi jQuery. Pe baza Lightbox, designerii web au dezvoltat multe clone interesante, dar versiunea originală este încă în curs de dezvoltare și este folosită cu succes pentru galerii foto pe multe site-uri. Să luăm în considerare ultima actualizare- Plugin Lightbox2, caracterizat prin dimensiunile reduse și, ca întotdeauna, instalarea ușoară pe site. În același timp, Lightbox2 are un design atractiv, funcționează în toate browserele și, ceea ce este deosebit de frumos, afișează corect imagini mari, comprimându-le pentru a se potrivi cu dimensiunea ecranului utilizatorului.
Dezvoltatorul pluginului Lightbox2 este Lokesh Dhakar, un programator din San Francisco. În prezent (2014) este disponibilă versiunea Lightbox v2.7.1, pe care vom încerca să o instalăm pe site. Un exemplu de extindere a unei singure imagini folosind LightBox2 este prezentat în figură.
Instalarea galeriei foto LightBox2 Pentru a instala galeria foto LightBox2, mai întâi creați un folder nou pe site, numindu-l, desigur, lightbox2. Acest folder trebuie să fie în același director cu pagina galeriei foto. Apoi descărcați arhiva și despachetați-o în folderul creat. Vom primi în el două scripturi (*.js), imagini auxiliare (dosarul img) și fișier CSS(*.css). În continuare, vom introduce în antetul paginii cu viitoarea galerie foto în interiorul etichetei... următoarele rânduri indicând căile către noile noastre fișiere:Notă importantă: dacă site-ul dvs. folosește mai multe plugin-uri jQuery, atunci este mai convenabil să mutați fișierul jquery.js (de preferință ultima versiune) V folderul rădăcină pentru a nu-l descărca de mai multe ori. În acest caz, linia de accesare a acestuia va arăta la fel pentru toate pluginurile. În special, pentru exemplul nostru, se dovedește astfel:
.
Nu este recomandat să folosiți mai multe pe o singură pagină versiuni diferite jQuery, astfel încât să nu intre în conflict unul cu celălalt. În același timp, asigurați-vă că verificați funcționarea pluginurilor cu cel instalat Versiunea jQuery, deoarece nu toate versiunile sunt interschimbabile.
Acum trebuie să plasați imaginile necesare pe pagina site-ului. Ca de obicei, fiecare ar trebui să fie prezentat sub forma unei imagini în miniatură (mică) și a unei imagini la dimensiune completă (mare), indicată printr-un link de la miniatură. În eticheta de link, indicăm suplimentar rel="lightbox" - pentru o singură imagine, iar dacă dorim să combinăm mai multe imagini într-o galerie, atunci printr-o cratimă orice expresie care este aceeași pentru toate, de exemplu, rel=" lightbox-one" 
și așa mai departe.
Dacă este necesar să faceți inscripții pentru imagini, atunci plasați-le în titlul link-urilor.
Un exemplu de galerie foto simplă de trei imagini este prezentat în figură:
Notă importantă: dacă dimensiunea imaginii principale (big.jpg) este mai mare decât dimensiunea ecranului din browserul utilizatorului, atunci LightBox2 o ajustează (reduce) automat pentru a se potrivi cu dimensiunea ecranului. În același timp, imaginea mărită se potrivește întotdeauna în ecran, indiferent de ce dispozitiv este utilizat pentru vizualizare: un smartphone, tabletă sau monitor de înaltă rezoluție.
Prin urmare, este de dorit ca o imagine mare să aibă o marjă de rezoluție, de exemplu, cel puțin 1000 de pixeli pe verticală pentru un standard Ecran complet HD - 1920x1080. În exemplul nostru, aceasta este imaginea „Subbotnik”.
Configurarea galeriei foto LightBox2Pentru a configura o galerie foto, deschideți fișierul lightbox.js în orice editor HTML sau text, de exemplu, Notepad. La începutul fișierului, veți vedea setările disponibile:
this.fadeDuration = 500;
// timpul de deschidere a imaginii ms
this.fitImagesInViewport = true;
// se potrivește la dimensiunea ecranului true/false
this.resizeDuration = 700;
//timpul de desfășurare a imaginii ms
this.positionFromTop = 50;
//indentarea ferestrei LightBox din partea de sus a ecranului
this.showImageNumberLabel = adevărat;
//Afișează numărul imaginii true/false etc.și interfață.
În această recenzie, am compilat o listă de biblioteci și scripturi JQuery pentru crearea casetelor lightbox care vor ajuta dezvoltatorii și designerii să creeze site-uri web și mai bune și mai profesionale.
Puteți adăuga cu ușurință scripturile de mai jos pe site-ul dvs. Deci, fără alte prelungiri, să trecem la subiect și să aruncăm o privire la aceste biblioteci super jQuery lightbox pe care le puteți adăuga la arsenalul dvs.
1.Swipe fotografiePhotoSwipe este o galerie foto HTML Bazat pe CSSși JavaScript, destinate în mod special dispozitivelor mobile. La dezvoltarea acestuia, autorii au luat servicii de vizualizare a imaginilor pentru dispozitive mobile iOS și Google. PhotoSwipe este familiar și intuitiv interfață clară, ceea ce facilitează lucrul cu imagini pe un site mobil.
Sunt acceptate toate funcțiile de bază: trecerea la imaginea următoare sau anterioară, mărirea, tragerea, micșorarea sau închiderea și altele.
2. Swipebox
Swipebox – 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.
Pluginul a fost testat pe Chrome, Safari, Firefox, Opera, Internet Explorer 8+, iOS4+, Android, Windows Phone. Lansat sub licență MIT.
3. iLightbox
iLightBox facilitează crearea unui responsive foarte frumos ferestre modale folosind JQuery. Combinând suportul pentru o gamă largă de conținut media cu skin-uri grozave și un API ușor de utilizat, iLightBox se străduiește să facă lightbox cât se poate de perfectă. iLightBox oferă posibilitatea de a vizualiza în interior modul ecran complet, skin-uri compatibile cu Retina, managementul evenimentelor tactile, integrare YouTube și Vimeo pentru videoclipuri HTML5, API JavaScript puternic. Pluginul are suport gratuitși actualizări de versiuni.
4. Casetă luminosă imagine
Image Lightbox este un plugin minimalist, extensibil și personalizabil pentru IOS, Android și Windows Phone. Puteți descărca pur și simplu folosind tastatura următoarea imagine datorită utilizării transformărilor și tranzițiilor CSS.
5.Magnific Popup
Magnific Popup este gratuit jquery receptiv un plugin care se concentrează pe oferirea celei mai bune experiențe între utilizator și dispozitiv. Majoritatea pluginurilor lightbox necesită să definiți dimensiunea ferestrei folosind JS. În Magnific Popup puteți utiliza unități relative măsurători precum EM sau redimensionați caseta de lumină folosind interogări media CSS.
6. Nivo Lightbox
Nivo Lightbox este un plugin pentru lightbox flexibil. Există multe opțiuni din care puteți alege, astfel încât să puteți schimba cu ușurință aspect caseta de lumină. De exemplu, schimbați tema, efectul de tranziție și metoda de navigare.
7.Lightcase
Lightcase este un plugin pentru lightbox flexibil, receptiv și extensibil, dezvoltat folosind JQuery. Funcționează perfect în toate browserele populare, cum ar fi Internet Explorer 7+, Firefox, Opera, Webkit și altele. Pluginul acceptă apeluri foto, video, video HTML5, Iframe, SWF și AJAX.
8. Lightlayer.js
LightLayer este un script pentru afișarea casetelor de lumină adaptive, funcționează bine împreună cu alte componente pe orice ecran. Acest script este într-adevăr foarte ușor de utilizat. LightLayer oferă control asupra multor parametri: culoarea și opacitatea fundalului, poziția casetei luminoase, tranzițiile de deschidere/închidere și multe alte caracteristici personalizabile.
9. Strip.js
Strip este o casetă lightbox care se extinde doar la o parte a paginii. Acest lucru îl face mai puțin intruziv și îi permite să interacționeze cu alte elemente ale paginii ecrane mari; pe dispozitivele mobile are lightbox aspect clasic. Strip folosește JQuery și este acceptat în toate browserele majore.
10. Fluidbox
Fluidbox este un plugin jQuery conceput pentru a oferi 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 mai mari. rezoluție înaltă pentru o imagine frumoasă.
11. Lumină
Featherlight este un plugin foarte ușor la 400 șiruri JavaScript , 100 linii CSSși o dimensiune mai mică de 6 Kb. Lightbox inteligent, receptiv, acceptă imagini, AJAX și iframe în mod implicit. De asemenea, îl puteți adapta în funcție de nevoile dvs. Featherlight funcționează în IE8+, toate browserele moderne și platformele mobile.
12. Yalb
Yalb înseamnă Yet Another Lightbox - dar nu este. Yalb vine cu set mare interfețe care includ evenimente utilizator care vă permit să determinați starea acestuia (deschis, închis).
13. LightGallery
JQuery lightGallery este o galerie pentru afișarea de imagini și videoclipuri. Ea are multe funcții utile, ca aspect receptiv, suport pentru dispozitive mobile tactile, efecte pop-in și fade-out, subtitrări și descrieri pentru ilustrații și multe altele.
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.
PhotoSwipePhotoSwipe 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. Puteți schimba imaginile cu o glisare a degetului ca și cum ar fi 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. Acest excelentă alternativă 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
Plugin Swipebox jQuery cu suport gesturi de atingere 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ă este 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. Acest plugin perfect, dacă dezvoltați numai pentru 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, suportă și diverse tipuri media, inclusiv Youtube Embed, video HTML, SWF și formulare de intrare.
- 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, personalizate Metode JavaScriptși evenimente de utilizator. 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 un număr mare 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 afișaj diferit, 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 Licență
Descărcați cea mai recentă versiune ca fișier zip
Sau folosiți un manager de pachete...
NPM: npm install lightbox2 --save
Bower: bower install lightbox --save
Deschideți fișierul zip și aruncați o privire la barebones, exemplu de lucru care este inclus în folderul /examples.
Sunteți gata să setați Lightbox pe pagina dvs.? Începeți prin a include Lightbox CSS și Javascript. Puteți luați ambele fișiere din folderul /dist.
- Includeți CSS-ul din partea de sus a paginii dvs. în etichetă:
- Includeți JavaScript în partea de jos a paginii înainte de eticheta de închidere:
Asigurați-vă că jQuery, care este cerut de Lightbox, este și el încărcat.
- Dacă utilizați deja jQuery pe pagina dvs., asigurați-vă că este încărcat înainte de lightbox.js . Este necesar jQuery 1.7 sau mai mare.
- Dacă tu nu sunt utilizând în prezent jQuery, am creat un fișier pachet care include atât Lightbox, cât și jQuery. Includeți dist/js/lightbox-plus-jquery.js în loc de lightbox.js .
- Imagini unice. Adăugați un atribut data-lightbox la orice link de imagine pentru a activa Lightbox. Pentru valoarea atributului, utilizați un nume unic pentru fiecare imagine. De exemplu: Imaginea #1
- Opțional:
- Adăugați un atribut de titlu de date dacă doriți să afișați o legendă.
- Adăugați un atribut data-alt dacă doriți să setați atributul alt al imaginii legate.
Dacă aveți un grup de imagini similare pe care doriți să le combinați într-un set, utilizați aceeași valoare a atributului data-lightbox pentru toate imaginile. De exemplu: Imaginea #2 Imaginea #3 Imaginea #4
Opțiuni| lightbox.option(( "resizeDuration" : 200 , "wrapAround" : true )) | Opțiune Descriere implicită | alwaysShowNavOnTouchDevices |
| fals | Dacă este adevărat, săgețile de navigare la stânga și la dreapta care apar la trecerea mouse-ului când se vizualizează seturi de imagini vor fi întotdeauna vizibile pe dispozitivele care acceptă atingere. | albumLabel |
| „Imaginea %1 din %2” | Opțiune Descriere implicită | Textul afișat sub legendă atunci când vizualizați un set de imagini. Textul implicit arată numărul actual al imaginii și numărul total de imagini din set. |
| dezactivați derularea | 600 | Dacă este adevărat, împiedicați derularea paginii în timp ce Lightbox este deschis. Acest lucru funcționează prin setările overflow ascunse pe corp. |
| fadeDuration | Timpul necesar pentru ca containerul Lightbox și suprapunerea să dispară și să dispară, în milisecunde. | Dacă este adevărat, redimensionați imaginile care s-ar extinde în afara ferestrei de vizualizare, astfel încât să se potrivească perfect în interiorul acestuia. Acest lucru scutește utilizatorul de a trebui să deruleze pentru a vedea întreaga imagine. |
| imageFadeDuration | 600 | Timpul necesar pentru ca imaginea să dispară odată încărcată, în milisecunde. |
| maxWidth | Dacă este setată, lățimea imaginii va fi limitată la acest număr, în pixeli. Raportul de aspect nu va fi menținut. | |
| maxHeight | Dacă este setată, înălțimea imaginii va fi limitată la acest număr, în pixeli. Raportul de aspect nu va fi menținut. | |
| pozițieFromTop | 50 | Distanța de la partea de sus a ferestrei de vizualizare la care va apărea containerul Lightbox, în pixeli. |
| resizeDuration | 700 | Timpul necesar pentru ca containerul Lightbox să-și anime lățimea și înălțimea la trecerea între imagini de diferite dimensiuni, în milisecunde. |
| showImageNumberLabel | Timpul necesar pentru ca containerul Lightbox și suprapunerea să dispară și să dispară, în milisecunde. | Dacă este fals, textul care indică numărul actual al imaginii și numărul total de imagini din set (Ex. „imaginea 2 din 4”) va fi ascuns. |
| înfășurare | Opțiune Descriere implicită | Dacă este adevărat, atunci când un utilizator ajunge la ultima imagine dintr-un set, va apărea săgeata de navigare la dreapta și va continua să avanseze, ceea ce îl va duce înapoi la prima imagine din set. |
Lightbox2 a fost testat cu succes în următoarele browsere:
- Internet Explorer.
Fișierul lightbox-plus-jquery.js include jQuery v2.x și acceptă IE 9+. Dacă doriți să acceptați IE 6, 7 și 8, utilizați propria copie a jQuery v1.x cu lightbox.js . - Chrome
- Safari
- Firefox
- iOS Safari
- iOS Chrome
- Browser Android
- Android Chrome
Urmați pașii de mai jos pentru a obține ajutor. Asigurați-vă că ați citit documentația de pe această pagină și că ați privit mai întâi exemplul inclus.
Nu utilizați Github Issues pentru a raporta solicitări de asistență personală.
→ Lightbox cu jQuery
Articolul oferă un exemplu de lansare a pluginului Lightbox Gallery în jquery și aici puteți descărca o versiune de lucru. Iată cum funcționează de fapt:
Lucrul bun despre această implementare lightbox este că poate fi controlată printr-un hash de configurare. Pornește foarte ușor. Pentru a rula pluginul aveți nevoie de oricare biblioteca jquery, începând cu versiunea 1.2.6, în sine plugin lightboxși un fișier de stil. În arhivă, chiar mai jos, se află opțiune gata făcută. Descărcați, extrageți și deschideți fișierul index.html în orice browser. Ar trebui să funcționeze.
Sper că toată lumea înțelege cum să-l lanseze. Vă voi spune doar cum să gestionați setările lightbox. Permiteți-mi să observ imediat că pluginul nu funcționează în IE 6 și, prin urmare, setăm condiția de inițializare pentru toată lumea, cu excepția „măgarului”. Următorul încă unul punct important: $(document).ready , deoarece inițializarea nu va funcționa până când arborele DOM este gata. Procesul de inițializare în sine decurge astfel:
$("#galeria a").lightbox();
Exemplu de cod sursă:
dacă (!(navigator.userAgent.indexOf("MSIE 6") >= 0))( $(document).ready(function())( $("#galeria a").lightbox(); $.Lightbox. construct (( „viteză”: 500, „show_linkback”: adevărat, „keys”: ( închidere: „q”, anterioară: „z”, următor: „x”), „opacitate”: 0,8, text: ( imagine: „ Poza”, din: „de la”, close: „Închide”, closeInfo: „Puteți încheia vizualizarea făcând clic în afara imaginii.”, ajutor: ( închidere: „”, interacționați: „Ajutor interactiv” ), despre: ( text: "", titlu: "", link: "/index.shtml" ) ), fișiere: ( imagini: ( anterior: "/demo/img/jquery-lightbox/prev.gif", următorul: "/demo/ img/ jquery-lightbox/next.gif", gol: "/demo/img/jquery-lightbox/blank.gif", se încarcă: "/demo/img/jquery-lightbox/loading.gif" ) ) )); ) );
viteza - viteza efectului de deschidere si inchidere a fotografiei, in milisecunde.
Tastele parametrilor hash: close, prev și next sunt tastele folosite pentru a efectua control alternativ vizualizarea galeriei.
opacitate - transparența fundalului întunecat. Acceptă valori de la 0 la 1. Culoarea de fundal poate fi schimbată în fișierul de stil.
Parametrii hash-ului imaginilor, imbricate în hash-ul fișierelor, sunt căile către imagini pentru fundal, animația indicatorului de încărcare și butoanele înapoi-înainte.
De asemenea, puteți schimba etichetele de navigare în hash-ul textului.
