Web design și optimizare pentru motoarele de căutare. Cele mai bune pluginuri Lightbox pentru Galeria de Lightbox receptivă WordPress

Lightbox este un plugin jQuery care este folosit pentru a afișa o imagine sau orice alt conținut într-o fereastră special concepută, care este de obicei afișată pe un fundal umbrit translucid deasupra conținutului paginii principale.

Înainte de a instala pluginul pe pagină și de a-l configura, să aruncăm o privire la exemplele:

Noțiuni introductive cu Lightbox

Descarca ultima versiune plugin (disponibil și prin Bower: bower install lightbox2 --save). După aceea dezarhivați fișier Zipși aruncați o privire la exemplul de lucru redus situat în folder exemple.

Ești gata să instalezi Lightbox pe pagina ta? Începeți prin a conecta CSS și Javascript. Puteți lua ambele fișiere din folder dist. Lipiți următorul cod între etichetele head din pagina dvs. web

Introduceți următorul cod care conectează pluginul înainte de eticheta body de închidere:

Asigurați-vă că jQuery-ul necesar Lightbox este și el încărcat. Dacă utilizați deja JQuery (necesită JQuery 1.7 sau o versiune ulterioară) pe pagină, asigurați-vă că se încarcă înainte lightbox.js. Dacă nu aveți jQuery activat, utilizați dist/js/lightbox-plus-jquery.js, care are deja această bibliotecă, sau descărcați cea mai recentă versiune de pe. site-ul. Asigurați-vă că cele patru imagini enumerate în lightbox.css locație în locația specificată. Puteți lua imagini din folder /dist/imagini.

Acum să trecem la codul HTML. Adăugați un atribut data-lightbox la linkul care conține imaginile la care dorim să aplicăm pluginul nostru. Pentru valoarea atributului, utilizați un nume unic pentru fiecare imagine. De exemplu:

Imaginea #1

Adăugați un atribut data-title dacă doriți să afișați titlul. Dacă aveți un grup de imagini înrudite pe care doriți să le combinați într-un set, utilizați aceeași valoare în atributul data-lightbox pentru imaginile necesare. De exemplu:

Img 2 Img 3 Img 4

Setări lightbox

Dacă doriți să modificați oricare dintre opțiunile implicite, apelați opțiunea: metoda.

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

alwaysShowNavOnTouchDevices Implicit: false
Dacă Adevărat, apoi săgețile de navigare la stânga și la dreapta care apar la trecerea mouse-ului atunci când vizualizați un set de imagini vor fi întotdeauna vizibile pe dispozitivele cu atingere
fadeDuration Implicit: 500
Timpul necesar pentru ca containerul să dispară, în milisecunde.
fitImagesInViewport Implicit: true
Dacă Adevărat, apoi reduceți proporțional dimensiunea imaginii, astfel încât imaginea să se potrivească în zona de vizualizare. Acest lucru scutește utilizatorul de a trebui să deruleze pentru a vedea întreaga imagine.
lățimea maximă
Dacă este setată, înălțimea imaginii va fi limitată la această valoare (în pixeli). Raportul de aspect nu va fi respectat.
maxHeight
Dacă este setată, lățimea imaginii va fi limitată la această valoare (în pixeli). Raportul de aspect nu va fi respectat.
positionFromTop Implicit: 50
Distanța de la partea de sus a ferestrei de vizualizare la containerul Lightbox (în pixeli).
resizeDuration Implicit: 700
Timpul în care containerul Lightbox își va schimba lățimea și înălțimea la schimbarea imaginilor marimi diferite(în milisecunde).
showImageNumberLabel Implicit: true
Dacă fals, textul va indica numărul actual al imaginii și numărul total de imagini din set, de exemplu: „Imaginea 2 din 4”.
wrapAround Implicit: false
Dacă Adevărat, apoi când este afișată ultima imagine, butonul pentru afișarea imaginii următoare nu dispare. Făcând clic pe el, se va afișa prima imagine.

Pluginurile Lightbox pentru WordPress vă permit să utilizați o fereastră pop-up pe site-ul dvs. pentru a afișa imagini în partea de sus a paginii curente. Ele pot fi folosite pentru a crea site-uri web frumoase.

Aceste pluginuri jQuery sunt folosite pentru a adăuga ferestre pop-up pe site-ul dvs. Când faceți clic pe orice imagine din galeria de diapozitive, acea imagine se deschide într-o fereastră pop-up împreună cu butoanele următor, precedent și închidere. Astfel de pluginuri sunt foarte Unealtă 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. În fiecare an sunt multe jQuery nou pluginuri care vă ajută să creați site-uri web frumoase. Aceste Pluginuri jQuery au caracteristici uimitoare și multe caracteristici noi.

Cele mai bune pluginuri JQuery lightbox pentru WordPress

În acest articol am dori să vă prezentăm o listă cu unele dintre cele mai bune și utile Pluginuri pop-up JQuery pentru 2015, care vă poate ajuta să creați site-uri web frumoase și atractive.

Galeria Lightbox Slider

Lightbox Slider Gallery - ușor de gestionat și nu ocupă mult spațiu Galeria jQuery, afișând imagini și videoclipuri.

W.P. jQuery Lightbox

WP jQuery Lightbox este un plugin de tip pop-up jQuery simplu și ușor. Are tranziții CSS3 pentru efecte de netezire și dimensiuni gestionabile ale imaginii. Îmbunătățit pentru dispozitive mobile.

Lightbox Gallery este un expert gratuit care vă ajută să creați cu ușurință galerii de imagini pop-up cu efecte de suprapunere uimitoare în câteva clicuri, fără o singură linie de cod.

FancyBox ușoară

Easy FancyBox este un instrument pentru afișarea imaginilor, conținutului HTML și multimedia într-un stil lightbox Macintosh, care apare în partea de sus a unei pagini web.

Caseta de lumina

Lightbox este un plugin pop-up receptiv și ușor de utilizat. Acest plugin jQuery este foarte ușor de utilizat și nu are caracteristici inutile.

FooBox Imagine Lightbox

FooBox Image Lightbox - Folosit pentru a crea o galerie de imagini într-o fereastră pop-up pur și simplu ca glisoare „încorporate”. Un plugin jQuery foarte receptiv, care funcționează la fel de bine pe un monitor mare, precum și pe o tabletă sau smartphone.

Lightbox Plus Colorbox

Lightbox Plus Colorbox este un plugin jQuery ușor, personalizabil. Compatibil cu jQuery 1.3.2+ Browsere Firefox, Safari, Chrome, Opera, Internet Explorer 7+.

Royal PrettyPhoto

Royal PrettyPhoto este un alt plugin pop-up jQuery potrivit pentru imagini, conținut inline, iFrame, Hărți Google, solicitări Ajax, videoclipuri Vimeo și YouTube.

Responsive Lightbox de la dFactory este un plugin jQuery pop-up fluid, puternic și revoluționar care va aduce beneficii designerilor și dezvoltatorilor web ambițioși și creativi.

Swipebox ușor

Easy Swipebox este un plugin jQuery pentru desktop, mobil și tablete. Acesta este un plugin jQuery ușor de utilizat.

Popup magnific

Magnific Popup este un plugin de tip pop-up jQuery responsiv, axat pe oferirea celei mai bune experiențe pentru utilizator. lucru confortabil cu orice dispozitiv (compatibil Zepto.js).

Caseta luminoasă 2

Lightbox 2 este o mică bibliotecă JavaScript folosită pentru a afișa imagini în partea de sus a paginii curente. Este ușor de instalat și funcționează cu toate browserele moderne.

Lightbox este o mică bibliotecă JavaScript care este utilizată pentru a afișa imagini mari în partea de sus a paginii curente. Este ușor de instalat și funcționează în toate browserele moderne.

Scriptul vă permite să afișați imagini atât unice, cât și cu comutare într-o fereastră pop-up.

Instructiuni de folosire.

PARTEA I: Conectarea bibliotecii.

1. Descărcați și despachetați arhiva cu scriptul de aici

2. În folderul JS, găsiți fișierele jquery-1.10.2.min.js și lightbox-2.6.min.js și copiați-le în folderul cu scripturile dvs. de pe site-ul dvs.

3. Conectați aceste scripturi la pagina dvs. scriind următoarele rânduri între etichete:

4. În folderul css, găsiți fișierul lightbox.css și copiați-l în folderul cu fișierele de stil.

5. Conectați acest fișier la pagina dvs. adăugând următoarele rânduri între etichete:

6. Din folderul img, copiați următoarele fișiere pe server în folderul cu imagini ale designului site-ului dvs.: și next.png . Aceste fișiere sunt utilizate în fișierul de stil lightbox.css. În mod implicit, fișierul de stil se referă la imaginile care se află în folderul img, care are același părinte ca și folderul css. Dacă folderul de imagini și folderul de stiluri se află în foldere complet diferite, atunci ar trebui să schimbați căile către imaginile din fișierul lightbox.css cu cele corespunzătoare.

PARTEA II: Inserarea imaginilor pe pagină.

Acest script este declanșat atunci când se face clic pe un link. Linkul poate fi text sau imagine. Pentru a indica scriptului ce link ar trebui să o proceseze, trebuie să adăugați atributul data-lightbox linkului și să îi atribuiți orice valoare.

Poze unice.

Link text 1 Link text 2 Link text 3

* atributul titlu poate fi completat după cum doriți. Dacă este plin, conținutul său va fi afișat sub imaginea pop-up.

Grup de poze.

Să presupunem că aveți un grup de imagini și când faceți clic pe unul dintre linkuri, doriți să puteți derula toate imaginile din acest grup într-o fereastră pop-up fără a fi nevoie să închideți fereastra pop-up.

Link text 1 Link text 2 Link text 3

*Anterior, ați folosit atributul rel="lightbox" pentru scriptul LiteBox. Îl puteți utiliza în continuare și va funcționa, dar folosirea noilor atribute este de preferat, deoarece oferă capabilități mai avansate.

Se pare că totul a fost făcut, totul ar trebui să funcționeze, dar:

Dacă formăm un grup de imagini din imagini, atunci la vizualizare, „imaginea 1 din 8” este indicată în fereastra pop-up de sub imagini? Mi-ar plăcea să văd ceva de genul acesta „imaginea 1 din 8”.

Pentru a face acest lucru, în fișierul lightbox-2.6.min.js din linia 13 trebuie să înlocuiți acest lucru:

returnează „Imagine” + b + „ din „ + c

returnează „Imagine „ +b +” din „ +c

returnează „Imagine” + b + „ din „ + c

returnează „Imagine „ +b +” din „ +c

Ultima dată când am folosit acest script, a trebuit să-l folosesc împreună cu scriptul carusel și am observat o eroare.

Mai jos este o descriere a erorii și cum să o remediați.

Dacă avem 2 grupuri diferite de imagini pe pagină, și de exemplu în primul grup pozele au legendă (se completează atributul titlu), iar în al doilea grup atributul titlu are valori goale sau nu este înregistrată deloc, atunci când vizualizam imagini fără descriere (dacă am vizualizat anterior cel puțin o poză cu descriere), vom vedea în continuare o descriere a ultimei imagini vizualizate. Adică, scriptul refuză să ștergă titlul pentru fereastra pop-up, îl înlocuiește cu unul nou, dacă este disponibil. Cum să o repar?

Pentru a remedia eroarea de a nu șterge atributul Titlu, înlocuiți textul din fișierul lightbox-2.6.min.js de pe linia 219:

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

dacă (tipul acestui . album [ acest . currentImageIndex ] . titlu ! =="undefined" & amp ; amp ; amp ; amp ; amp ; amp ; amp ; amp ; amp ; amp ; & amp ; amp ; amp ; amp ; ; amplificator ; amplificator ; amplificator ; amplificator ; amplificator ; amplificator ; acest . album [ this . currentImageIndex ] . title ! =="" ) ( acest . $ lightbox . find ( "lb-caption") . html ( this . album [ acest . currentImageIndex ] . titlu ) . fadeIn ( „rapid” ) )

→ 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 orice bibliotecă jquery, începând cu versiunea 1.2.6, plugin-ul în sine și un fișier de stil. În arhivă, chiar mai jos, este versiunea finalizată. 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 care oferă control alternativ pentru 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.

Două imagini individuale

Set de patru imagini

Noțiuni de bază

Descărcați un zip al celei mai recente versiuni (sau oricare dintre cele anterioare) de pe pagina Versiuni Github.

Sau instalați folosind npm:

Npm instalează lightbox2 --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 prelua 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ă nu utilizați jQuery în prezent, 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 .

Confirmați că cele patru imagini încărcate de lightbox.css sunt în locația corectă. Puteți prelua imaginile din folderul /dist/images.

Inițializați cu HTML

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: 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.
Seturi de imagini. 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:

Opțiuni

Dacă doriți să modificați oricare dintre opțiunile implicite, apelați metoda opțiunii.

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”	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	fals	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	600	Timpul necesar pentru ca containerul Lightbox și suprapunerea să dispară și să dispară, în milisecunde.
fitImagesInViewport	Adevărat	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.
lățimea maximă		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	Adevărat	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	fals	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.

Suport pentru browser

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 .
Crom
Safari
Firefox
iOS Safari
iOS Chrome
Browser Android
Android Chrome

Licență

100% gratuit. Lightbox poate fi folosit gratuit atât în activități comerciale, cât și non-comerciale.
Este necesară atribuirea. Aceasta înseamnă că trebuie să lăsați intacte numele meu, linkul paginii mele de pornire și informațiile despre licență. Niciunul dintre aceste elemente nu trebuie să fie orientat spre utilizator și poate rămâne în cod.

Ajutor Ai o întrebare despre cum să folosești Lightbox?

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.

Căutați Stackoverflow pentru a vedea dacă alte persoane s-au confruntat cu aceeași problemă pe care o aveți.

Dacă problema dvs. este unică, atunci postați o nouă întrebare pe Stackoverflow. Utilizați eticheta lightbox2.

Nu utilizați Github Issues pentru a raporta solicitări de asistență personală.

Ați găsit o eroare?

Dacă găsiți o eroare, urmați instrucțiunile din Ghidul de contribuție pentru a raporta problema.