Descrierea luminii. Descriere JQuery Lightbox.

→ Lightbox pe jQuery

Articolul oferă un exemplu de plug-in de galerie cutie de lumină. pe jquery. Și aici poți descarca opțiune de lucru. Așa funcționează de fapt:

Această implementare a casetei Light este bună deoarece poate fi controlată printr-o hash de configurare. Începe foarte ușor. Pentru a porni pluginul, aveți nevoie de orice bibliotecă de jQuery, începând cu versiunea 1.2.6, pluginul de lumină și fișierul de stil. În arhivă, chiar mai jos, se află opțiunea finalizată. Descărcați, despachetați și deschideți fișierul index.html. În orice browser. Ar trebui să funcționeze.

Sper că cum să ruleze totul este de înțeles. Voi spune numai cum să gestionați setările casetei Lightbox. Imediat, observ că pluginul nu funcționează în IE 6 și, prin urmare, punem starea de inițializare pentru toate celelalte decât "măgar". Următorul mai mult un moment important: $ (Document) .readypentru că până când lemnul este gata Dom. Inițializarea nu se va rostogoli. Procesul de inițializare este adevărat:

$ ("# Galerie a"). Lightbox ();

Un exemplu al codului sursă:

viteză. - Viteza deschiderii fotografiei și a închiderii sale, în milisecunde.

Parametrii hash cheile: Închidere, Prev și Următorul Acestea sunt cheile la care galeria alternativă vizualizează managementul.

opacitate - Transparența fundalului estompozitiv. Ia valori de la 0 la 1. Culoarea fundalului poate fi schimbată în fișierul de stil.

Parametrii imaginilor Hesha, investit în fișiere Hash, este calea către imagini pentru fundal, animația indicatorului de descărcare și a butoanelor din spate.

De asemenea, în textul Heshe, puteți schimba eticheta pentru a naviga.

Dacă primiți un site pentru imagini construite pe jQuery, atunci, probabil, Lightbox va fi folosit pe acesta. Puterea luminoasă este că poate chiar să transforme imaginile într-o galerie atractivă și eficientă. În acest sens, este în acest sens popularitatea unor astfel de pluginuri pentru jQuery în sfera designului web.

Datorită comunității JQuery, există un număr mare de pluginuri de lumină, care creează oportunități excelente pentru designeri pentru a lucra cu imagini. În lecția noastră, sunt prezentate 15 plug-uri diferite pentru a acorda atenție.

UMPLE.

Topup este ușor de utilizat biblioteca JavaScript pentru ieșirea imaginilor neobișnuite și paginile web. Biblioteca este controlată prin JQuery și JQuery UI pentru a oferi compatibilitatea și compactitatea încrucișată.

Plugin Highslide.

Highslide este un instrument special pentru vizualizarea imaginilor, a mass-media și galerii.

Cutie de culori

Little Plugin Plugin pentru JQuery 1.3+.

Lightbox 2 este un script simplu, neobișnuit, care este folosit pentru a scoate imagini în stratul de acoperire pagina curenta. Este ușor să îl instalați și funcționează în toate browserele moderne.

prettyphoto acceptă nu numai imagini, ci și video, flash, YouTube și Ajax. LikeBox pentru fișierele media.

Slimbox 2 - caseta de iluminat 2 Clona 4 kB dimensiuni, implementate folosind jQuery.

Shadowbox - aplicație web pentru vizualizarea fișierelor media care acceptă toate formatele populare. ShadowBox este scris pe JavaScript și CSS și are opțiuni bune de configurare.

Pirobox extins v.1.0.

Unul dintre avantajele acestui plug-in este capacitatea de a deschide orice tip de fișier - de la conținutul încorporat al fișierului UWF, de la imagine simplă dosarul de până la.pdf.

Alte caracteristici minunate: Schimbarea automată a dimensiunii imaginii și tehnologia de asistență și aruncarea.

GreyBox poate fi folosit pentru a afișa site-uri web, imagini și alte conținuturi.

Super Box este un plugin care afișează ferestre cu efectul luminos.

Crearea unei galerie foto pe site

Galerie foto Lightbox2. - Instalarea și configurarea

Într-unul din articolele anterioare, a fost spus despre cele mai populare galerie foto gratuite gratuite - Cutie de lumină.creat pe baza bibliotecii de script jquery. . Pe bază Cutie de lumină. Designerii web au dezvoltat multe clone interesante, dar opțiunea inițială continuă să se dezvolte și este utilizată cu succes pentru galerii foto pe o varietate de site-uri. Ia in considerare ultima actualizare - Conecteaza Lightbox2.Diferită cu o dimensiune mică și ca întotdeauna, instalarea ușoară pe site. În care Lightbox2. Are un design atractiv, funcționează în toate browserele și, care este deosebit de plăcut, afișează corect imagini mari, stoarcerea lor în conformitate cu dimensiunea ecranului de utilizator.

Dezvoltator simplu Lightbox2. - Lokesh Dhakar, programator de la San Francisco. În prezent (2014) este Versiunea disponibilă a Lightbox v2.7.1, pe care vom încerca să le instalăm pe site. Un exemplu de desfășurare a unei singure imagini folosind Lightbox2. Prezentat în figură.

Instalarea galeriei foto Lightbox2.

Pentru a instala galeria foto Lightbox2. Primul creați pe site dosar nou, numindu-l, desigur, lightbox2.. Acest dosar trebuie să fie în același director ca și pagina Galerie foto. Apoi descărcați arhiva și despachetați-o în dosarul creat. Vom avea două script-uri în ea ( * .js.), imagini auxiliare (dosar img.) I. fișierul CSS. (*.Css.). Apoi, introduceți în pagina de titlu cu galeria foto viitoare din interiorul etichetei ... Următoarele linii care indică modalități pentru noile noastre fișiere:

Notă importantă: dacă utilizați mai multe pluginuri pe site-ul dvs. jquery.Mai convenabil pentru a transfera fișierul jquery.js (de preferință cea mai recentă versiune) în dosarul rădăcină, astfel încât să nu-l încărcați de mai multe ori. În acest caz, rândul de apel la acesta va arăta în mod egal pentru toate pluginurile. În special, pentru exemplul nostru, se dovedește:
.
Nu este recomandat să utilizați mai multe pagini mai multe diferite versiuni jquery.astfel încât să nu se confrunte cu ceilalți. În același timp, asigurați-vă că verificați funcționarea pluginurilor cu versiune instalată jquery.Deoarece nu toate versiunile sunt interschimbabile.

Acum trebuie să plasați imaginile dorite pe site-ul paginii. Ca de obicei, fiecare trebuie să fie reprezentat ca o miniatură (mică) și o imagine completă (mare) la care indică legătura din miniatură. În eticheta legăturilor, specificați suplimentar Rel \u003d "Lightbox" - pentru o singură imagine și dacă vrem să combinăm mai multe imagini în galerie, atunci orice expresie este aceeași pentru toți, de exemplu, rel \u003d "Lightbox-One"

etc.

Dacă aveți nevoie să faceți inscripții la imagini, plasați-le în link-uri de titlu.
Un exemplu de galerii foto simple din trei imagini este prezentat în figura:

Notă importantă: dacă dimensiunea imaginii principale ( big.jpg.) mai mult decât dimensiunea Ecran în browserul utilizatorului, atunci Lightbox2.personalizează automat (reduce) de dimensiunea ecranului. În acest caz, imaginea mărită se potrivește întotdeauna în ecran, indiferent de ce dispozitiv este folosit pentru a vizualiza: un smartphone, un tabletă sau un monitor de înaltă rezoluție.

Prin urmare, este de dorit ca imaginea mare să aibă o sursă de rezoluție, de exemplu, cel puțin 1000 pixeli pe verticală ecran standard Full Hd. - 1920x1080. În exemplul nostru, aceasta este o imagine "Sâmbătă".

Configurarea galeriei foto Lightbox2.

Pentru a configura fișierul de fișiere galleric galleric lightbox.js. în orice HTML- sau editor de text, de exemplu, în notebook. La începutul fișierului veți vedea setările disponibile:
the.fadation \u003d 500; // Ora de deschidere Imagini MS
thes.fitimagesinviewport \u003d true; // montarea dimensiunii ecranului TRUE / FALSE
acest lucru.resationaturation \u003d 700; // timpul de implementare a imaginilor MS
this.positionfromtop \u003d 50; // punctul de vânt de vânt de la partea de sus a ecranului
acest.showimagenumberlabel \u003d adevărat; // concluzii Imagini TRUE / FALSE
etc.

Principalele sunt echipate cu comentarii în limba rusă. Modificați valorile parametrilor și după salvarea fișierului lightbox.js. Puteți observa rezultatul prin deschiderea paginii cu galeria foto din browser.

Unii parametri ai ferestrei galeriei, de exemplu, culoarea fundalului și transparența sa, culoarea inscripției etc. sunt setate în fișierul CSS lightbox.Css.. Imagini auxiliare (înainte, înapoi, descărcare, ieșire) sunt situate în dosar img.Și ele pot fi schimbate și la discreția dvs.

Pe alte programe de creare pe site galerie foto, carusel de imagini și slideshow-uri, vezi și în secțiunea "

De multe ori au făcut recenzii despre diferitele galerii de imagini, au adunat o colecție extinsă de slideshow-uri spectaculoase și de-feline. Există în Piggy Bank și Lightbox numai pe CSS3, fără a conecta biblioteci JS suplimentare. Dar timpul nu sta în regulă, utilizatorii utilizează din ce în ce mai multe dispozitive mobile pentru navigarea pe Internet, ceea ce înseamnă adaptabilitatea elementelor web și, în special, galeriile foto cu efectul "" devine una dintre prioritățile la care designerii web și dezvoltatorii ar trebui să acorde atenție .

Am prezentat o altă selecție de 15 jquery adaptiv. Plugin-uri care sunt prieteni, ambele cu browsere desktop și se potrivesc perfect în ecranele diferite dispozitive mobile (laptop-uri, smartphone-uri, tablete etc.).

Vedeți demo-urile pe site-urile dezvoltatorilor, descărcați pluginul dvs. dorit și creați, creați, creați ...

1. Ilightbox.

ilighbox. - Aceasta este o jquery cu casetă ușoară cu un suport larg tipuri diferite Fișiere: imagini, video, flash / SWF, Ajax, cadre și cărți încorporate. Acest plugin adaugă și butoane. retele socialepermițând utilizatorilor să împărtășească conținut prin Facebook, Twitter sau Reddit. Caracteristică excelentă a organizării slideshow-urilor spectaculoase, galerii de imagini și clipuri video, cu vizualizarea în modurile obișnuite și pe ecran complet.

ilighbox. Funcționează destul de repede și când vizualizați dispozitivele mobile, mai mult decât afișează corect conținutul prelucrat. Printre altele, folosind acest plugin, puteți implementa cu ușurință ieșirea blocurilor de informații pe tipul ferestrei modale.

Dependență: JQuery.
Sprijiniți browserele: IE7 +, Chrome, Firefox, Safari și Opera
Licență: Și iadul îl cunoaște)))

2. SwipipeBox.

SWPIPEBOX. - aceasta este plugin jquery. cu suportul ecranul tactil Platforme mobile. În plus față de imagini, pluginul acceptă un videoclip încorporat de la YouTube și Vimeo. SwipeBox este foarte ușor de fixat la orice proiect, pluginul are mai multe opțiuni intuitive pentru configurarea funcționalității și comportamentului acesteia. Pe site-ul dezvoltatorului documentație detaliată Cu privire la conexiunea și utilizarea pluginului, fără apă excesivă, totul este numai în cazul, deci nu este greu să dai seama ce, și de ce, cred că nu va fi dificil.

Dependență: JQuery.
Sprijiniți browserele: IE9 +, Chrome, Safari, Firefox, Opera, IOS4 +, Android și Windows Phone
Licență: Nu am definit, poate că veți fi norocos))

3. MagnificulPopup.

Pentru o lungă perioadă de timp, bine-cunoscută și bine dovedită-plug-in-plug-in pe jquery sau zepto.js. Autorul plugin-Dmitry Semenov, care este un dezvoltator și plugin photoswipe, care va spune chiar jos. Vine în pluginul JQuery / Zepto, are mai multe oportunități care lipsesc în Photoswipe, cum ar fi suportul video, cartografiere și conținut AJAX, implementare modal Windows. cu forme încorporate. Pentru toate criteriile, acesta este un alt instrument minunat în dezvoltatorul web. Separat există un plugin pentru WordPress și documentația detaliată pentru configurare și utilizare. Doar lipsa documentației în limba rusă, judecând după numele și prenumele, autorul pare a fi rusă, nu a înțeles niciodată din cauza nocivității, sau din cauza conștientizării imaginare a sentimentului său și a lui Blah. Ei bine, bine, la cine trebuie sacrificat, de asemenea, nu scufundăm și ceai))).

Dependență: jQuery 1.9.1+ sau zepto.js
Sprijiniți browserele: IE7 (parțial), IE8 +, Chrome, Firefox, Safari și Opera
Licență: Licența MIT.

4. Photoswipe.

Dependență: Javascript sau jquery
Sprijiniți browserele
Licență: Licența MIT.

11. Fainelight.

6 K.Bit Lightbox-Plugin, pentru mai mulți sau mai puțin dezvoltatori savvy, este echipat cu toate caracteristicile cele mai necesare. Pe lângă susținerea tuturor tipurilor comune de conținut (text, imagini, iFrame, AJAX), există o conexiune opțională opțională, precum și vă puteți dezvolta propria extensie pentru acest plugin, care va respecta pe deplin nevoile dvs. atunci când creați un nou proiect . La fel ca toată această economie (dezvoltarea de expansiune), nu a fost deosebit de deliberat, dar cei care vor introduce acest plugin, cred că vor înțelege))).

Dependență: JQuery.
Sprijiniți browserele: IE8 +, Chrome, Firefox, Safari și Opera
Licență: Licența MIT.

12. LIGHTGALLY.

LightGallery. - plugin-ul multifuncțional cu multiple caracteristici suplimentare. Vine cu mai mult de 20 de opțiuni, pentru a configura cele mai mici detalii ușoare. Există totul, bine sau aproape tot)). O galerie deplină de imagini cu miniaturi construite cu elemente de navigație și o derulare miniaturală. MARKUP HTML simplu sub forma unei liste neordonate

tranziții netede

Aspect

LightGallery.

Dependență: JQuery.
Sprijiniți browserele: IE7 +, Chrome, Firefox, Safari, Opera, IOS, Android și Windows Phone
Licență: Licența MIT.

13. stripjs.

Neobișnuit, aș spune chiar: o implementare neobișnuită a casetei Lightbox, mai precis, nu este destul de obișnuită reprezentare a conținutului, atunci când imaginea sau videoclipul, în designul casetei, apar în partea dreaptă, umplerea întregului ecran, dar numai pe o dimensiune specificată Imagine sau video de dimensiune completă. Pe ecrane mari Această abordare este clară, posibilitatea interacțiunii cu pagina rămâne. Pe ecranele mici de dispozitive mobile, toate acest design inovator, intră fără probleme în caseta de lumină clasică. Ideea este interesantă, uitați-vă la demo, poate că cineva va introduce o astfel de creație.

Dependență: JQuery.
Sprijiniți browserele: IE7 +, Chrome, Firefox, Safari, Opera, iOS 5+ și Android 3+
Licență: Licență Creative Commons By-NC-ND 3.0

14. Lightlayer.

O plugin ușor de utilizat, care este bine combinată cu orice proiect și, de asemenea, arată bine pe orice ecran. Pluginul Lightlayer prezintă controlul asupra setului de setări, cum ar fi schimbarea culorii fundalului și a gradului de transparență, poziția unității de bază, selectarea efectelor de tranziție la deschiderea / închiderea, funcțiile pe care utilizatorii le pot manipula independent. Pluginul funcționează excelent cu conținutul site-urilor externe, playere video încorporate și cărți.

Dependență: JQuery.
Sprijiniți browserele: IE9 +, Chrome, Firefox, Safari și Opera
Licență: Licența MIT.

15. Fluidbox

Fluidbox - Likox Plugin exclusiv pentru imagini. Numărul de toate variantele de reprezentare a imaginii este cu adevărat impresionant. Pluginul funcționează excelent cu imagini în diferite modele, inclusiv imagini plutitoare, o imagine cu poziționare absolută, imagini și fotografii încadrate de cadru și având liniuțe, cu imagini unice și combinate în galerie. În general, în apă de apă să se toarnă, să picteze toate capabilitățile pluginului într-o scurtă viziune, nu va funcționa oricum, deci este mai bine să te uiți la demo, răsuciți, întoarceți-vă și gândiți că acest plugin va dori mulți.

Dependență: JQuery.
Sprijiniți browserele: IE9 +, Chrome, Firefox, Safari, Opera
Licență: Licența MIT.

Acest lucru este probabil all! Sper că această mică revizuire vă va ajuta să înțelegeți grămada produselor de dezvoltare web propuse. Vreau să observ că nu toate pluginurile prezentate în selecția pluginurilor pe care le-am folosit în proiecte de lucru, majoritatea s-au dovedit pe site-uri de testare sau pe LaCak, deci dacă apar întrebări, cel mai probabil le vom rezolva împreună și împreună, Ca întotdeauna totul va funcționa cu noi.

Căutați un șablon rusificat potrivit pentru obiectivele dvs.? Probabil, în acest caz, ar trebui să vizitați markeplele templatemonster. Pentru simplul motiv că cel mai recent a apărut pe site noua secțiune Șabloane. Acum, fiecare utilizator se poate familiariza cu colecția care va actualiza și actualiza. Textele pentru șabloane au fost scrise manual. Dar acesta nu este singurul plus din aceste soluții gata făcute. La urma urmei, în pachetele lor puteți găsi tot ceea ce va facilita munca la dezvoltarea proiectului online, inclusiv editorul vizual.

Cu tot respectul, Andrew

Lightbox este un plugin jquery care este utilizat pentru a afișa o imagine sau orice alt conținut într-o fereastră special decorată, care este afișată, de regulă, pe un fundal umbrit translucid din partea de sus a paginii principale de conținut.

Înainte de a instala pluginul la pagină și să vă angajați să setați, să aruncăm o privire la exemple:

Noțiuni de bază cu Lightbox

Descarca ultima versiune Pluginul (disponibil și prin Bower: Bower Install Lightbox2 --Save). După aceea, dezvăluiți fișier Zip. și căutați în exemplul de lucru de decupare, care este în dosar exemple..

Sunteți gata să instalați caseta Lightbox pe pagina dvs.? Start S. cSS conexiuni și JavaScript. Puteți lua ambele fișiere din dosar. dist.. Introduceți următorul cod între etichetele capului din pagina dvs. web

Următorul cod care conectează inserția pluginului în fața etichetei de închidere a corpului:

Asigurați-vă că jquery doriți, de asemenea, încărcate. Dacă utilizați deja jQuery (jquery necesar 1.7 sau mai mare) pe pagină, asigurați-vă că este încărcat la lightbox.js.. Dacă nu sunteți conectat (ă) cu jQuery, este utilizat DIST / JS / Lightbox-Plus-JQuery.js, care are deja această bibliotecă sau descărcați cea mai recentă versiune de la. Site-ul. Asigurați-vă că cele patru imagini prescrise în lightbox.Css. Locație în locația specificată. Puteți face imagini din dosar / Dis / imagini.

Acum ne vom ocupa de codul HTML. Adăugați atributul Date-Lightbox la linkul de referință și la care vrem să aplicăm pluginul nostru. În valoarea atributului de înaltă calitate, utilizați un nume unic pentru fiecare imagine. De exemplu:

Imaginea # 1.

Adăugați atributul de titlu de date dacă doriți să afișați titlul. Dacă aveți un grup de imagini asociate pe care doriți să le combinați într-un set, utilizați aceeași valoare în atributul Date-Lightbox pentru imaginile dorite. De exemplu:

Img 2 img 3 img 4

Setări Lightbox.

Dacă doriți să modificați orice setări implicite, sunați la opțiunea:.

alwaysshownanVontouchDevice implicit: False
În cazul în care un adevărat., săgețile de navigație din stânga și din dreapta care apar atunci când se află mouse-ul atunci când vizualizează un set de imagini, vor fi vizibile pe dispozitivele cu dispozitive de suport de intrare touch
fadedarea implicită: 500
Timpul necesar pentru a dispare recipientul în milisecunde.
fitimagesinViewport implicit: Adevărat
În cazul în care un adevărat.Este redusă proporțional dimensiunea imaginii, astfel încât imaginea să se potrivească în zona de vizualizare. Elimină utilizatorul de la necesitatea de a defila 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 observat.
maxheight.
Dacă este setat, lățimea imaginii va fi limitată la această valoare (în pixeli). Raportul de aspect nu va fi observat.
pozitieFromtop Implicit: 50
Distanța de la partea de sus a ferestrei de vizualizare la recipientul de lumină (în pixeli).
resideția implicită: 700
Timpul în care containerul de lumină va schimba lățimea și înălțimea la schimbarea imaginilor de diferite dimensiuni (în milisecunde).
showIMAGENUMBERLABEL implicit: Adevărat
În cazul în care un falsTextul va indica numărul actual de imagine și numărul total de imagini din set, de exemplu: "Imaginea 2 din 4".
implicit wraparound: false
În cazul în care un adevărat.Când este afișată această imagine, butonul pentru a afișa următoarea imagine nu dispare. Apăsând va duce la spectacolul primei imagini.