Galerie adaptivă Lightbox. Cele mai bune pluginuri de lumină pentru WordPress

Cea mai populară bibliotecă este Lightbox JavaScript, pe care o folosim de mulți ani pe desktop-uri, dar nu pe platformele mobile.

Vă dau câștigați 14 pluginuri ușoare cu suport pentru platformele mobile.

Photoswipe.

Photoswipe - Ușor, cu asistență touch, și cel mai important plugin 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 prin mutarea degetului, ca și cum ar fi o aplicație standard, cu tranziții netede.

  • Bibliotecile necesare: nu.
  • Suport pentru browser: IE8 +, Chrome, Firefox, Safari, Opera și alte browsere mobile.
  • Licență: Licența MIT.

Magnific popup.

Magnificul Popup - este un alt plugin de lux, proiectat de același autor ca și fotoswipe, Dmitry Semenovyv. Pluginul vine în pluginul jQuery / Zepto și include, de asemenea, suport care lipsește în Photoswipe, cum ar fi: suport video, carduri și Ajax. Aceasta este o alternativă excelentă pentru cei care preferă să aibă mai multe oportunități la îndemână.

  • Bibliotecile necesare: JQuery 1.9.1+ sau zepto.js
  • Suport pentru browser: IE7 (parțial) ,.
  • Licență: Licența MIT.

SWPIPEBOX.

SwipeBox plugin jquery cu suport pentru gesturi senzoriale pentru platforme mobile. De asemenea, acceptă videoclipul de la YouTube și Vimeo, în plus față de imagini. SwipeBox este ușor de instalat și are mai multe opțiuni pentru a configura configurarea acestuia. Cred că GwipeBox este prea tocat plugin de lumină pentru cei care nu au JavaScript.

Furnizor de lumină pentru bootstrap.

Inițial, pluginul de lux este absent în bootstrap. Lightbox pentru bootstrap o corectează. Dacă utilizați Bootstrap, este recomandat să utilizați această bibliotecă. Pluginul este bine integrat cu bootstrap.

  • Bibliotecile necesare: Modul jquery și bootstrap
  • Suport pentru browser: IE8 +, Chrome, Firefox, Safari și Opera
  • Licență: Licența GNU

Nivo Lightbox.

Nivo Lightbox este o plugin flexibil de lux personalizat. O varietate de opțiuni vă permit să schimbați aspect. De exemplu: subiect, animație de aspect și tip de navigare.

  • Bibliotecile necesare: JQuery.
  • Suport pentru browser:
  • Licență: Licența MIT.

Imaginei.

ImageLightbox Simple Lightbox plugin fără bibeluri. Este folosit numai pentru imagine, prin urmare numele. Nici videoclipul, nici alte tipuri nu sunt acceptate. De asemenea, nu necesită o marcare suplimentară HTML; Etichetă Este suficient. Acest plugin este ușor de lucru.

  • Bibliotecile necesare: JQuery.
  • Suport pentru browser: IE9 +, Chrome, Firefox, Safari și Opera
  • Licență: Nespecificat

Mini Lightbox.

O altă plugin de lux fără adăugare. Biblioteca cântărește doar 2 kilobyte și funcționează numai cu imagini. Acesta este pluginul perfect dacă vă dezvoltați numai pentru ultima versiune Browser și nu este nevoie să sprijiniți videoclipuri sau alte formate.

  • Bibliotecile necesare: nu
  • Suport pentru browser: Internet Explorer. 10 +, Chrome, Firefox, Safari și Opera
  • Licență: Licența MIT.

Ușor.

Pluginul frumos de lux frumos. Sprijină mai multe specii de animație, cum ar fi: Fade, elastic, zoom și derulare. În plus, aceasta suportă, de asemenea, diverse tipuri de medii, inclusiv Embed YouTube, video HTML, SWF și formulare de intrare.

  • Bibliotecile necesare: Jquery.
  • Suport pentru browser: IE9 +, Chrome, Firefox, Safari și Opera
  • Licență: Licența GPL.

Ușor ca un fulg.

FEATHELLY BASIC Plugin, 6 kilobyte cântărind pentru dezvoltatorii fără probleme și include doar cele mai necesare. Dacă aveți nevoie de un efect de lux, de exemplu, pentru un grup de imagini din galerie, puteți activa expansiunea galeriei. De asemenea, puteți dezvolta propria dvs. expansiune pentru conectarea la proiecte.

  • Bibliotecile necesare: JQuery.
  • Suport pentru browser: IE8 +, Chrome, Firefox, Safari și Opera
  • Licență: Licența MIT.

Luminos.

Lightlayer Ușor de utilizat Likin-ul Likin. Pluginul acceptă multe opțiuni, personalizate JavaScript Metode. și evenimente utilizator. Pluginul funcționează cu imagini, video, carduri.

  • Bibliotecile necesare: Jquery.
  • Suport pentru browser: IE9 +, Chrome, Firefox, Safari și Opera
  • Licență: Licența MIT.

LightGallery.

LightGallery, o altă plugin de lux cantitate mare Funcții. Acesta include mai mult de 20 de opțiuni pentru configurarea diferitelor efecte luminoase.

  • Bibliotecile necesare: JQuery.
  • Suport pentru browser: IE7 +, Chrome, Firefox, Safari, Opera, IOS, Android și Windows Phone
  • Licență: Licența MIT.

Fluidbox.

Fluidbox Likbox plug-in funcționează cu imagini. Include suport pentru diverse ecran, inclusiv o imagine plutitoare, o imagine dintr-o poziție absolută, imagini cu limite și depozite și galerii. Există, de asemenea, un plugin WordPress.

  • Bibliotecile necesare: Jquery.
  • Suport pentru browser: IE9 +, Chrome, Firefox, Safari, Opera
  • Licență: Licența MIT.

Stripjs.

Stripjs unic de lux plugin. În loc să impunăm o imagine, modulul LikeBox alunecă împreună cu imaginea de la o parte la alta, astfel încât imaginea să nu blocheze toate conținutul. Stripjs acceptă atât imagini, cât și video.

  • Bibliotecile necesare: JQuery.
  • Suport pentru browser: IE7 +, Chrome, Firefox, Safari, Opera, iOS 5+ și Android 3 +
  • Licență: Creative Commons By-NC-ND 3.0 licență

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 .

Prezind o altă selecție de 15 plug-in-uri jQuery adaptive, care sunt prieteni, cum ar fi cu browserele desktop și se potrivesc perfect în ecranele diferitelor dispozitive mobile (laptop-uri, smartphone, 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 iluminare ușoară, cu o gamă largă de diferite tipuri de tipuri de fișiere: imagini, video, flash / swf, conținut Ajax, cadre și cărți încorporate. Acest plugin adaugă, de asemenea, butoanele de rețele sociale, care permite utilizatorilor să partajeze 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 se vor vizualiza dispozitive mobileÎn plus, 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. - Acesta este un plugin JQuery cu suport 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, o documentație detaliată pentru conectarea și utilizarea pluginului, fără apă excesivă, totul este doar în cazul, deci nu este greu de dat seama unde, ș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 sub forma unui plugin JQuery / Zepto, are mai multe oportunități absente în Photoswipe, cum ar fi suportul video, cartografiere și conținut AJAX, implementarea ferestrelor modale cu formulare î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

    Utilizarea atributului Data-SRC pentru imagini de dimensiune completă. La fel cu videoclipul de la YouTube și Vimeo. Acesta suportă cu ușurință toate formatele video HTML5, MP4, WebM, OGG ... miniaturi animate, aspectul adaptiv cu suport pentru dispozitivul mobil, efecte de diapozitive și apariții netede la comutarea imaginilor și alte conținuturi. Aspectul este ușor de generat și configurat folosind CSS. Imaginea prealabilă și optimizarea codului. Navigarea tastaturii pentru desktop-uri, precum și capacitatea de a utiliza icoane suplimentare de fonturi. LightGallery. - Aici se combină realitatea, principalul lucru nu este de a se pierde în abundența setărilor și posibilitățile extinse ale acestui plugin.
    Cei care au nevoie de un cursor decent, vă recomandăm să acordați atenție aceluiași dezvoltatorilor.

    • 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 de a interacționa 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ă, de curând, o nouă secțiune de șablon a apărut pe site. 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

    Două imagini individuale

    Patru set de imagini.

    Noțiuni de bază.

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

      Sau instalați utilizând NPM:

      NPM Install Lightbox2 --Save

      Deschideți fișierul zip și luați o privire la exemplul de lucru barebone, care este inclus în dosarul / exemple.

    1. Gata de a seta Lightbox Up pe pagina dvs.? Începeți prin includerea CSS și JavaScript. Puteți să luați ambele fișiere din dosarul / distanța.

      • Includeți CSS în partea de sus a paginii dvs. în dvs. Etichetă:
      • Includeți JavaScript în partea de jos a paginii dvs. înainte de închidere Etichetă:
    2. Asigurați-vă că jquery, care este cerut de Lightbox, este, de asemenea, încărcat.

      • Dacă utilizați deja jQuery pe încărcat înainte de Lightbox.js. JQuery 1.7 sau mai mare este necesară.
      • Dacă nu utilizați în prezent jQuery, am creat un fișier ambalat tat include atât caseta de lumină și jQuery. Includeți DIST / JS / Lightbox-Plus-jQuery.js în loc de Lightbox.js.
    3. Confirmați că cele patru imagini încărcate de Lightbox.Css sunt în locația corectă. Puteți să luați imaginile din dosarul / DIST / IMAGES.

    Inițializați cu HTML.

    • Imagini unice. Adăugați un atribut de date-Lightbox la orice legătură 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 asociate pe care doriți să le combinați într-un set, utilizați aceeași valoare a atributului de date-iluminat 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 Mod implicit. Descriere.
    alwaysshownaVontouchDevices. fals Dacă este adevărat, săgețile de navigație stânga și dreapta care apar pe deplasarea mouse-ului când vizualizarea seturilor de imagini vor fi întotdeauna vizibile pe dispozitivele care acceptă atingeți.
    albumlabel. "Imagine% 1 din% 2" Textul afișat sub titlul la vizualizarea unui set de imagini. Textul implicit arată numărul de imagine curent și numărul total de imagini din set.
    dezactivare. fals Dacă este adevărat, împiedicați pagina să derulați în timp ce Lightbox este deschis. Acest lucru funcționează prin depășirea setărilor ascunse pe corp.
    fadation. 600 Timpul necesar pentru containerul de lumină și se suprapune să se estompeze și să se estompeze, în milisecunde.
    fitimagesinviewport. adevărat. Dacă este adevărat, redimensionați imaginile care ar extinde în afara vasului de vizualizare, astfel încât să se potrivească perfect în interiorul acesteia. Acest lucru salvează utilizatorul să se deruleze pentru a vedea întreaga imagine.
    imageFadation. 600 Timpul necesar pentru ca imaginea să se estompeze o dată î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.
    pozitiefromtop. 50 Distanța de la partea de sus a ferestrei de vizualizare pe care va apărea containerul de lumină, în pixeli.
    resizerabilitate 700 Timpul necesar pentru containerul luminos pentru a-și anima lățimea și înălțimea atunci când tranziția între imagini de dimensiuni diferite, în milisecunde.
    showIMAGENUMBERLABEL. adevărat. Dacă este așa, textul care indică numărul actual al imaginii și numărul total de imagini din set (ex. Imaginea 2 din 4) vor fi ascunse.
    Învelit. fals Dacă este adevărat, atunci când un utilizator ajunge la ultimul ISER va apărea și va apărea săgeata de navigare corectă și va fi să continuați să vă deplasați înainte, ceea ce le 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 suportă și 9+. Dacă doriți să sprijiniți IE 6, 7 și 8, utilizați propria copie a lui JQuery v1.x cu Lightbox.js.
    • Crom.
    • Safari.
    • Firefox.
    • ios safari.
    • ios crom.
    • Android Browser.
    • Android Chrome.

    Licență.

    • 100% gratuit. Lightbox este liber să se utilizeze atât în \u200b\u200bmunca comercială, cât și în cea necomercială.
    • Atribuirea este cerință.Aceasta înseamnă că trebuie să-mi părăsi numele, legătura mea de pornire și informațiile de licență intacte. Nici unul dintre aceste elemente nu trebuie să fie orientat spre utilizator și poate rămâne în cadrul codului.

    Ajutor.

    Aveți o întrebare despre modul de utilizare a casetei 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 vă uitați mai întâi la exemplul inclus.

    1. Căutați Stackoverflow pentru a vedea dacă Ofer oamenii au intrat în aceeași problemă pe care o aveți.
    2. Dacă problema dvs. este unică, apoi postați o nouă întrebare despre Stackoverflow. Utilizați eticheta Lightbox2.

    Nu utilizați problemele GitHub pentru a raporta cererile de asistență personală.

    A găsit un bug?

    Dacă găsiți un bug, urmați instrucțiunile din contribuția Guildelines pentru a raporta problema.

    Scriptul organizează imagini într-o fereastră pop-up. Vizualizarea poate fi organizată fie cu o imagine, fie de o galerie, imagini de înspăimântare în fereastra pop-up.
    Cel mai simplu și mai rapid script este instalat. Instalat și configurat literal în câteva minute.

    Cum se instalează Lightbox

    Descărcați arhiva, despachetați și descărcați serverul.
    Apoi încorporează scriptul pe site-ul dvs. ÎN codul HTML. Pagini prescrie codul




    Și ultimul pas. Afișarea imaginii.
    Ieșirea imaginii face acest lucru


    Codul de ieșire standard pentru o imagine mică și link-uri către o imagine mare, numai 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.

    Pentru un astfel de efect corespunde parametrului data-Lightbox \u003d "Image".
    Dacă aveți pe o mulțime de imagini pe pagină, puteți face o deschidere de imagini fără a derula în fereastra pop-up și puteți combina imaginile și vor derula prin fereastra pop-up.
    Pentru a combina imaginile, 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 date-Lightbox. Toată lumea are același lucru.
    Dacă doriți să împărțiți fotografiile astfel încât să nu se împrăștie, utilizați acest cod.



    Acum, fiecare imagine se deschide separat, adică, nu există nicio posibilitate de a trece la următorul.

    Ce este în versiunea modernizată

    Un buton de mărire a imaginii la dimensiunea reală. Puteți vedea-o în toate exemplele. ÎN versiunea originala Ea nu este
    În scenariul în sine există o setare, puteți dezactiva acest buton.

    Iar al doilea câțiva care au nevoie de adăugarea necesară este excepția dublelor imaginilor.
    Implicit este dezactivat, puteți activa direct în script, unde butonul de dimensiune reală este pornit.
    În aplicarea obișnuită a scenariului această caracteristică Aduce doar rău, este posibil să o folosiți numai în situații foarte fără speranță.



    Notă, trei linkuri sunt goale, adică se referă la imagini mari, dar nu există nimic între etichete și o legătură este umplută cu imaginea.
    Ca rezultat, doar o singură imagine este văzută în browser, când faceți clic pe acesta, acesta deschide o imagine minunată și toate imaginile de la legături goale sunt strânse și puteți face flip.
    Și aici, uite, în legăturile sunt două aceleași imagini(evidențiate în roșu) și când veți fi cu frunze, veți vedea două imagini identice.
    Dacă într-un exemplu concret, porniți îndepărtarea dublei, atunci nu vor exista imagini duplicate.

    Desigur, nu ar trebui să existe o astfel de situație, de ce să purtați două imagini identice și apoi să le ștergeți. Dar destul de ciudat, am fugit într-o astfel de situație, fotografiile duplicate trebuiau să fie de ieșire într-un magazin online (au fost înlocuite victime ale imaginilor prin scripturi) și când vizualizați prin Lightbox, duplicarea imaginilor păreau foarte greșite. Care a venit în îndepărtarea la îndemână a unui dublu.

    Comentarii

    11.12.2014 Victor.
    Scriptul este foarte bun. Cu ajutorul titlului de date, puteți descrie chiar imaginea. Dar am avut o problemă, am fost pe pagină, stăteam scriptul care a prezentat unitatea pe partea când acest script este conectat, dispare. Și dispare dacă scripturile JS sunt conectate. M-am gândit din cauza versiunii conflictului nu din cauza lor.

    05/23/2015 Victor.
    Nu lucrez când
    href \u003d "http://ikk.secrieru.ru/products/gallery/000039.jpg?ver\u003d20150523142822"
    Are un astfel de fel. Fără Ver \u003d 20150523142822
    lucrări

    05/25/2015 Kaha.
    Mulțumesc mult.

    06/29/2015 Andrey.
    Multe mulțumiri pentru munca ta! Totul a câștigat aproape prima dată)

    08/26/2015 Alexander.
    Am încercat diferite analogi. Fără conflict, acest lucru a devenit imediat. Creșterea la origine. Dimensiune intestinală. Dacă există încă un șoarece pentru a lua și a muta imaginile câmpului - în general KAPETS

    11/01/2015 Igor.
    Buna!
    Galerie excelentă. Mulțumesc foarte mult.
    Doar o astfel de întrebare:
    În exemplul de mai sus, exemplele (3 imagini) ale imaginii sunt afișate. Și în versiunea descărcată a Lightbox-2.7.1, această funcție nu funcționează. Când vizualizați ultima imagine, butonul următor nu apare.
    Spune-mi, te rog, ce ar putea fi motivul?

    11/14/2015 Anton.

    11/15/2015 Anton.
    Pe iOS și Android întunecați ecranul nu pe întreaga pagină! Care ar putea fi problema. În caseta obișnuită - totul este OK!

    11/15/2015 Anton.
    Pe iOS și Android întunecați ecranul nu pe întreaga pagină! Care ar putea fi problema. În caseta obișnuită - totul este OK!

    03/30/2016 Anton.
    Buna!
    Este posibil să se facă astfel încât imaginea să fi deschis în rezoluție mai mare?

    11/18/2016 Yura.
    Mulțumesc mult! Totul funcționează perfect!

    05/04/2017 Igor.
    Vă mulțumim atât de mult pentru script! Foarte mult timp în urmă, căutam ceva similar și ușor de instalat.
    Doar dintr-un anumit motiv am inscripții incomprehensibile să apară în imagini. · Рѕр ± ± р рёр · 8

    Poate undeva trebuie să remediați codarea?

    09/12/2017 Barsuk.
    Unde ai fost înainte! Am petrecut întreaga zi pentru a fixa îndepărtarea dublei))

    Doar am pagina principală Prejuvanța imaginii principale și ea este în partea de jos, există chiar mai puțin decât prevalează adițional, din cauza a apărut duplicas și în galerie.

    Este foarte mare că avem acces la mai multe și mai multe tehnologii web noi, cu ajutorul cărora munca noastră va fi mult mai ușoară. Modal Windows - element funcțional Pentru a afișa orice tip de HTML-COTAMENT, axat pe crearea unui design și interfață convenabilă.

    În această recenzie, am colectat o listă de biblioteci și scripturi JQuery pentru a crea Lightbox, care va ajuta dezvoltatorii și designerii să creeze site-uri mai bune și profesionale.

    Puteți adăuga cu ușurință scripturile de mai jos pe site-ul dvs. Prin urmare, fără prefabricate suplimentare, să mergem la subiect și să luăm în considerare aceste boblistere super-jquerice de lux, pe care le puteți completa arsenalul.

    1. Photoswipe.

    Photoswipe este HTML Galerie foto pe cSS bazat pe Și JavaScript-orientate pe dispozitive mobile. Autorii din dezvoltarea sa au luat ca un eșantion de servicii de vizionare a imaginilor pentru iOS și Google Mobile dispozitive. Photoswipe are un familiar și intuitiv interfață de înțelegereCeea ce face mai ușor să lucrați cu imagini pe un site mobil.

    Toate funcțiile majore sunt acceptate: Mergeți la imaginea următoare sau anterioară, creșteți, glisați, scăderea sau închiderea și altele.

    2. SwipipeBox.

    SwipeBox - JQuery -Lagina pentru calculatoare staționare, smartphone-uri și tablete. Acesta acceptă control senzorial Pentru dispozitive mobile, navigarea tastaturii pentru dispozitivele desktop, tranzițiile CSS cu comutare de rezervă la controlul JQuery este destul de ușor de configurat.

    Pluginul a fost testat pe Chrome, Safari, Firefox, Opera, Internet Explorer 8 +, IOS4 +, Android, Windows Phone. Produs sub licența MIT.

    3. ilightbox.

    ilightbox facilitează crearea unui adaptabil foarte frumos modal Windows.Folosind jQuery. Combinând suportul unei game largi de conținut media cu piei magnifice și un API convenabil, Ilightbox caută să facă o casetă ușoară cât mai ideală. Ilightbox oferă posibilitatea de a vizualiza modul ecran întreg, Retina-Skins, Management senzorial, YouTube și Opțiunea de Integrare Vimeo pentru video HTML5, API JavaScript puternic. Pluginul are versiuni gratuite de suport și actualizare.

    4. Imagine Lightbox.

    Imaginea Lightbox este un plug-in minimalist, expandabil și personalizabil sub iOS, Android și Windows Phone. Puteți descărca pur și simplu următoarea imagine utilizând tastatura datorită utilizării transformărilor și tranzițiilor CSS.

    5. Popup magnific.

    Magnificul popup este gratuit jquery adaptiv. Plugin, care se concentrează pe asigurarea celei mai bune interacțiuni între utilizator și dispozitiv. Pentru majoritatea literelor luminoase, trebuie să determinați dimensiunea ferestrei utilizând js. În popup magnific, puteți utiliza unități relative de măsură, cum ar fi EM sau modificați dimensiunea casetei Light folosind cererile media CSS.

    6. Nivo Lightbox.

    Nivo Lightbox este o cutie de iluminare flexibilă. O varietate de opțiuni sunt oferite să aleagă, cu care puteți schimba cu ușurință aspectul casetei Lightbox. De exemplu, schimbați subiectul, efectul de tranziție și metoda de navigare.

    7. Lightcase.

    Lightcase - Flexibil, Adaptive și Expaneble Lightbox-Plagin, proiectat cu folosind jQuery. . Funcționează excelent în toate browserele populare, cum ar fi Internet Explorer 7+, Firefox, Opera, Webkit și altele. Pluginul suportă fotografia, video, HTML5-VIDEO, IFRAME, SWF și AJAX.

    8. Lightlayer.js.

    Lightlayer este un script pentru ieșirea cutiei de iluminare adaptivă, funcționează bine cu alte componente pe orice ecran. Acest script este foarte ușor de utilizat. Lightlayer oferă controlul asupra setului de parametri: culoarea și opacitatea fundalului, cutia de poziționare, deschiderea / închiderea tranzițiilor și multe alte funcții personalizate.

    9. bandă.

    Stripul este ușor, care se desfășoară numai pe o parte a paginii. Acest lucru îl face mai puțin obsesiv și vă permite să interacționați cu alte elemente ale paginii pe ecrane mari; Pe dispozitivele mobile Lightbox are un aspect clasic. Stripul utilizează jQuery și este susținută în toate browserele importante.

    10. FLUIDBOX.

    Fluidbox este un plugin JQuery conceput pentru a implementa o casetă de iluminare adaptivă, care este ideală pentru imagini cu o rezoluție mare. Funcționează excelent pe dispozitivele mobile și poate fi aplicat și pe ecrane cu mai mult rezoluție înaltă Pentru o ieșire frumoasă a imaginii.

    11. Fainelight.

    Fainelight - Plugin foarte ușor în 400 linii JavaScript. , 100 rânduri CSS. și mai puțin de 6 kB. Intelligent, Adaptive Lightbox, implicit acceptă imagini, AJAX și IFRAME. De asemenea, puteți să-l adaptați la sarcinile dvs. Fainele funcționează în IE8 +, toate browsere moderne și platforme mobile.

    12. YALB.

    Yalb este decriptat ca o altă casetă ( Inca unul. Lightbox) - dar nu este. YALB vine cu un set mare de interfețe, inclusiv evenimente de utilizator care îi permit să determine starea ei ( deschis inchis).