Lightbox script. Disenyo ng web at pag-optimize ng search engine. Ano ang nasa na-upgrade na bersyon

09.09.2023 -

Ang Lightbox ay isang jQuery plugin na ginagamit upang ipakita ang isang imahe o anumang iba pang nilalaman sa isang espesyal na idinisenyong window, na karaniwang ipinapakita sa isang translucent shaded na background sa tuktok ng pangunahing nilalaman ng pahina.

Bago i-install ang plugin sa page at i-set up ito, tingnan natin ang mga halimbawa:

Pagsisimula sa Lightbox

I-download ang pinakabagong bersyon ng plugin (magagamit din sa pamamagitan ng Bower: bower install lightbox2 --save). Pagkatapos nito, i-unzip ang zip file at tingnan ang natanggal na halimbawa ng pagtatrabaho na matatagpuan sa folder mga halimbawa.

Handa nang i-install ang Lightbox sa iyong page? Magsimula sa pamamagitan ng pagkonekta ng CSS at Javascript. Maaari mong kunin ang parehong mga file na ito mula sa folder dist. I-paste ang sumusunod na code sa pagitan ng mga head tag sa iyong web page

Ilagay ang sumusunod na code na nagkokonekta sa plugin bago ang closing body tag:

Tiyaking na-load din ang jQuery na kinakailangan ng Lightbox. Kung gumagamit ka na ng JQuery (nangangailangan ng JQuery 1.7 o mas mataas) sa page, siguraduhing maglo-load ito bago lightbox.js. Kung hindi mo pinagana ang jQuery, gamitin ang dist/js/lightbox-plus-jquery.js, na mayroon nang library na ito, o i-download ang pinakabagong bersyon mula sa. lugar. Tiyaking nakalista ang apat na larawan sa lightbox.css lokasyon sa tinukoy na lokasyon. Maaari kang kumuha ng mga larawan mula sa folder /dist/images.

Ngayon ay lumipat tayo sa HTML code. Magdagdag ng attribute ng data-lightbox sa link na naglalaman ng mga larawan kung saan gusto naming ilapat ang aming plugin. Para sa value ng attribute, gumamit ng pangalan na natatangi para sa bawat larawan. Halimbawa:

Larawan #1

Magdagdag ng katangian ng pamagat ng data kung gusto mong ipakita ang pamagat. Kung mayroon kang pangkat ng mga kaugnay na larawan na gusto mong pagsamahin sa isang set, gamitin ang parehong halaga sa katangian ng data-lightbox para sa mga kinakailangang larawan. Halimbawa:

Img 2 Img 3 Img 4

Mga Setting ng Lightbox

Kung gusto mong baguhin ang alinman sa mga default na opsyon, tawagan ang opsyon: paraan.

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

alwaysShowNavOnTouchDevices Default: false
Kung totoo, pagkatapos ay ang kaliwa at kanang navigation arrow na lumilitaw sa mouseover kapag tumitingin ng isang hanay ng mga larawan ay palaging makikita sa mga touch-enabled na device
fadeDuration Default: 500
Ang tagal bago mawala ang container, sa millisecond.
fitImagesInViewport Default: totoo
Kung totoo, pagkatapos ay binabawasan namin nang proporsyonal ang laki ng imahe upang magkasya ang larawan sa lugar ng pagtingin. Nai-save nito ang user mula sa pag-scroll upang makita ang buong larawan.
maxWidth
Kung itatakda, ang taas ng larawan ay magiging limitado sa halagang ito (sa mga pixel). Ang aspect ratio ay hindi igagalang.
hangganan ng taas
Kung itatakda, ang lapad ng larawan ay magiging limitado sa halagang ito (sa mga pixel). Ang aspect ratio ay hindi igagalang.
positionFromTop Default: 50
Distansya mula sa tuktok ng viewport hanggang sa lalagyan ng Lightbox (sa mga pixel).
resizeDuration Default: 700
Ang oras kung kailan babaguhin ng lalagyan ng Lightbox ang lapad at taas nito kapag binabago ang mga larawang may iba't ibang laki (sa millisecond).
showImageNumberLabel Default: totoo
Kung hindi totoo, ang text ay magsasaad ng kasalukuyang numero ng larawan at ang kabuuang bilang ng mga larawan sa set, halimbawa: “Larawan 2 ng 4”.
wrapAround Default: false
Kung totoo, pagkatapos ay kapag ang huling larawan ay ipinakita, ang pindutan para sa pagpapakita ng susunod na larawan ay hindi mawawala. Ang pag-click dito ay magpapakita ng unang larawan.

Sinuri ko ang iba't ibang mga gallery ng imahe nang maraming beses at nakolekta ang isang malawak na koleksyon ng mga kamangha-manghang mga slideshow at plugin. Eksklusibong available din ang Lightbox sa CSS3, nang hindi kumukonekta ng mga karagdagang library ng js. Ngunit ang oras ay hindi tumigil, ang mga gumagamit ay lalong gumagamit ng iba't ibang mga mobile device upang mag-surf sa Internet, na nangangahulugang ang kakayahang umangkop ng mga elemento ng web at sa partikular na mga gallery ng larawan na may " " effect ay nagiging isa sa mga priyoridad na dapat bigyang-pansin ng mga web designer at developer. sa.

Nagpapakita ako ng isa pang seleksyon ng 15 adaptive jQuery plugins na friendly sa mga desktop browser at akmang-akma sa mga screen ng iba't ibang mga mobile device (laptop, smartphone, tablet, atbp.).

Panoorin ang demo sa mga website ng mga developer, i-download ang plugin na gusto mo at likhain, likhain, likhain...

1. iLightbox

Ang iLighbox ay isang magaan na jQuery Lightbox plugin na may suporta para sa malawak na hanay ng iba't ibang uri ng file: mga larawan, video, Flash/SWF, Ajax na nilalaman, mga frame at inline na mapa. Ang plugin na ito ay nagdaragdag din ng mga pindutan ng social media, na nagpapahintulot sa mga user na magbahagi ng nilalaman sa pamamagitan ng Facebook, Twitter o Reddit. Isang mahusay na pagkakataon upang ayusin ang mga nakamamanghang slide show, mga gallery ng larawan at mga video, na may panonood sa normal at full screen na mga mode.

Mabilis na gumagana ang iLighbox at kapag tiningnan sa mga mobile device, higit pa sa wastong ipinapakita nito ang naprosesong nilalaman. Sa iba pang mga bagay, gamit ang plugin na ito, madali mong maipapatupad ang pagpapakita ng mga bloke ng impormasyon tulad ng isang modal window.

Dependency: jQuery
Suporta sa browser: IE7+, Chrome, Firefox, Safari at Opera
Lisensya: Alam ng diyablo)))

2. SwipeBox

Ang Swipebox ay isang JQuery plugin na may suporta para sa mga touch screen sa mga mobile platform. Bilang karagdagan sa mga imahe, sinusuportahan ng plugin ang mga naka-embed na video mula sa Youtube at Vimeo. Ang Swipebox ay napakadaling ilakip sa anumang proyekto; Ang website ng developer ay may detalyadong dokumentasyon sa pagkonekta at paggamit ng plugin, nang walang hindi kinakailangang fluff, lahat ay nasa punto lamang, kaya sa palagay ko ay hindi magiging mahirap na malaman kung ano, saan, at bakit.

Dependency: jQuery
Suporta sa browser: IE9+, Chrome, Safari, Firefox, Opera, IOS4+, Android at Windows Phone
Lisensya: Hindi determinado, baka suwertehin ka)))

3.MagnificPopup

Isang matagal nang kilala at mahusay na napatunayang lightbox plugin batay sa jQuery o Zepto.js. Ang may-akda ng plugin ay si Dmitry Semenov, na siya ring nag-develop ng PhotoSwipe plugin, na tatalakayin ko sa ibaba. Naihatid bilang isang jQuery/Zepto plugin, mayroon itong mas advanced na mga tampok na hindi matatagpuan sa PhotoSwipe, tulad ng suporta sa video, pagpapakita ng mga mapa at nilalaman ng Ajax, pagpapatupad ng mga modal window na may mga built-in na form. Sa lahat ng pamantayan, ito ay isa pang mahusay na tool para sa isang web developer. Mayroong isang hiwalay na plugin para sa WordPress at detalyadong dokumentasyon sa pag-setup at paggamit. Ang tanging nakapanlulumong bagay ay ang kakulangan ng dokumentasyon sa Russian, sa paghusga sa pangalan at apelyido, ang may-akda ay tila Russian, hindi kailanman naiintindihan kung ito ay nakakapinsala, o dahil sa isang haka-haka na kamalayan ng kanyang sariling pagiging sopistikado, ngunit blah. Well, okay, sino ang kailangang malaman ito, hindi rin namin pinakuluan ang tsaa na malambot na pinakuluang))).

Dependency: jQuery 1.9.1+, o Zepto.js
Suporta sa browser: IE7 (bahagyang), IE8+, Chrome, Firefox, Safari at Opera
Lisensya: Lisensya ng MIT

4.PhotoSwipe

Dependency: Javascript o jQuery
Suporta sa browser
Lisensya: Lisensya ng MIT

11.FeatherLight

Isang 6 kbit lightbox plugin para sa higit pa o hindi gaanong matalinong mga developer, na nilagyan ng lahat ng mga pinaka-kinakailangang function. Bilang karagdagan sa pagsuporta sa lahat ng karaniwang uri ng nilalaman (teksto, mga larawan, iframe, Ajax), mayroong kakayahang kumonekta ng karagdagang isa, at maaari ka ring bumuo ng iyong sariling extension para sa plugin na ito, na ganap na makakatugon sa iyong mga pangangailangan kapag lumilikha ng bago proyekto. Kung paano gumagana ang buong bagay na ito (pag-unlad ng extension), hindi ko pa talaga tiningnan, ngunit ang mga nag-install ng plugin na ito, sa palagay ko malalaman nila ito))).

Dependency: jQuery
Suporta sa browser: IE8+, Chrome, Firefox, Safari at Opera
Lisensya: Lisensya ng MIT

12. LightGallery

Ang LightGallery ay isang multifunctional lightbox plugin na may maraming karagdagang feature. May kasamang mahigit 20 opsyon para i-customize ang pinakamaliit na detalye ng Lightbox. Mayroong lahat dito, mabuti, o halos lahat)). Buong gallery ng larawan na may maayos na pagkakaayos ng mga thumbnail, mga elemento ng nabigasyon at pag-scroll ng thumbnail. Simpleng HTML markup sa anyo ng isang hindi nakaayos na listahan

Dependency: jQuery
Suporta sa browser: IE7+, Chrome, Firefox, Safari, Opera, iOS, Android at Windows Phone
Lisensya: Lisensya ng MIT

Hindi karaniwan, sasabihin ko pa nga: isang hindi pangkaraniwang pagpapatupad ng lightbox, o sa halip, isang hindi pangkaraniwang presentasyon ng nilalaman, kapag ang isang imahe o video, sa disenyo ng lightbox, ay lilitaw sa kanan, hindi pinupunan ang buong screen, ngunit isang partikular na laki ng isang buong laki ng larawan o video. Sa malalaking screen ay nauunawaan ang pakikipag-ugnayan sa pahina; Sa maliliit na screen ng mga mobile device, ang lahat ng makabagong disenyong ito ay maayos na nagiging isang klasikong "lightbox". Ang ideya ay kawili-wili, tingnan ang demo, baka may magdagdag ng gayong pagkamalikhain.

Dependency: jQuery
Suporta sa browser: IE7+, Chrome, Firefox, Safari, Opera, iOS 5+ at Android 3+
Lisensya: Lisensya ng Creative Commons BY-NC-ND 3.0

Isang madaling gamitin na lightbox na plugin na naaangkop sa anumang proyekto at maganda rin ang hitsura sa anumang screen. Ang LightLayer plugin ay nagbibigay ng kontrol sa maraming mga setting, tulad ng pagbabago ng kulay ng background at antas ng transparency, ang posisyon ng base block, ang pagpili ng mga transition effect kapag nagbubukas/nagsasara, mga function na maaaring manipulahin ng mga user nang nakapag-iisa. Ang plugin ay mahusay na gumagana sa panlabas na nilalaman ng website, naka-embed na mga video player at mga mapa.

Dependency: jQuery
Suporta sa browser: IE9+, Chrome, Firefox, Safari at Opera
Lisensya: Lisensya ng MIT

Ang Fluidbox ay isang lightbox plugin na eksklusibo para sa mga larawan. Ang bilang ng mga posibleng pagkakaiba-iba sa pagtatanghal ng imahe ay talagang kahanga-hanga. Ang plugin ay mahusay na gumagana sa mga larawan sa iba't ibang mga disenyo, kabilang ang mga lumulutang na larawan, mga larawang may ganap na pagpoposisyon, mga larawan at mga larawang naka-frame at naka-indent, na may mga iisang larawan, at pinagsama sa isang gallery. Sa pangkalahatan, ito ay isang pag-aaksaya ng oras, hindi pa rin posible na ilarawan ang lahat ng mga kakayahan ng plugin sa isang maikling presentasyon, kaya mas mahusay na panoorin ang demo, i-twist ito, iikot ito, at sa tingin ko maraming mga tao ang magugustuhan ang plugin na ito. .

Dependency: jQuery
Suporta sa browser: IE9+, Chrome, Firefox, Safari, Opera
Lisensya: Lisensya ng MIT

Malamang yun lang! Umaasa ako na ang maikling pagsusuri na ito ay makakatulong sa iyo na maunawaan ang tambak ng mga produktong web development na inaalok. Nais kong tandaan na hindi ko nagamit ang lahat ng mga plugin na ipinakita sa pagpili sa mga gumaganang proyekto, sinubukan ko ang karamihan sa mga ito sa mga site ng pagsubok o sa pagawaan, kaya kung mayroong anumang mga katanungan, malamang na malulutas namin ang mga ito nang magkasama, at sama-sama, gaya ng dati Magtatagumpay tayo.

Naghahanap ka ba ng angkop na template ng Ruso para sa iyong mga layunin? Sa kasong ito, malamang na dapat mong bisitahin ang TemplateMonster marketplace. Para sa simpleng dahilan na kamakailan lamang ay lumitaw ang isang bagong seksyon ng mga template sa site. Ngayon ang bawat gumagamit ay maaaring maging pamilyar sa koleksyon, na ia-update at maa-update. Ang mga teksto para sa mga template ay isinulat sa pamamagitan ng kamay. Ngunit hindi lamang ito ang bentahe ng mga handa na solusyong ito. Pagkatapos ng lahat, sa kanilang mga pakete mahahanap mo ang lahat na magpapadali sa iyong trabaho sa pagbuo ng isang online na proyekto, kabilang ang isang visual editor.

Sa buong paggalang, Andrew

LightBox2

Ang isa sa mga nakaraang artikulo ay nag-usap tungkol sa marahil ang pinakasikat na libreng photo gallery - Lightbox, na nilikha batay sa jQuery script library. Batay sa Lightbox, ang mga web designer ay nakabuo ng maraming kawili-wiling mga clone, ngunit ang orihinal na bersyon ay ginagawa pa rin at matagumpay na ginagamit para sa mga gallery ng larawan sa maraming mga site. Isaalang-alang natin ang pinakabagong update nito - ang Lightbox2 plugin, na maliit ang laki at, gaya ng nakasanayan, madaling i-install sa site. Kasabay nito, ang Lightbox2 ay may kaakit-akit na disenyo, gumagana sa lahat ng mga browser at, kung ano ang maganda, ay nagpapakita nang tama ng malalaking larawan, na pini-compress ang mga ito upang magkasya sa laki ng screen ng user.

Ang nag-develop ng Lightbox2 plugin ay si Lokesh Dhakar, isang programmer mula sa San Francisco. Sa kasalukuyan (2014) na bersyon ng Lightbox v2.7.1 ay available, na susubukan naming i-install sa site. Ang isang halimbawa ng pagpapalawak ng isang larawan gamit ang LightBox2 ay ipinapakita sa figure.

Mahalagang paalaala: Kung ang iyong site ay gumagamit ng ilang mga jQuery plugin, kung gayon ito ay mas maginhawa upang ilipat ang jquery.js file (mas mabuti ang pinakabagong bersyon) sa root folder upang hindi ito ma-download nang maraming beses. Sa kasong ito, ang linya para sa pag-access dito ay magiging pareho para sa lahat ng mga plugin. Sa partikular, para sa aming halimbawa ito ay nagiging ganito:
.
Hindi inirerekomenda na gumamit ng maraming iba't ibang bersyon ng jQuery sa parehong pahina upang hindi sila magkasalungat sa isa't isa. Kasabay nito, siguraduhing suriin kung gumagana ang mga plugin sa naka-install na bersyon ng jQuery, dahil hindi lahat ng mga bersyon ay maaaring palitan.

Ngayon ay kailangan mong ilagay ang mga kinakailangang larawan sa pahina ng website. Gaya ng dati, dapat ipakita ang bawat isa sa anyo ng isang thumbnail (maliit) at isang full-size na larawan (malaki), na ipinapahiwatig ng isang link mula sa thumbnail. Sa tag ng link, ipinapahiwatig din namin ang rel="lightbox" - para sa isang larawan, at kung gusto naming pagsamahin ang ilang mga larawan sa isang gallery, sa pamamagitan ng isang gitling ang anumang expression na pareho para sa lahat, halimbawa, rel=" lightbox-one"

at iba pa.

Kung kinakailangan na gumawa ng mga inskripsiyon para sa mga imahe, pagkatapos ay ilagay ang mga ito sa pamagat ng mga link.
Ang isang halimbawa ng isang simpleng photo gallery ng tatlong larawan ay ipinapakita sa figure:

Mahalagang paalaala: kung ang laki ng pangunahing larawan (big.jpg) ay mas malaki kaysa sa laki ng screen sa browser ng user, awtomatikong isinasaayos (babawasan) ito ng LightBox2 upang magkasya sa laki ng screen. Kasabay nito, ang pinalaki na imahe ay palaging umaangkop sa screen, anuman ang aparato na ginagamit para sa pagtingin: isang smartphone, tablet o monitor na may mataas na resolution.

Samakatuwid, ito ay kanais-nais na ang isang malaking imahe ay may margin ng resolution, halimbawa, hindi bababa sa 1000 vertical pixels para sa isang standard na Full HD screen - 1920x1080. Sa aming halimbawa, ito ang larawang "Subbotnik".

Para mag-set up ng photo gallery, buksan ang lightbox.js file sa anumang HTML o text editor, halimbawa, Notepad. Sa pinakadulo simula ng file makikita mo ang magagamit na mga setting:
ito.fadeDuration = 500; //oras ng pagbubukas ng larawan ms
this.fitImagesInViewport = true; //magkasya sa laki ng screen true/false
this.resizeDuration = 700; //oras ng paglalahad ng larawan ms
ito.positionFromTop = 50; //indent ng lightBox window sa tuktok ng screen
this.showImageNumberLabel = true; //output ang numero ng larawan na tama/mali
atbp.

Ang mga pangunahing ay binibigyan ng mga komento sa Russian. Baguhin ang mga value ng parameter, at pagkatapos i-save ang lightbox.js file, makikita mo ang resulta sa pamamagitan ng pagbubukas ng page gamit ang iyong photo gallery sa browser.

Ang ilang mga parameter ng window ng gallery, halimbawa, kulay ng background at transparency, kulay ng caption, atbp., ay nakatakda sa CSS file na lightbox.css. Ang mga pantulong na larawan (pasulong, paatras, paglo-load, paglabas) ay matatagpuan sa img folder, at maaari din silang baguhin sa iyong paghuhusga.

Para sa iba pang mga programa para sa paglikha ng mga gallery ng larawan, mga carousel ng imahe at mga slide show sa site, tingnan at sa seksyong "

Inaayos ng script ang pagtingin sa mga larawan sa isang pop-up window. Ang pagtingin ay maaaring ayusin alinman sa pamamagitan ng isang larawan o sa pamamagitan ng isang gallery, pag-scroll sa mga larawan sa isang pop-up window.
Ang pinakasimple at pinakamabilis na script na i-install. Mga pag-install at pag-configure sa loob lamang ng ilang minuto.

At ang huling hakbang. Naglalabas ng mga larawan.
Mag-output ka ng mga larawang tulad nito:

Ang karaniwang code para sa pagpapakita ng isang maliit na imahe at isang link sa isang malaking imahe, dalawang parameter lamang ang idinagdag sa link.
Narito ang isang halimbawa ng code na ito - kapag nag-click ka sa larawan, isang malaking larawan ang lalabas.

Ang parameter ng data-lightbox="image" ay responsable para sa epektong ito.
Kung marami kang larawan sa page, maaari mong buksan ang mga larawan nang hindi nag-i-scroll sa isang pop-up window, o maaari mong pagsamahin ang mga larawan at mag-scroll ang mga ito sa isang pop-up window.
Upang pagsamahin ang mga larawan kailangan mong gumamit ng isang pangalan para sa bawat pangkat ng mga larawan

Tulad ng nakikita mo, ang lahat ng mga larawan ay maaaring i-scroll sa isang pop-up window, dahil ang data-lightbox ay pareho para sa lahat.
Kung gusto mong paghiwalayin ang mga larawan para hindi sila mag-scroll, gumamit ng code na tulad nito

Ngayon ang bawat larawan ay bubukas nang hiwalay, iyon ay, walang paraan upang mag-scroll sa susunod.

At ang pangalawang karagdagan na kailangan ng ilang tao ay ang pag-aalis ng mga duplicate na larawan.
Ito ay hindi pinagana bilang default, ngunit maaari mo itong paganahin nang direkta sa script, sa parehong lugar kung saan pinagana ang real-size na button.
Sa normal na paggamit ng script, ang function na ito ay nagdudulot lamang ng pinsala;

Pansinin na ang tatlo sa mga link ay walang laman, ibig sabihin, nagli-link ang mga ito sa malalaking larawan ngunit wala sa pagitan ng mga tag, at ang isang link ay puno ng isang larawan.
Bilang resulta, isang larawan lamang ang makikita sa browser; kapag nag-click ka dito, bubukas ang isang mas malaking larawan at lahat ng mga larawan mula sa mga walang laman na link ay nakuha at maaari kang mag-scroll dito.
At tingnan mo dito, sa mga link ay may dalawang magkatulad na larawan (naka-highlight sa pula) at kapag nag-scroll ka, makikita mo ang dalawang magkatulad na larawan.
Kung sa isang partikular na halimbawa ay pinagana mo ang pag-alis ng mga duplicate, pagkatapos ay walang mga duplicate na larawan.

Siyempre, hindi dapat umiral ang ganitong sitwasyon, bakit magpakita ng dalawang magkatulad na larawan at pagkatapos ay tanggalin ang mga ito. Ngunit kakaiba, naranasan ko ang sitwasyong ito: sa isang online na tindahan, ang mga duplicate na larawan ay dapat na ipinapakita para sa isang produkto (may mga matalinong pagpapalit ng mga larawan sa pamamagitan ng mga script), at kapag tiningnan sa pamamagitan ng lightbox, ang mga duplicate na larawan ay mukhang mali. Ito ay kung saan ang pag-alis ng mga duplicate ay madaling gamitin.

Mga komento

12/11/2014 Victor
Napakaganda ng script. Maaari mo ring ilarawan ang isang larawan gamit ang pamagat ng data. Ngunit nagkaroon ako ng problema, mayroon akong isang script sa pahina na nagtulak ng isang bloke sa gilid nang ikonekta ko ang script na ito, nawala ito. Bukod dito, nawawala ito kung nakakonekta ang mga js script. Akala ko nagkakasalungatan dahil sa bersyon, ngunit hindi dahil sa kanila.

05/23/2015 Victor
Hindi gumagana para sa akin kapag
href="http://ikk.secrieru.ru/products/Gallery/000039.jpg?ver=20150523142822"
parang ganito. Kung wala?ver=20150523142822
gumagana

05/25/2015 kaha
maraming salamat

06/29/2015 Andrey
Maraming salamat sa iyong trabaho! Ang lahat ay gumana halos sa unang pagkakataon)

08/26/2015 Alexander
Sinubukan ko ang iba't ibang mga analogue. Ang isang ito ay naging walang mga salungatan kaagad. pagtaas sa orihinal ang laki ng bituka Kung ginamit ko ang mouse upang kunin at ilipat ang patlang ng larawan, ito ay magiging isang ganap na gulo

11/01/2015 Igor
Kamusta!
Mahusay na gallery. Maraming salamat.
Ito lang ang tanong:
Sa halimbawa sa itaas (3 mga larawan), ang mga imahe ay ipinapakita sa isang loop. Ngunit sa na-download na bersyon ng lightbox-2.7.1 ang function na ito ay hindi gumagana. Kapag tinitingnan ang huling larawan, hindi na lilitaw ang button.
Sabihin mo sa akin, mangyaring, ano ang maaaring dahilan?

11/14/2015 Anton

11/15/2015 Anton
Sa IOS at Android, hindi sakop ng screen ng dim ang buong page!!! ano kayang problema. Sa isang regular na LightBox - lahat ay OK!

03/30/2016 Anton
Kamusta!
Posible bang gawing bukas ang larawan sa mas mataas na resolution?

11/18/2016 Yura
Maraming salamat! Ang lahat ay gumagana nang perpekto!

05/04/2017 Igor
Maraming salamat sa script! Matagal na akong naghahanap ng katulad at madaling i-install.
Para lamang sa ilang kadahilanan sa ilalim ng aking mga larawan may mga kakaibang inskripsiyon na lumilitaw РР·РѕР±СЂР°Р¶РµРЅРёРµ 8 РеР· 8

Siguro ang pag-encode ay kailangang itama sa isang lugar?

09.12.2017 Barsuk
Nasaan ka kanina? Ginugol ko ang buong araw na sinusubukang malaman kung paano alisin ang mga duplicate))

Mayroon akong isang preview ng pangunahing imahe sa pangunahing pahina, at sa ibaba ay may mas maliit na mga preview ng mga karagdagang, dahil dito mayroong mga duplicate sa gallery.

Nagbibigay-daan sa iyo ang mga plugin ng Lightbox para sa WordPress na gumamit ng pop-up window sa iyong site upang magpakita ng mga larawan sa itaas ng kasalukuyang page. Maaari silang magamit upang lumikha ng magagandang website.

Ang mga jQuery plugin na ito ay ginagamit upang magdagdag ng mga pop-up sa iyong website. Kapag nag-click ka sa anumang larawan mula sa slide gallery, bubukas ang larawang iyon sa isang pop-up window kasama ang susunod, nakaraan at isara na mga pindutan. Ang mga naturang plugin ay isang napakalakas na tool para sa sinumang web designer at developer, dahil nakakatulong ang mga ito na makamit ang napakagandang mga epekto na nagbibigay sa isang ordinaryong website ng kamangha-manghang at kaakit-akit na hitsura. Upang magamit ang jQuery plugin, kailangan mo ng pangunahing kaalaman sa JavaScript at jQuery. Kung hindi mo alam ang mga pangunahing kaalaman, basahin lamang ang paglalarawan ng plugin at sundin ang mga tagubilin. Bawat taon mayroong maraming bagong jQuery plugin na makakatulong sa iyong lumikha ng magagandang website. Ang mga ito mga plugin ng jQuery may mga kamangha-manghang tampok at maraming bagong tampok.

Sa artikulong ito nais naming ipakita sa iyo ang isang listahan ng ilan sa mga pinakamahusay at kapaki-pakinabang JQuery popup plugins para sa 2015, na makakatulong sa iyong lumikha ng maganda at kaakit-akit na mga website.

Ang Lightbox Slider Gallery ay isang madaling pamahalaan, nakakatipid ng espasyo na jQuery gallery na nagpapakita ng mga larawan at video.

Ang WP jQuery Lightbox ay isang simple, magaan na jQuery popup plugin. Mayroon itong mga transition ng CSS3 para sa pagpapakinis ng mga epekto at napapamahalaang laki ng imahe. Pinahusay para sa mga mobile device.

Ang Lightbox Gallery ay isang libreng wizard na tumutulong sa iyong madaling gumawa ng mga gallery ng mga pop-up na larawan na may mga nakamamanghang overlay effect sa ilang pag-click, nang walang isang linya ng code.

Ang Easy FancyBox ay isang tool para sa pagpapakita ng mga imahe, HTML na nilalaman at multimedia sa isang Macintosh lightbox na istilo, na lumilitaw sa tuktok ng isang web page.

Ang Lightbox ay isang tumutugon at madaling gamitin na popup plugin. Ang jQuery plugin na ito ay napakadaling gamitin at walang anumang hindi kinakailangang mga tampok.

FooBox Image Lightbox - Ginagamit upang lumikha ng gallery ng mga larawan sa isang popup window bilang mga "built-in" na slider. Isang mataas na tumutugon na jQuery plugin na gumagana nang pantay-pantay sa isang malaking monitor pati na rin sa isang tablet o smartphone.

Ang Lightbox Plus Colorbox ay isang magaan, nako-customize na jQuery plugin. Tugma sa jQuery 1.3.2+ sa Firefox, Safari, Chrome, Opera, Internet Explorer 7+ na mga browser.

Ang Royal PrettyPhoto ay isa pang jQuery popup plugin na angkop para sa mga imahe, naka-embed na nilalaman, iFrames, Google maps, mga kahilingan ng Ajax, Vimeo at mga video sa YouTube.

Ang Responsive Lightbox ng dFactory ay isang makinis, makapangyarihan at rebolusyonaryong jQuery popup plugin na makikinabang sa mga ambisyoso at malikhaing web designer at developer.

Ang Easy Swipebox ay isang jQuery plugin para sa desktop, mobile at mga tablet. Ito ay isang user friendly na jQuery plugin.

Ang Magnific Popup ay isang tumutugon na jQuery popup plugin na nakatuon sa pagbibigay ng pinakamahusay na karanasan ng user sa anumang device (Zepto.js compatible).

Ang Lightbox 2 ay isang maliit na JavaScript library na ginagamit upang magpakita ng mga larawan sa itaas ng kasalukuyang page. Ito ay madaling i-install at gumagana sa lahat ng mga modernong browser.

Lightbox script. Disenyo ng web at pag-optimize ng search engine. Ano ang nasa na-upgrade na bersyon

Mga Kamakailang Entri