→ Lightbox uz jQuery

Raksts sniedz piemēru galerijas spraudņa gaismas kaste. uz jQuery. Un šeit jūs varat lejupielāde darba opcija. Tas ir, kā tas darbojas faktiski:

Šī gaismas kastes ieviešana ir laba, jo to var kontrolēt, izmantojot konfigurācijas hash. Tas sākas ļoti viegli. Lai sāktu spraudni, jums ir nepieciešama Jquery bibliotēka, sākot ar versiju 1.2.6, Lightbox spraudnis un stila fails. Arhīvā, tieši zem, atrodas gatavā opcija. Lejupielādējiet, izsaiņojiet un atveriet failu index.html Jebkurā pārlūkprogrammā. Vajadzētu strādāt.

Es ceru, ka viss ir saprotams. Es pateiks tikai to, kā pārvaldīt Lightbox iestatījumus. Nekavējoties es atzīmēju, ka spraudnis nedarbojas IE 6, un tāpēc mēs ievietojam inicializācijas stāvokli visiem citiem, nevis "ēzelis". Nākamais vēl viens svarīgs brīdis: $ (Dokuments)Jo līdz brīdim, kad koksne ir gatava Muļķis Inicializācija netiks roll. Pati inicializācijas process ir taisnība:

$ ("# Galerija"). Lightbox ();

Avota koda piemērs:

Ātrums. - foto atvēršanas ātrums un tā slēgšana, milisekundēs.

Parametri hash taustiņi: Aizvērt, prev un nākamais Tie ir atslēgas, uz kurām alternatīva galerija skata vadība.

dūmainība - pāvesta fona pārredzamība. Veic vērtības no 0 līdz 1. Fona krāsu var mainīt stila failā.

Hesha attēlu parametri, kas ieguldīti hash failos, tas ir ceļš uz fona attēliem, lejupielādes indikatora animācija un back-forward pogas.

Arī Heshe tekstā varat mainīt etiķeti, lai pārvietotos.

Ja jūs saņemsiet vietni uz attēliem, kas uzcelti uz jQuery, tad, iespējams, to izmantos gaismas kaste. Lightbox jauda ir tāda, ka tā var pat pagriezt attēlus pievilcīgā un efektīvā galerijā. Tas ir šajā sakarā, ka popularitāte šādu spraudņi jquery sfērā web dizains ir.

Pateicoties jQuery kopienai, ir milzīgs skaits Lightbox spraudņi, kas rada lieliskas iespējas dizaineriem strādāt ar attēliem. Mūsu nodarbībā, 15 dažādi spraudņi ir iesniegti, lai pievērstu uzmanību.

PIEPILDĪT.

Topup ir viegli izmantot JavaScript bibliotēku neuzbāzīgu attēlu izejas un tīmekļa lapām. Bibliotēka tiek kontrolēta, izmantojot jQuery un jQuery UI, lai nodrošinātu savietojamību un kompaktumu.

Spraudnis nolika

Highslide ir īpašs instruments attēlu, mediju un galeriju skatīšanai.

Krāsu kaste

Little Custom spraudnis JQuery 1.3+.

Lightbox 2 ir vienkāršs, neuzkrītošs skripts, kas tiek izmantots, lai izvadītu attēlu pārklājuma slānī pašreizējā lapā. To ir viegli uzstādīt, un tas darbojas visās mūsdienu pārlūkprogrammās.

prettyPhoto atbalsta ne tikai attēlus, bet arī video, zibspuldzi, YouTube un Ajax. Likebox multivides failiem.

Slimbox 2 - gaismas kaste 2 Clone 4 Kb izmēri, īstenoti, izmantojot jQuery.

ShadowBox - Web pieteikums multivides failu apskatei, kas atbalsta visus populāros formātus. Shadowbox ir rakstīts uz JavaScript un CSS, un ir labas iestatīšanas iespējas.

Pirobox pagarināts V.1.0.

Viena no šīs spraudņa priekšrocībām ir iespēja atvērt jebkura veida failu - no UWF faila iebūvētā satura, no vienkāršs attēls līdz.pdf failu.

Citas brīnišķīgas iezīmes: automātiska attēla izmēra un atbalsta tehnoloģiju mainīšana un mest.

Greybox var izmantot, lai parādītu tīmekļa vietnes, attēlus un citu saturu.

Super Box ir spraudnis, kas parāda logus ar gaismas kastes efektu.

Foto galerijas izveide vietnē

Foto galerija Lightbox2. - uzstādīšana un konfigurācija

Vienā no iepriekšējiem rakstiem tas tika pastāstīts par visvairāk, iespējams, populārs bezmaksas foto galerija - Gaismas kaste.izveidots, pamatojoties uz skriptu bibliotēku jQuery. . Uz pamatnes Gaismas kaste. Web dizaineri ir izstrādājuši daudzus interesantus klonus, bet sākotnējā iespēja joprojām turpina attīstīties un tiek veiksmīgi izmantota foto galerijām dažādās vietās. Apsveriet to pēdējā atjaunošana - Iespraust Lightbox2.Atšķiras no neliela izmēra un kā vienmēr, viegli uzstādīšana uz vietas. Kur Lightbox2. Tam ir pievilcīgs dizains, strādā visās pārlūkprogrammās un, kas ir īpaši patīkami, pareizi parāda lielus attēlus, saspiežot tos saskaņā ar lietotāja ekrāna lielumu.

Vienkāršs attīstītājs Lightbox2. - Lokesh Dhakar, programmētājs no Sanfrancisko. Pašlaik (2014) ir pieejama Lightbox v2.7.1 versija, kuru mēs centīsimies instalēt vietnē. Piemērs, lai izmantotu vienu attēlu, izmantojot Lightbox2. Parādīts attēlā.

Foto galerijas Lightbox2 instalēšana2.

Lai instalētu fotoattēlu galeriju Lightbox2. Pirmkārt, izveidojiet jaunu mapi vietnē, zvanot, protams, lightbox2.. Šai mapei jābūt tajā pašā direktorijā kā fotoattēlu galerijas lapā. Pēc tam lejupielādējiet arhīvu un izsaiņojiet to izveidotajā mapē. Mums būs divi skripti tajā ( * .js.), Papildu attēli (mape) img) un CSS fails (* .css). Pēc tam ievietojiet titullapā ar nākotnes foto galeriju tagā ... Šādas līnijas norāda veidus mūsu jaunajiem failiem:

SVARĪGA PIEZĪME: ja jūsu vietnē izmantojat vairākus spraudņus jQuery.Ērtāk, lai pārsūtītu JQuery.js failu (vēlams jaunāko versiju) uz saknes mapi, lai to neslogotu vairākas reizes. Šajā gadījumā tā apelācijas rinda izskatīsies vienādi visiem spraudņiem. Jo īpaši mūsu piemērā izrādās:
.
Nav ieteicams izmantot vairākas lapas vairākas dažādas versijas jQuery.lai viņi nav pretrunā viens ar otru. Tajā pašā laikā pārliecinieties, lai pārbaudītu spraudņu darbību ar instalētā versija jQuery.Tā kā ne visas versijas ir savstarpēji aizvietojamas.

Tagad jums ir jānovieto vēlamie attēli lapas vietā. Kā parasti, katram jābūt pārstāvētam kā miniatūrai (mazs) un pilnizmēra attēlu (liels), uz kuru attiecas saite no sīktēla. In tag saikņu papildus norādiet rel \u003d "Lightbox" - par vienu attēlu, un, ja mēs vēlamies apvienot vairākus attēlus uz galeriju, tad jebkura izteiksme ir vienāda visiem, piemēram, rel \u003d "Lightbox-One"


utt

Ja jums ir nepieciešams uzrakstīt attēlus, tad ievietojiet tos nosaukuma saitēs.
Attēls ir redzams vienkāršu foto galeriju no trim attēliem:

SVARĪGA PIEZĪME: ja galvenais attēla izmērs ( big.jpg.) vairāk nekā lielums Ekrāns lietotāja pārlūkprogrammā, tad Lightbox2.automātiski pielāgo (samazina) uz ekrāna lieluma. Šajā gadījumā paplašinātais attēls vienmēr iekļaujas ekrānā, neatkarīgi no tā, kura ierīce tiek izmantota, lai apskatītu: viedtālrunis, tablete vai augstas izšķirtspējas monitors.

Tāpēc ir vēlams, lai lielajam attēlam ir izšķirtspējas piegāde, piemēram, vismaz 1000 pikseļi vertikāli standarta ekrāns Full HD. - 1920x1080. Mūsu piemērā tas ir attēls "Sestdiena".

Foto galerijas apgaismojuma iestatīšana2.

Lai konfigurētu fotoattēlu galerisko failu failu lightbox.js. jebkurā html- vai teksta redaktors, piemēram, piezīmjdatorā. Faila sākumā redzēsiet pieejamos iestatījumus:
tas .Fadeduration \u003d 500; // atvēršanas laiks bildes MS
tas .Fitimagesinviewport \u003d taisnība; // uzstādīšana ekrāna izmēru TRUE / FALSE
tas ir atbilde \u003d 700; // laiks izvietojot attēlus MS
this.Positionfromtop \u003d 50; // punkts WINDBOX WINDBOX uz ekrāna
this.ShowimagenumberLabel \u003d taisnība; // secinājumu telpas attēlus TRUE / FALSE
utt

Galvenie ir aprīkoti ar komentāriem krievu valodā. Mainiet parametru vērtības un pēc faila saglabāšanas lightbox.js. Jūs varat novērot rezultātu, atverot lapu ar savu fotoattēlu galeriju pārlūkprogrammā.

Daži galerijas loga parametri, piemēram, fona krāsa un tās pārredzamība, uzraksta krāsa utt. Ir noteikti CSS failā lightbox.css.. Papildu attēli (uz priekšu, atpakaļ, lejupielādi, izvadi) atrodas mapē imgUn tos var mainīt arī pēc saviem ieskatiem.

Uz citām programmām, kas rada vietnes foto galeriju, attēlu karuseļus un slīdrādes, skatiet un sadaļā "

Daudzas reizes tika atsauksmes par dažādām attēlu galerijām, pulcējās plašu iespaidīgu slīdrādes un -plagīnu kolekciju. Ir Piggy Bank un Lighbox tikai uz CSS3, nepievienojot papildu JS bibliotēkas. Bet laiks nav stāvēt, lietotāji arvien biežāk izmanto dažādas mobilās ierīces interneta sērfošanai, kas nozīmē pielāgoties tīmekļa elementiem un jo īpaši foto galerijām ar efektu "" kļūst par vienu no prioritātēm, uz kurām web dizaineri un izstrādātājiem jāpievērš uzmanība .

Es iesniedzu vēl vienu izvēli 15 adaptīvie jquery spraudņi, kas ir draugi, gan ar darbvirsmas pārlūkiem, un perfekti perfekti uz ekrāniem dažādu mobilās ierīces (Portatīvie datori, viedtālruņi, tabletes utt.).

Skatiet Demo Attīstītāju vietnēs, lejupielādējiet vēlamo spraudni un izveidojiet, izveidojiet, izveidojiet ...

1. Ilightbox

ilighbox - Tas ir gaismas kastes spraudnis jQuery ar plašu atbalstu dažādi veidi Faili: attēli, video, zibspuldze / swf, ajax, rāmji un iebūvētās kartes. Šis spraudnis arī pievieno pogas. sociālie tīkliļaujot lietotājiem dalīties ar saturu, izmantojot Facebook, Twitter vai reddit. Lieliska iezīme organizācijas iespaidīgu slīdrādes, attēlu galerijas un videoklipu, ar apskati parastajos un pilnekrāna režīmos.

ilighbox Tas darbojas diezgan ātri un skatoties uz mobilajām ierīcēm, vairāk nekā pareizi parāda apstrādāto saturu. Cita starpā, izmantojot šo spraudni, jūs varat viegli ievietot informācijas bloku izlaidi pēc modālā loga veida.

• Atkarība: jQuery.
• Atbalsta pārlūkprogrammas: IE7 +, hroms, Firefox, Safari un Opera
• Licence: Un elle to zina))))

2. Swipipipbox.

Swipipipbox. - Tas ir jQuery spraudnis ar atbalstu mobilo platformas sensoriem ekrāniem. Papildus attēliem spraudnis atbalsta iegulto video no YouTube un Vimeo. SwipeBox ir ļoti viegli nostiprināt jebkuram projektam, spraudnim ir vairākas intuitīvas iespējas konfigurēt tās funkcionalitāti un uzvedību. Attīstītāja tīmekļa vietnē detalizēta dokumentācija Par savienojumu un izmantošanu spraudņa, bez lieko ūdeni, viss ir tikai gadījumā, tāpēc nav grūti izdomāt, kas, un kāpēc, es domāju, ka tas nebūs grūti.

• Atkarība: jQuery.
• Atbalsta pārlūkprogrammas: IE9 +, hroms, safari, firefox, opera, iOS4 +, Android un Windows tālrunis
• Licence: Man nav definēts, varbūt jūs būsiet laimīgs)))))

3. MagnificPopup.

Ilgu laiku, labi zināms un labi pierādīts, piemēram, jquery vai zepto.js. Spraudņa autors - Dmitrijs Semenovs, kas ir izstrādātājs un spraudnis Photoswipe, kas pateiks tieši zemāk. Nāk ar jQuery / zepto spraudni, ir vairāk iespēju trūkst vairāk iespēju PhotosWipe, piemēram, video atbalstu, kartēšanu un AJAX saturu, ieviešanu modālie logi ar iebūvētiem veidiem. Visiem kritērijiem tas ir vēl viens brīnišķīgs rīks tīmekļa izstrādātājā. Atsevišķi ir pievienots WordPress spraudnis un detalizēta uzstādīšanas dokumentācija un izmantošana. Tikai demokrātijas trūkums krievu valodā, spriežot pēc nosaukuma un uzvārda, autors, šķiet, ir krievu valoda, nekad nav saprotams, jo kaitības, vai arī par iedomātā izpratni par viņa sajūtu un blah. Nu, labi, kam tas ir jākalpo, mēs arī neietekmēt tēju pārāk))).

• Atkarība: jQuery 1.9.1+ vai zepto.js
• Atbalsta pārlūkprogrammas: IE7 (daļēji), IE8 +, Chrome, Firefox, Safari un Opera
• Licence: MIT licence

4. PhotosWipe.

• Atkarība: JavaScript vai jQuery
• Atbalsta pārlūkprogrammas
• Licence: MIT licence

11. Featherlight.

6 K.BIT Lightbox-spraudnis, vairāk vai mazāk savvy izstrādātājiem, ir aprīkots ar visām nepieciešamajām funkcijām. Papildus atbalstīt visus kopējos satura veidus (tekstu, attēlus, IFRAME, AJAX), ir papildu savienojums pēc izvēles, kā arī jūs varat izstrādāt savu paplašinājumu šim spraudnim, kas pilnībā atbilst jūsu vajadzībām, veidojot jaunu projektu . Tāpat kā visa šī ekonomika (paplašināšanās attīstība), tas nebija īpaši apzināts, bet tie, kas ievietos šo spraudni, es domāju, ka sapratīs))).

• Atkarība: jQuery.
• Atbalsta pārlūkprogrammas: IE8 +, hroms, Firefox, Safari un Opera
• Licence: MIT licence

12. LightGallery.

LightGallery. - daudzfunkcionāls Likebox spraudnis ar vairākiem papildus iespējas. Nāk ar vairāk nekā 20 opcijām, lai konfigurētu mazāko zibspuldzes informāciju. Ir viss, labi vai gandrīz viss)). Pilna pilntiesīga attēlu galerija ar kārtīgi būvēts miniatūras, ar navigācijas elementiem un miniatūru ritināšanu. Vienkārša HTML iezīmēšana neierobežota saraksta veidā

Izmantojot datu src atribūtu pilna izmēra attēliem. Tas pats ar video no YouTube un Vimeo. Viss Wedzīvi atbalsta visus video formātus HTML5, MP4, WebM, OGG ... animācijas sīktēlus, adaptīvo izkārtojumu ar mobilā ierīces atbalstu, slaidu efektus un gludas pārejas Izskats, ieslēdzot attēlus un citu saturu. Izskats Viegli veidojas un konfigurēt ar izmantojot CSS.. Pre-slodze attēlu un kodu optimizācija. Navigācijas galddatorus, kā arī spēju izmantot papildu fontu ikonas. LightGallery. - Tas ir, ja reālā "apvienot", galvenais ir, lai pazust zaudēto iestatījumu pārpilnību un plašas iespējas šī spraudņa.
Tie, kuriem ir nepieciešams pienācīgs slīdnis, es ieteiktu pievērst uzmanību no tiem pašiem izstrādātājiem.
• Atkarība: jQuery.
• Atbalsta pārlūkprogrammas: IE7 +, hroms, Firefox, Safari, Opera, iOS, Android un Windows tālrunis
• Licence: MIT licence



13. Stripjs.

Neparasts, es pat teiktu: neparastu ieviešanu gaismas kastes, precīzāk, ne gluži parastā satura prezentācija, kad attēls vai video, dizainā Likbox, parādās labajā pusē, aizpildot ne visu ekrānu, bet tikai uz noteiktais pilnizmēra attēla vai video lielums. Uz lielie ekrāni Šī pieeja ir skaidra, iespēja mijiedarboties ar lapu paliek. Mazajos mobilo ierīču ekrānos viss šis novatoriskais dizains vienmērīgi notiek klasiskā gaismas kaste. Ideja ir interesanta, apskatiet demo, varbūt kāds ievietos šādu radošu.

• Atkarība: jQuery.
• Atbalsta pārlūkprogrammas: IE7 +, Chrome, Firefox, Safari, Opera, iOS 5+ un Android 3+
• Licence: Creative Commons By-NC-ND 3.0 licence



14. Lightlayer.

Viegli lietojams Lightbox spraudnis, kas ir labi apvienots ar jebkuru projektu, kā arī izskatās labi uz jebkura ekrāna. LightLayer spraudnis sniedz kontroli pār iestatījumu kopu, piemēram, mainot krāsu fona un tās pārredzamības pakāpi, pozīciju bāzes vienības, atlases / aizvēršanas, funkcijas, ka lietotāji var manipulēt patstāvīgi. Spraudnis lieliski darbojas ar ārējo tīmekļa vietņu saturu, iebūvētiem video atskaņotājiem un kartēm.

• Atkarība: jQuery.
• Atbalsta pārlūkprogrammas: IE9 +, hroms, firefox, safari un opera
• Licence: MIT licence



15. Fluidbox

Fluidbox - Likebox spraudnis tikai attēliem. Visu veidu attēla attēlojuma variāciju skaits ir patiesi iespaidīgs. Spraudnis darbojas lieliski ar attēliem dažādos dizainos, tostarp peldošos attēlus, attēlu ar absolūto pozicionēšanu, attēliem un fotoattēliem, kas ierāmēti ar rāmi, un kam ir ievilkumi, ar atsevišķiem attēliem un apvienojumā galerijā. Kopumā veltīgi ūdenī ielej, gleznot visas spraudņa iespējas īsā skatījumā, nedarbosies vienalga, tāpēc labāk ir apskatīt demo, vērpjot, pagriezt un domāt, ka šis spraudnis būs daudz.

• Atkarība: jQuery.
• Atbalsta pārlūkprogrammas: IE9 +, Chrome, Firefox, Safari, Opera
• Licence: MIT licence



Tas ir iespējams viss! Es ceru, ka šis mazais pārskats palīdzēs jums saprast piedāvāto tīmekļa izstrādes produktu kaudzi. Es vēlos atzīmēt, ka ne visi spraudņi, kas izklāstīti atlases spraudņiem, ko es izmantoju darba projektos, lielākā daļa no tiem izrādījās testa vietās vai Lahakā, tādēļ, ja rodas kādi jautājumi, visticamāk, mēs tos atrisināsim kopā un kopā, Kā vienmēr viss strādās kopā ar mums.

Vai jūs meklējat piemērotu rusificētu veidni jūsu mērķiem? Iespējams, šajā gadījumā jums vajadzētu apmeklēt Templatemonster markes. Vienkāršā iemesla dēļ, kas nesen parādījās vietnē jaunā sadaļa Veidnes. Tagad katrs lietotājs var iepazīties ar kolekciju, kas atjauninās un atjauninās. Teksti veidnēm tika uzrakstīti manuāli. Bet tas nav vienīgais šo gatavo risinājumu plus. Galu galā, viņu iepakojumos jūs varat atrast visu, kas atvieglos darbu pie tiešsaistes projekta izstrādes, tostarp vizuālo redaktoru.

Ar visu cieņu, Andrew

Lightbox ir jquery-spraudnis, kas tiek izmantots, lai parādītu attēlu vai kādu citu saturu speciāli dekorētā logā, kas tiek parādīts kā noteikums, par caurspīdīgu Shadowned fonu galvenā satura lapā.

Pirms spraudņa instalēšanas lapā un ieslēdzat to, pieņemsim apskatīt piemērus:



Darba sākšana ar Lightbox

Lejupielāde pēdējā versija Spraudnis (pieejams arī caur Bower: Bower Install Lightbox2 --Save). Pēc tam, unzhive zip fails. un ieskatieties no griezuma darba piemēriem, kas atrodas mapē piemēri..

Vai esat gatavs instalēt Lightbox savā lapā? Sāciet ar CSS un JavaScript savienošanu. Jūs varat veikt abus šos failus no mapes. dist.. Ievietojiet šādu kodu starp galvenajiem tagiem savā tīmekļa lapā

Šādu kodu, kas savieno spraudņa ieliktni ķermeņa aizvēršanas tagā:

Pārliecinieties, ka ir ielādēti arī jQuery vēlaties Lightbox. Ja jūs jau izmantojat jQuery (nepieciešami jQuery 1.7 vai augstāka), pārliecinieties, ka tas ir ielādēts lightbox.js.. Ja neesat saistīts ar jQuery, tiek izmantots dist / js / lightbox-plus-jquery.js, kas jau ir šī bibliotēka, vai lejupielādēt jaunāko versiju no. Vietne. Pārliecinieties, ka četri attēli, kas paredzēti lightbox.css. Atrašanās vietu norādītajā vietā. Jūs varat fotografēt no mapes / Attēli.

Tagad mēs risināsim HTML kodu. Pievienojiet atsauces saiti datu apgaismojuma kaste un uz kuru mēs vēlamies piemērot mūsu spraudni. Augstas kvalitātes atribūtu vērtībā izmantojiet unikālu nosaukumu katram attēlam. Piemēram:

Image # 1.

Pievienojiet datu nosaukuma atribūtu, ja vēlaties parādīt nosaukumu. Ja jums ir saistītu attēlu grupa, kuru vēlaties apvienot komplektā, izmantojiet tādu pašu vērtību vēlamo attēlu datu lightbox atribūtā. Piemēram:

Img 2 img 3 img 4

Iestatījumi Lightbox

Ja vēlaties mainīt noklusējuma iestatījumus, zvaniet opcijai:.

• vienmērshownanavontouches noklusējums: False

  Ja taisnība., kreisās un pareizās navigācijas bultiņas, kas parādās, atrodoties peli, skatoties attēlu kopu, būs redzams ierīcēs ar pieskārienu ievades atbalsta ierīcēm

• izpildes noklusējums: 500

  Laiks, kas nepieciešams, lai izzustu konteineru milisekundēs.

• fitimagesinviewport noklusējums: taisnība

  Ja taisnība.Tas ir proporcionāli samazināts attēla izmērs, lai attēls būtu piemērots skatīšanās zonā. Tas novērš lietotāju no nepieciešamības ritināt, lai redzētu visu attēlu.

• maxwidth.

  Ja iestatīts, attēla augstums tiks ierobežots tikai ar šo vērtību (pikseļos). Tiks novērota proporcija.

• maxheight

  Ja iestatīts, attēla platums tiks ierobežots līdz šai vērtībai (pikseļos). Tiks novērota proporcija.

• pozīcijasFromtop noklusējums: 50

  Attālums no skata loga augšpuses uz Lightbox konteineru (pikseļos).

• noklusējuma resizizācija: 700

  Laiks, kurā Lightbox konteiners mainīs tās platumu un augstumu, mainot dažādu izmēru attēlus (milisekundēs).

• showimagenumberLabel noklusējums: TRUE

  Ja nepatiessTeksts norāda pašreizējo attēla numuru un kopējo attēlu skaitu komplektā, piemēram: "2. attēls no 4".

• noklusējuma wraparound: False

  Ja taisnība.Kad tiek parādīts pēdējais attēls, poga, lai parādītu nākamo attēlu, nepazūd. Nospiežot, tas novedīs pie pirmā attēla izrādes.