Responsive lightbox galerija. Najbolji lightbox dodaci za WordPress

Najpopularnija biblioteka je Lightbox Javascript, koji već dugi niz godina koristimo na desktop računarima, ali ne i na mobilnim platformama.

Evo 14 Lightbox dodataka s podrškom za mobilne platforme.

PhotoSwipe

PhotoSwipe - Lagan, omogućen na dodir i što je najvažnije modularni dodatak koji vam omogućava da uklonite nepotrebne dijelove koji nisu potrebni. Odlično radi u mobilnim preglednicima. Možete mijenjati slike prelaskom prsta kao da je standardna aplikacija, sa glatkim prijelazima.

  • Potrebne biblioteke: br.
  • Podrška za pretraživač: IE8 +, Chrome, Firefox, Safari, Opera i drugi mobilni pretraživači.
  • Licenca: MIT License

Magnific popup

Magnific Popup je još jedan dodatak za lightbox koji je razvio isti autor kao PhotoSwipe, Dmitry Semenov. Dodatak dolazi u obliku jQuery / Zepto dodatka, a uključuje i podršku koja nedostaje PhotoSwipe-u, kao što je podrška za video, mapu i Ajax. Ovo je odlična alternativa za one koji više vole imati više mogućnosti pri ruci.

  • Potrebne biblioteke: JQuery 1.9.1+ ili Zepto.js
  • Podrška za pretraživač: IE7 (djelimično).
  • Licenca: MIT License

SwipeBox

Swipebox jQuery dodatak s podrškom za pokrete dodirom za mobilne platforme. Osim slika, podržava i Youtube i Vimeo videozapise. Swipebox se lako instalira i ima nekoliko opcija za podešavanje svoje konfiguracije. Mislim da je Swipebox previše pretrpan lightbox dodatak za one koji ne znaju JavaScript.

Lightbox za Bootstrap

U početku, Lightbox dodatak nedostaje u Bootstrapu. Lightbox za Bootstrap to popravlja. Ako koristite Bootstrap, preporučuje se korištenje ove biblioteke. Dodatak se dobro integrira s Bootstrapom.

  • Potrebne biblioteke: JQuery i Bootstrap modul
  • Podrška za pretraživač: IE8 +, Chrome, Firefox, Safari i Opera
  • Licenca: GNU licenca

Nivo lightbox

Nivo Lightbox je vrlo prilagodljiv dodatak za lightbox. Različite opcije vam omogućavaju promjenu izgled... Na primjer: tema, animacija izgleda i vrsta navigacije.

  • Potrebne biblioteke: JQuery
  • Podrška za pretraživač:
  • Licenca: MIT License

ImageLightbox

ImageLightbox je jednostavan lightbox dodatak bez zvona i zviždaljki. Koristi se samo za sliku, otuda i naziv. Ni video ni drugi tipovi nisu podržani. Takođe ne zahteva dodatne HTML oznake; tag je dovoljno. Ovaj dodatak je jednostavan za korištenje.

  • Potrebne biblioteke: JQuery
  • Podrška za pretraživač: IE9 +, Chrome, Firefox, Safari i Opera
  • Licenca: Nespecificirano

Mini Lightbox

Još jedan dodatak za lightbox bez dodataka. Biblioteka je teška samo 2 kilobajta i radi samo sa slikama. Ovo je savršen dodatak ako razvijate samo za najnoviju verziju pretraživač i nema potrebe da podržava video ili druge formate.

  • Potrebne biblioteke: Ne
  • Podrška za pretraživač: Internet Explorer 10+, Chrome, Firefox, Safari i Opera
  • Licenca: MIT License

LightCase

Lightcase je odličan dodatak za lightbox. Podržava nekoliko vrsta animacija kao što su blijedi, elastični, zumiranje i pomicanje. Osim toga, podržava i razne vrste medija, uključujući Youtube Embed, HTML video, SWF i obrasce za unos.

  • Potrebne biblioteke: JQuery
  • Podrška za pretraživač: IE9 +, Chrome, Firefox, Safari i Opera
  • Licenca: GPL licence

Featherlight

Featherlight je osnovni dodatak, težak 6 kilobajta za iskusne programere i uključuje samo osnovne stvari. Ako vam je potreban lightbox efekt, na primjer za grupu slika u galeriji, možete omogućiti proširenje galerije. Također možete razviti vlastitu ekstenziju dodataka za korištenje u svojim projektima.

  • Potrebne biblioteke: JQuery
  • Podrška za pretraživač: IE8 +, Chrome, Firefox, Safari i Opera
  • Licenca: MIT License

LightLayer

LightLayer je dodatak za lightbox koji je jednostavan za korištenje. Dodatak podržava mnoge opcije, prilagođene JavaScript metode i prilagođene događaje. Dodatak radi sa slikama, video zapisima, mapama.

  • Potrebne biblioteke: JQuery
  • Podrška za pretraživač: IE9 +, Chrome, Firefox, Safari i Opera
  • Licenca: MIT License

LightGallery

LightGallery, još jedan dodatak za lightbox sa veliki iznos funkcije. Uključuje preko 20 opcija za prilagođavanje različitih detalja lightbox efekata.

  • Potrebne biblioteke: JQuery
  • Podrška za pretraživač: IE7 +, Chrome, Firefox, Safari, Opera, IOS, Android i Windows Phone
  • Licenca: MIT License

FluidBox

Fluidbox lightbox dodatak radi sa slikama. Uključuje podršku za različite prikaze, uključujući lebdeće slike, slike u apsolutnoj poziciji, slike sa ivicama i ispunama i galerije. Postoji i WordPress dodatak.

  • Potrebne biblioteke: JQuery
  • Podrška za pretraživač: IE9 +, Chrome, Firefox, Safari, Opera
  • Licenca: MIT License

StripJS

StripJS je jedinstveni lightbox dodatak. Umjesto preklapanja slike, modul lightboxa klizi zajedno sa slikom s jedne na drugu stranu tako da slika ne blokira sav sadržaj. StripJS podržava i slike i video zapise.

  • Potrebne biblioteke: JQuery
  • Podrška za pretraživač: IE7 +, Chrome, Firefox, Safari, Opera, IOS 5+ i Android 3+
  • Licenca: Creative Commons BY-NC-ND 3.0 licenca

Pregledao sam razne galerije slika mnogo puta, prikupio opsežnu kolekciju spektakularnih slajdova i dodataka. Tu je i Lighbox u kasici-prasici isključivo na CSS3, bez povezivanja dodatnih js-biblioteka. Ali vrijeme ne miruje, korisnici sve više koriste razne mobilne uređaje za surfanje internetom, što znači da prilagodljivost web elemenata, a posebno foto galerija s efektom "" postaje jedan od prioriteta koji bi web dizajneri i programeri trebali obratite pažnju na.

Evo još jedne kolekcije od 15 responzivnih jQuery dodataka koji su prijateljski prilagođeni desktop pretraživačima i savršeno se uklapaju u ekrane različitih mobilnih uređaja (laptop, pametni telefon, tablet, itd.).

Gledajte demo na web stranicama programera, preuzmite dodatak koji vam se sviđa i kreirajte, stvarajte, stvarajte ...

1.iLightbox

iLighbox Je lagani jQuery lightbox dodatak s podrškom za širok raspon različitih tipova datoteka: slike, video zapisi, Flash / SWF, Ajax sadržaj, okviri i ugrađene karte. Ovaj dodatak također dodaje dugmad društvenih medija, omogućavajući korisnicima da dijele sadržaj putem Facebooka, Twittera ili Reddita. Odlična prilika za organizovanje spektakularnih slajdova, galerija slika i video zapisa, uz gledanje u normalnom i preko celog ekrana.

iLighbox radi dosta brzo i kada se gleda dalje mobilnih uređaja, više nego ispravno prikazuje obrađeni sadržaj. Između ostalog, pomoću ovog dodatka možete jednostavno implementirati prikaz informacijskih blokova kao modalni prozor.

  • Ovisnost: jQuery
  • Podrška za pretraživač: IE7 +, Chrome, Firefox, Safari i Opera
  • Licenca: A djavo samo zna)))

2. SwipeBox

Swipebox Je jQuery dodatak sa podrškom ekrani osetljivi na dodir mobilne platforme. Osim slika, dodatak podržava ugrađene videozapise s Youtube -a i Vimea. Swipebox je vrlo jednostavno priložiti bilo kojem projektu, dodatak ima nekoliko intuitivnih opcija za prilagođavanje njegove funkcionalnosti i ponašanja. Na web stranici programera postoji detaljna dokumentacija o povezivanju i korištenju dodatka, bez nepotrebne vode, sve je slučaj, pa mislim da neće biti teško shvatiti što, gdje i zašto.

  • Ovisnost: jQuery
  • Podrška za pretraživač: IE9 +, Chrome, Safari, Firefox, Opera, IOS4 +, Android i Windows Phone
  • Licenca: Nije određeno, možda ti se posreći)))

3. MagnificPopup

Dobro poznat i dobro dokazan dodatak za lightbox baziran na jQuery ili Zepto.js. Autor dodatka je Dmitry Semenov, koji je programer dodatka PhotoSwipe, o čemu ću govoriti u nastavku. Isporučuje se kao dodatak za jQuery / Zepto i ima naprednije funkcije koje nedostaju PhotoSwipeu, poput video podrške, prikaza mapa i Ajax sadržaja i implementacije modalnih prozora sa umetnutim obrascima. Po svim kriterijima, ovo je još jedan odličan alat u kavezu web programera. Odvojeno, tu je dodatak za WordPress i detaljna dokumentacija o postavljanju i korištenju. Jedino depresivno je nedostatak dokumentacije na ruskom, sudeći po imenu i prezimenu, autor je izgleda Rus, nikad shvaćen zbog štetnosti ovoga, ili zbog imaginarne svijesti o svojoj pameti, ali bla. Pa dobro, ko treba da shvati, ni mi nismo meko kuvani čaj))).

  • Ovisnost: jQuery 1.9.1+ ili Zepto.js
  • Podrška za pretraživač: IE7 (djelimično), IE8 +, Chrome, Firefox, Safari i Opera
  • Licenca: MIT licenca

4. PhotoSwipe

  • Ovisnost: Javascript ili jQuery
  • Podrška za pretraživač
  • Licenca: MIT licenca

11. FeatherLight

6-bitni lightbox dodatak za manje ili više pametne programere, opremljen svim najpotrebnijim funkcijama. Osim što podržava sve uobičajene tipove sadržaja (tekst, slike, iframe, Ajax), postoji mogućnost povezivanja dodatnog, a za ovaj dodatak možete razviti i vlastito proširenje koje će u potpunosti zadovoljiti vaše potrebe pri kreiranju novog projekat. Kako funkcionira sva ova ekonomija (razvoj ekstenzije), nisam baš ulazio u to, ali oni koje će ovaj dodatak ubaciti, mislim da će to shvatiti))).

  • Ovisnost: jQuery
  • Podrška za pretraživač: IE8 +, Chrome, Firefox, Safari i Opera
  • Licenca: MIT licenca

12. LightGallery

LightGallery- multifunkcionalni lightbox dodatak s mnogima dodatne mogućnosti... Dolazi s više od 20 opcija za prilagođavanje najmanjih detalja Lightbox -a. Ima svega, pa ili skoro svega)). Kompletna galerija slika s uredno raspoređenim sličicama, navigacijskim kontrolama i pomicanjem sličica. Jednostavno html označavanje kao neuređena lista

    koristeći data-src atribut za slike pune veličine. Isto je i sa video zapisima sa Youtube-a i Vimea. Savršeno podržava sve video formate HTML5, MP4, WebM, Ogg... Animirane sličice, responsive layout sa podrškom za mobilne uređaje, efekte slajdova i glatke prijelaze izgleda pri prebacivanju slika i drugog sadržaja. Izgled i osjećaj se lako oblikuju i prilagođavaju pomoću CSS-a. Predučitavanje slike i optimizacija koda. Navigacija pomoću desktop tastature, kao i mogućnost korištenja dodatnih ikona fonta. LightGallery- tu je prava "kombinacija", glavna stvar je da se ne izgubite u obilju postavki i opsežnih mogućnosti ovog dodatka.
    Za one kojima je potreban pristojan klizač, preporučujem da obrate pažnju na iste programere.

    • Ovisnost: jQuery
    • Podrška za pretraživač: IE7 +, Chrome, Firefox, Safari, Opera, iOS, Android i Windows Phone
    • Licenca: MIT licenca

    13. StripJS

    Neobično, čak bih rekao: neobična implementacija lightboxa, tačnije, ne baš poznata prezentacija sadržaja, kada se slika ili video, u dizajnu lightboxa, pojavljuje s desne strane, ne ispunjavajući cijeli ekran, već samo na unapred podešena veličina sliku ili video u punoj veličini. Na velikim ekranima ovaj pristup je razumljiv, ostaje mogućnost interakcije sa stranicom. Na malim ekranima mobilnih uređaja, cijeli ovaj inovativni dizajn stapa se u klasični lightbox. Ideja je zanimljiva, pogledajte demo, mozda neko ovako ubaci.

    • Ovisnost: jQuery
    • Podrška za pretraživač: IE7 +, Chrome, Firefox, Safari, Opera, iOS 5+ i Android 3+
    • Licenca: Creative Commons BY-NC-ND 3.0 licenca

    14. LightLayer

    Lightbox dodatak koji se lako koristi uz svaki projekat i dobro izgleda na bilo kojem ekranu. LightLayer plugin pruža kontrolu nad mnogim postavkama, kao što su promjena boje pozadine i stepena njene transparentnosti, položaj osnovnog bloka, izbor efekata prijelaza pri otvaranju/zatvaranju, funkcije kojima korisnici mogu sami manipulirati. Dodatak odlično radi s vanjskim sadržajem web stranice, ugrađenim video playerima i mapama.

    • Ovisnost: jQuery
    • Podrška za pretraživač: IE9 +, Chrome, Firefox, Safari i Opera
    • Licenca: MIT licenca

    15. FluidBox

    Fluidbox je dodatak za lightbox isključivo za slike. Broj mogućih varijacija u prezentaciji slika je zaista impresivan. Dodatak odlično radi sa slikama u različitim dizajnima, uključujući lebdeće slike, slike sa apsolutnim pozicioniranjem, slike i fotografije koje su uokvirene i uvučene, sa pojedinačnim slikama i kombinovane u galeriju. Općenito, uzalud je sipati vodu, slikati sve značajke dodatka u kratkoj prezentaciji i dalje neće uspjeti, pa bolje pogledajte demo, uvrćite, uvrnite i mislim da će se mnogima ovaj dodatak svidjeti.

    • Ovisnost: jQuery
    • Podrška za pretraživač: IE9 +, Chrome, Firefox, Safari, Opera
    • Licenca: MIT licenca

    To je vjerovatno sve! Nadam se da će vam ovaj kratki pregled pomoći da razumijete hrpu proizvoda za razvoj weba u ponudi. Želim napomenuti da sam daleko od svih dodataka predstavljenih u kolekciji koje sam koristio na radnim projektima, većinu njih ispitao na test stranicama ili na laku, tako da ako bude bilo kakvih pitanja, najvjerovatnije ćemo ih riješiti zajedno, ali zajedno , kao i uvek uspećemo.

    Tražite li odgovarajući ruski šablon za svoje potrebe? U ovom slučaju, vjerovatno biste trebali posjetiti TemplateMonster marketplace. Iz jednostavnog razloga što se nedavno na sajtu pojavio novi deo šablona. Sada se svaki korisnik može upoznati sa kolekcijom koja će se ažurirati i ažurirati. Tekstovi za predloške pisani su ručno. Ali to nije jedini plus ovih gotovih rješenja. Doista, u njihovim paketima možete pronaći sve što će olakšati rad na razvoju online projekta, uključujući vizualni uređivač.

    Uz svo poštovanje, Andrew

    Dvije pojedinačne slike

    Set četiri slike

    Počinjemo

      Preuzmite zip najnovijeg izdanja (ili bilo kojeg prethodnog) sa stranice Github izdanja.

      Ili instalirajte pomoću npm:

      Npm install lightbox2 --sačuvaj

      Otvorite zip datoteku i zavirite u barebones, radni primjer koji se nalazi u mapi / examples.

    1. Spremni da postavite Lightbox na svoju stranicu? Počnite tako što ćete uključiti Lightbox CSS i Javascript. Obje ove datoteke možete preuzeti iz direktorija / dist.

      • Uključite CSS na vrhu stranice u svoju oznaka:
      • Uključite Javascript na dno vaše stranice prije zatvaranja oznaka:

    2. Provjerite je li jQuery, koji je potreban za Lightbox, također učitan.

      • Ako već koristite jQuery na svojoj stranici, provjerite je li učitan prije lightbox.js. Potreban je jQuery 1.7 ili noviji.
      • Ako trenutno ne koristite jQuery, kreirao sam zapakiranu datoteku koja uključuje i Lightbox i jQuery. Uključite dist / js / lightbox-plus-jquery.js umjesto lightbox.js.
    3. Potvrdite da su četiri slike koje učitava lightbox.css na ispravnoj lokaciji. Slike možete preuzeti iz direktorijuma / dist / images.

    Inicijalizirajte HTML-om

    • Pojedinačne slike. Dodajte atribut data-lightbox bilo kojoj vezi za sliku da biste omogućili Lightbox. Za vrijednost atributa koristite jedinstveno ime za svaku sliku. Na primjer: Opciono:
      • Dodajte atribut data-title ako želite prikazati natpis.
      • Dodajte atribut data-alt ako želite postaviti alt atribut povezane slike.
    • Setovi slika. Ako imate grupu povezanih slika koju želite kombinirati u skup, upotrijebite istu vrijednost atributa data-lightbox za sve slike. Na primjer:

    Opcije

    Ako želite promijeniti bilo koju od zadanih opcija, pozovite opciju opciju.

    Opcija Default Opis
    alwaysShowNavOnTouchDevices false Ako je tačno, strelice za navigaciju lijevo i desno koje se pojavljuju pri prelasku miša prilikom pregleda skupova slika uvijek će biti vidljive na uređajima koji podržavaju dodir.
    albumLabel "Slika% 1 od% 2" Tekst koji se prikazuje ispod naslova kada gledate skup slika. Zadani tekst prikazuje trenutni broj slike i ukupan broj slika u setu.
    disableScrolling false Ako je tačno, spriječite pomicanje stranice dok je okvir za pregled otvoren. Ovo funkcionira tako što se postavke prelijevaju skrivenim na tijelu.
    fadeDuration 600 Vrijeme potrebno da se kutija za pregled i preklapanje izblijede i nestanu, u milisekundama.
    fitImagesInViewport istinito Ako je tačno, promijenite veličinu slika koje bi se protezale izvan okvira za prikaz tako da se uredno uklapaju u njega. Ovo štedi korisnika od potrebe da skroluje da vidi celu sliku.
    imageFadeDuration 600 Vrijeme potrebno da slika izblijedi nakon učitavanja, u milisekundama.
    maxWidth Ako je postavljeno, širina slike će biti ograničena na ovaj broj, u pikselima. Omjer stranica se neće zadržati.
    maxHeight Ako je postavljena, visina slike će biti ograničena na ovaj broj, u pikselima. Omjer stranica se neće zadržati.
    positionFromTop 50 Udaljenost od vrha okvira za prikaz na kojoj će se pojaviti kutija za pregled, u pikselima.
    resizeDuration 700 Vrijeme potrebno da Lightbox kontejner animira svoju širinu i visinu pri prijelazu između slika različite veličine, u milisekundama.
    showImageNumberLabel istinito Ako je netačno, tekst koji označava trenutni broj slike i ukupan broj slika u setu (npr. "Slika 2 od 4") će biti sakriven.
    smota false Ako je tačno, kada korisnik dođe do posljednje slike u skupu, pojavit će se desna navigacijska strelica i on će nastaviti kretanje naprijed što će ih vratiti na prvu sliku u setu.

    Podrška za pretraživač

    Lightbox2 je uspješno testiran u sljedećim pretraživačima:

    • Internet Explorer.
      Datoteka lightbox-plus-jquery.js uključuje jQuery v2.x i podržava IE 9+. Ako želite podržati IE 6, 7 i 8, koristite vlastitu kopiju jQuery v1.x sa lightbox.js.
    • Chrome
    • Safari
    • Firefox
    • iOS Safari
    • iOS Chrome
    • Android pretraživač
    • Android Chrome

    Licenca

    • 100% besplatno. Lightbox je besplatan za korištenje u komercijalnim i nekomercijalnim poslovima.
    • Atribucija je obavezna. To znači da moje ime, vezu na moju početnu stranicu i informacije o licenci morate ostaviti netaknutima. Nijedna od ovih stavki ne mora biti okrenuta korisniku i može ostati unutar koda.

    Upomoć

    Imate pitanje o tome kako koristiti Lightbox?

    Slijedite korake u nastavku da biste dobili pomoć. Provjerite jeste li pročitali dokumentaciju na ovoj stranici i prvo pogledali uključeni primjer.

    1. Pretražite Stackoverflow da vidite jesu li drugi ljudi naišli na isti problem koji imate.
    2. Ako je vaš problem jedinstven, postavite novo pitanje na Stackoverflow. Koristite oznaku lightbox2.

    Nemojte koristiti Github Probleme za prijavu ličnih zahtjeva za podršku.

    Pronašli ste grešku?

    Ako pronađete grešku, slijedite upute u Smjernicama za doprinos da prijavite problem.

    Skripta organizira pregled slika u iskačućem prozoru. Gledanje se može organizirati po jednoj slici ili galeriji, listajući slike u iskačućem prozoru.
    Najlakša i najbrža skripta za instalaciju. Instalira se i konfigurira za samo nekoliko minuta.

    Kako instalirati lightbox

    Preuzmite arhivu, raspakujte je i postavite na server.
    Zatim ugradite skriptu u svoju web lokaciju. V html kod stranica na kojima pišete kôd




    I poslednji korak. Prikaz slika.
    Izvodite ovakve slike


    Standardni kod za prikaz male slike i veze do velike slike, samo dva parametra se dodaju na vezu.
    Evo primjera ovog koda - kada kliknete na sliku, iskače velika slika.

    Parametar je odgovoran za ovaj efekat data-lightbox = "slika".
    Ako imate puno slika na stranici, možete otvoriti slike bez prevlačenja u iskačućem prozoru ili možete kombinirati slike i one će se pomicati u iskačućem prozoru.
    Da biste kombinirali slike, morate koristiti jedno ime za svaku grupu slika




    Kao što vidite, možete da skrolujete kroz sve slike u iskačućem prozoru, pošto data-lightbox sve isto.
    Ako želite podijeliti slike tako da se ne pomiču, upotrijebite sličan kôd



    Sada se svaka slika otvara zasebno, odnosno ne postoji način da se skroluje na sledeću.

    Šta je u nadograđenoj verziji

    Dugme za povećanje slike na pravu veličinu. To možete vidjeti u svim primjerima. V originalna verzija ona nije
    Postoji postavka u samoj skripti, možete isključiti ovo dugme.

    I drugi dodatak koji malo ljudi treba je isključivanje duplikata slika.
    Onemogućeno prema zadanim postavkama, možete ga omogućiti direktno u skripti, na istom mjestu na kojem je omogućeno dugme u stvarnoj veličini.
    U uobičajenoj upotrebi skripte ovu funkciju donosi samo štetu, može se koristiti samo u potpuno očajnim situacijama.



    Imajte na umu da su tri veze prazne, što znači da povezuju s velikim slikama, ali između oznaka nema ništa, a jedna je veza ispunjena slikom.
    Kao rezultat toga, samo jedna slika je vidljiva u pretraživaču, kada kliknete na nju, otvara se velika slika i sve slike sa nepopunjenih linkova se povlače prema gore i možete se pomicati.
    A pogledajte ovdje, postoje dvije veze u linkovima. identične slike(označeno crvenom bojom) i kada skrolujete, videćete dve identične slike.
    Ako omogućite uklanjanje duplikata u određenom primjeru, tada neće biti duplikata slika.

    Naravno, takva situacija ne bi trebala postojati, zašto prikazati dvije identične slike pa ih brisati. Ali začudo, suočio sam se s takvom situacijom, u jednoj online prodavnici su duplikati fotografija trebali biti prikazani za proizvod (bilo je škakljivih zamjena fotografija putem skripti), a kada su se gledale kroz lightbox, duplikati su fotografije izgledali vrlo pogrešno. Ovdje je dobro došlo uklanjanje duplikata.

    Komentari (1)

    11.12.2014 Victor
    Scenario je veoma dobar. Možete čak opisati sliku koristeći data-title. Ali imao sam problem, imao sam skriptu na stranici koja je gurnula blok u stranu kada je ova skripta povezana, nestaje sa mene. I nestaje ako su js skripte povezane. Mislio sam da zbog verzije nema sukoba, ne zbog njih.

    23.05.2015. Victor
    Ne radi mi kada
    href = "http://ikk.secrieru.ru/products/Gallery/000039.jpg?ver=20150523142822"
    izgleda ovako. Bez? Ver = 20150523142822
    radi

    25.05.2015. kaha
    hvala puno

    29.06.2015. Andrey
    Hvala vam puno na vašem radu! Sve je funkcionisalo skoro prvi put)

    26.08.2015. Alexander
    probao različite analoge. bez sukoba, ovaj je postao odmah. povećati do porijekla. veličina gut.ako još uvijek koristite miša za snimanje i pomicanje polja slike, općenito kapets

    11.01.2015. Igor
    Zdravo!
    Odlična galerija. Hvala vam puno.
    Samo takvo pitanje:
    U gornjem primjeru (3 slike) slike su prikazane u petlji. I u preuzetoj verziji lightbox-2.7.1 ova funkcija ne radi. Kada gledate posljednju sliku, dugme se dalje ne pojavljuje.
    Možete li mi reći šta bi mogao biti razlog?

    14.11.2015. Anton

    15.11.2015. Anton
    na iOS-u i Androidu, zatamnjenje ekrana se ne pojavljuje za cijelu stranicu !!! šta bi mogao biti problem U običnom LightBox-u - sve je OK!

    15.11.2015. Anton
    na iOS-u i Androidu, zatamnjenje ekrana se ne pojavljuje za cijelu stranicu !!! šta bi mogao biti problem U običnom LightBox-u - sve je OK!

    30.03.2016 Anton
    Zdravo!
    Da li je moguće otvoriti sliku u višoj rezoluciji?

    18.11.2016. Yura
    Hvala puno! Sve radi savršeno!

    5.4.2017. Igor
    Hvala vam puno na scenariju! Dugo sam tražio nešto slično i lako za ugradnju.
    Samo iz nekog razloga ispod fotografija se pojavljuju nerazumljivi natpisi R˜R · RẑR ± SĐR ° R¶RµRẐRëRµ 8 RëR · 8

    Možda negdje treba popraviti kodiranje?

    12.09.2017 Barsuk
    Gdje ste bili prije! Proveo cijeli dan pokušavajući popraviti uklanjanje duplikata))

    Samo jesam početnu stranicu pregled glavne slike, a pri dnu ima još manje sličica dodatnih, zbog toga je bilo duplikata u galeriji.

    Zaista je sjajno što nam je dostupno sve više najnovijih web tehnologija uz pomoć kojih će nam rad postati mnogo lakši. Modalni prozori - funkcionalni element za prikaz bilo koje vrste HTML sadržaja, fokusiranog na kreiranje korisničkog dizajna i interfejsa.

    U ovom pregledu, sastavili smo listu jQuery lightbox biblioteka i skripti kako bismo pomogli programerima i dizajnerima da kreiraju još bolje i profesionalnije web stranice.

    Možete jednostavno dodati dolje navedene skripte na svoju web lokaciju. Dakle, bez daljeg odlaganja, hajdemo odmah na to i pogledajte ove super jQuery lightbox biblioteke koje možete dodati svom arsenalu.

    1. Prevucite prstom

    PhotoSwipe je HTML galerija fotografija CSS baziran i JavaScript ciljani posebno na mobilne uređaje. Prilikom razvoja, autori su kao model uzeli usluge pregleda slika za mobilne uređaje IOS i Google. PhotoSwipe ima poznat i intuitivan jasan interfejs, što olakšava rad sa slikama na mobilnoj stranici.

    Podržane su sve glavne funkcije: prelazak na sljedeću ili prethodnu sliku, zumiranje, povlačenje, smanjenje ili zatvaranje i druge.

    2. Swipebox

    Swipebox je jQuery dodatak za stacionarni računari, pametni telefoni i tableti. Podržava kontrola dodirom za mobilne uređaje, navigacija pomoću tastature za desktop, CSS rezervni prelazi na jQuery kontrole, prilično jednostavno za postavljanje.

    Dodatak je testiran na Chrome, Safari, Firefox, Opera, Internet Explorer 8+, iOS4+, Android, Windows Phone. Objavljeno pod licencom MIT -a.

    3.iLightbox

    iLightBox olakšava kreiranje veoma lijepih responsive modalni prozori dok koristite JQuery. Kombinujući podršku za širok spektar medijskog sadržaja sa sjajnim skinovima i korisničkim API-jem, iLightBox nastoji da vaš lightbox bude što savršeniji. iLightBox pruža mogućnost gledanja režim preko celog ekrana, Retina kompatibilne kože, kontrola događaja na dodir, mogućnost integracije YouTube-a i Vimeo-a za HTML5 video zapise, moćan JavaScript API. Dodatak ima besplatnu podršku i ažuriranja verzija.

    4. Image Lightbox

    Image Lightbox je minimalistički, proširiv i prilagodljiv dodatak za IOS, Android i Windows Phone. Možete jednostavno učitati sljedeću sliku pomoću tastature zahvaljujući korištenju CSS transformacija i prijelaza.

    5. Magnific Popup

    Magnific Popup je besplatan responzivni jQuery dodatak koji se fokusira na pružanje najboljeg mogućeg iskustva između korisnika i uređaja. Za većinu dodataka za svjetlosne okvire, morate odrediti veličinu prozora koristeći JS. U Magnific Popup-u možete koristiti relativne jedinice poput EM ili promijeniti veličinu okvira za pregled pomoću CSS medijskih upita.

    6. Nivo Lightbox

    Nivo Lightbox je fleksibilni dodatak za lightbox. Postoji mnogo opcija koje možete izabrati, pomoću kojih možete lako promijeniti izgled lightboxa. Na primjer, promijenite temu, efekt prijelaza i način navigacije.

    7. Lightcase

    Lightcase je fleksibilan, prilagodljiv i proširiv dodatak za lightbox koji je razvijen sa koristeći jQuery... Odlično radi u svim popularnim pretraživačima kao što su Internet Explorer 7+, Firefox, Opera, Webkit i drugi. Dodatak podržava foto, video, HTML5 video, Iframe, SWF i AJAX pozive.

    8. Lightlayer.js

    LightLayer je skripta za prikaz responzivnih lightbox -ova, dobro radi s drugim komponentama na bilo kojem ekranu. Ova skripta je zaista vrlo jednostavna za korištenje. LightLayer pruža kontrolu nad mnogim parametrima: bojom pozadine i neprozirnošću, položajem okvira za pregled, prijelazima otvaranja/zatvaranja i mnogim drugim prilagodljivim karakteristikama.

    9. Strip.js

    Strip je okvir za pregled koji se proširuje samo na dio stranice. To ga čini manje nametljivim i omogućava vam interakciju s drugim elementima stranice na velikim ekranima; na mobilnim uređajima lightbox ima klasičan izgled. Strip koristi JQuery i podržan je u svim većim preglednicima.

    10. Fluidbox

    Fluidbox je jQuery dodatak dizajniran da pruži nenametljiv, brzi okvir za pregled koji je idealan za slike visoke rezolucije. Odlično radi na mobilnim uređajima, a može se primijeniti i na ekranima s više visoka rezolucija za prelep prikaz slika.

    11. Featherlight

    Featherlight je vrlo lagan dodatak u 400 JavaScript stringovi , 100 CSS linije i manje od 6Kb veličine. Pametan, responsive lightbox, podržava slike, AJAX i iframe po defaultu. Također ga možete prilagoditi svojim potrebama. Featherlight radi u IE8 +, svi moderni pretraživači i mobilne platforme.

    12. Yalb

    Yalb označava Another Lightbox ( Još jedan Lightbox) - ali nije. Yalb dolazi sa velikim skupom interfejsa, uključujući prilagođene događaje koji vam omogućavaju da definišete njegovo stanje ( otvoren, zatvoren).

SLIČNI ČLANCI