Populārākā bibliotēka ir Lightbox Javascript, kuru mēs jau daudzus gadus izmantojam galddatoros, bet ne mobilajās platformās.

Šeit ir 14 Lightbox spraudņi ar atbalstu mobilajām platformām.

PhotoSwipe

PhotoSwipe - viegls, ar skārienu darbināms un vissvarīgāk modulārs spraudnis, kas ļauj noņemt nevajadzīgās detaļas, kas nav vajadzīgas. Tas labi darbojas mobilo ierīču pārlūkprogrammās. Jūs varat mainīt attēlus, velkot ar pirkstu tā, it kā tā būtu standarta lietotne, ar vienmērīgām pārejām.

• Nepieciešamās bibliotēkas: Nē.
• Pārlūkprogrammas atbalsts: IE8 +, Chrome, Firefox, Safari, Opera un citas mobilās pārlūkprogrammas.
• Licence: MIT licence

Lielisks uznirstošais logs

Magnific Popup ir vēl viens gaismas kastes spraudnis, ko izstrādājis tas pats autors kā PhotoSwipe Dmitrijs Semenovs. Spraudnis nāk kā jQuery / Zepto spraudnis, un tajā ir arī atbalsts, kuram trūkst PhotoSwipe, piemēram, video, kartes un Ajax atbalsts. Šī ir lieliska alternatīva tiem, kas izvēlas vairāk iespēju.

• Nepieciešamās bibliotēkas: JQuery 1.9.1+ vai Zepto.js
• Pārlūkprogrammas atbalsts: IE7 (daļēji) ,.
• Licence: MIT licence

SwipeBox

Swipebox jQuery spraudnis ar pieskārienu žestu atbalstu mobilajām platformām. Papildus attēliem tā atbalsta arī Youtube un Vimeo videoklipus. Swipebox ir viegli uzstādīt, un tai ir vairākas iespējas, kā pielāgot tās konfigurāciju. Es domāju, ka Swipebox ir pārāk pārblīvēts gaismas kastes spraudnis tiem, kas nezina JavaScript.

Lightbox priekš Bootstrap

Sākotnēji Bootstrap trūkst Lightbox spraudņa. Bootstrap Lightbox to novērš. Ja izmantojat Bootstrap, ir ļoti ieteicams izmantot šo bibliotēku. Spraudnis labi integrējas ar Bootstrap.

• Nepieciešamās bibliotēkas: JQuery un Bootstrap modulis
• Pārlūkprogrammas atbalsts: IE8 +, Chrome, Firefox, Safari un Opera
• Licence: GNU licence

Nivo gaismas kaste

Nivo Lightbox ir ļoti pielāgojams gaismas kastes spraudnis. Dažādas iespējas ļauj mainīt izskats... Piemēram: tēma, izskata animācija un navigācijas veids.

• Nepieciešamās bibliotēkas: JQuery
• Pārlūkprogrammas atbalsts:
• Licence: MIT licence

ImageLightbox

ImageLightbox ir vienkāršs gaismas kastes spraudnis bez zvaniem un svilpieniem. To izmanto tikai attēlam, līdz ar to arī nosaukums. Netiek atbalstīti ne video, ne citi veidi. Tas arī neprasa papildu HTML iezīmēšanu; tagu ir pietiekams. Šo spraudni ir viegli lietot.

• Nepieciešamās bibliotēkas: JQuery
• Pārlūkprogrammas atbalsts: IE9 +, Chrome, Firefox, Safari un Opera
• Licence: Nav noteikts

Mini gaismas kastīte

Vēl viens gaismas kastes spraudnis bez papildinājumiem. Bibliotēka sver tikai 2 kilobaitus un darbojas tikai ar attēliem. Šis ir ideāls spraudnis, ja jūs tikai izstrādājat jaunākā versija pārlūkprogrammā un nav jāatbalsta video vai citi formāti.

• Nepieciešamās bibliotēkas: Nē
• Pārlūkprogrammas atbalsts: Internet Explorer 10+, Chrome, Firefox, Safari un Opera
• Licence: MIT licence

LightCase

Lightcase ir lielisks gaismas kastes spraudnis. Atbalsta vairāku veidu animācijas, piemēram, izbalēšanu, elastību, tālummaiņu un ritināšanu. Turklāt tas atbalsta arī dažādus multivides veidus, tostarp Youtube iegulšanu, HTML video, SWF un ievades veidlapas.

• Nepieciešamās bibliotēkas: JQuery
• Pārlūkprogrammas atbalsts: IE9 +, Chrome, Firefox, Safari un Opera
• Licence: GPL licences

Featherlight

Featherlight ir pamata spraudnis, kas zinošiem izstrādātājiem sver 6 kilobaitus un ietver tikai būtisko. Ja jums ir nepieciešams gaismas kastes efekts, piemēram, galerijas attēlu grupai, varat iespējot galerijas paplašinājumu. Varat arī izstrādāt savu spraudņa paplašinājumu, ko izmantot savos projektos.

• Nepieciešamās bibliotēkas: JQuery
• Pārlūkprogrammas atbalsts: IE8 +, Chrome, Firefox, Safari un Opera
• Licence: MIT licence

Gaismas slānis

LightLayer ir viegli lietojams gaismas kastes spraudnis. Spraudnis atbalsta daudzas pielāgotas iespējas JavaScript metodes un pielāgoti pasākumi. Spraudnis darbojas ar attēliem, video, kartēm.

• Nepieciešamās bibliotēkas: JQuery
• Pārlūkprogrammas atbalsts: IE9 +, Chrome, Firefox, Safari un Opera
• Licence: MIT licence

Gaismas galerija

LightGallery, vēl viens gaismas kastes spraudnis ar liela summa funkcijas. Tas ietver vairāk nekā 20 iespējas, lai pielāgotu dažādas gaismas kastes efektu detaļas.

• Nepieciešamās bibliotēkas: JQuery
• Pārlūkprogrammas atbalsts: IE7 +, Chrome, Firefox, Safari, Opera, IOS, Android un Windows Phone
• Licence: MIT licence

FluidBox

Fluidbox gaismas kastes spraudnis darbojas ar attēliem. Ietver atbalstu dažādiem displejiem, ieskaitot peldošus attēlus, attēlus absolūtā stāvoklī, attēlus ar apmalēm un polsterējumu, kā arī galerijas. Ir arī WordPress spraudnis.

• Nepieciešamās bibliotēkas: JQuery
• Pārlūkprogrammas atbalsts: IE9 +, Chrome, Firefox, Safari, Opera
• Licence: MIT licence

StripJS

StripJS ir unikāls gaismas kastes spraudnis. Tā vietā, lai pārklātu attēlu, gaismas kastes modulis slīd kopā ar attēlu no vienas puses uz otru, lai attēls netiktu bloķēts viss saturs. StripJS atbalsta gan attēlus, gan videoklipus.

• Nepieciešamās bibliotēkas: JQuery
• Pārlūkprogrammas atbalsts: IE7+, Chrome, Firefox, Safari, Opera, IOS 5+ un Android 3+
• Licence: Creative Commons BY-NC-ND 3.0 licence

Es daudzas reizes pārskatīju dažādas attēlu galerijas, savācu plašu iespaidīgu slaidrāžu un spraudņu kolekciju. Cūciņu bankā ir arī Lighbox tikai CSS3, nepieslēdzot papildu js bibliotēkas. Bet laiks nestāv uz vietas, lietotāji arvien vairāk izmanto dažādas mobilās ierīces, lai sērfotu internetā, kas nozīmē, ka tīmekļa elementu un jo īpaši fotogaleriju pielāgošanās spēja ar "" kļūst par vienu no prioritātēm, ko tīmekļa dizaineri un izstrādātāji veido vajadzētu pievērst uzmanību.

Šeit ir vēl viena 15 atsaucīgu jQuery spraudņu kolekcija, kas ir draudzīga gan darbvirsmas pārlūkprogrammām, gan lieliski iekļaujas dažādu mobilo ierīču (klēpjdatoru, viedtālruņu, planšetdatoru u.c.) ekrānos.

Skatieties demonstrāciju izstrādātāju vietnēs, lejupielādējiet sev tīkamo spraudni un izveidojiet, izveidojiet, izveidojiet ...

1. iLightbox

iLighbox Tas ir viegls jQuery gaismas kastes spraudnis, kas atbalsta plašu dažādu failu veidu klāstu: attēlus, videoklipus, Flash / SWF, Ajax saturu, rāmjus un iegultās kartes. Šis spraudnis pievieno arī sociālo mediju pogas, ļaujot lietotājiem koplietot saturu, izmantojot Facebook, Twitter vai Reddit. Lieliska iespēja organizēt iespaidīgas slaidrādes, attēlu un video galerijas, skatoties normālā un pilnekrāna režīmā.

iLighbox darbojas diezgan ātri un skatoties mobilās ierīces, vairāk nekā pareizi parāda apstrādāto saturu. Cita starpā, izmantojot šo spraudni, jūs varat viegli īstenot informācijas bloku parādīšanu kā modālu logu.

• Atkarība: jQuery
• Pārlūkprogrammas atbalsts: IE7 +, Chrome, Firefox, Safari un Opera
• Licence: Un velns tikai zina)))

2. SwipeBox

Swipebox Ir jQuery spraudnis ar atbalstu skārienekrāni mobilās platformas. Papildus attēliem spraudnis atbalsta iegultos videoklipus no Youtube un Vimeo. Swipebox ir ļoti viegli pievienot jebkuram projektam, spraudnim ir vairākas intuitīvas iespējas, lai pielāgotu tā funkcionalitāti un uzvedību. Izstrādātāja vietnē ir detalizēta dokumentācija par spraudņa pievienošanu un izmantošanu, bez nevajadzīga ūdens, viss ir tikai gadījumā, tāpēc es domāju, ka nebūs grūti saprast, kas, kur un kāpēc.

• Atkarība: jQuery
• Pārlūkprogrammas atbalsts: IE9 +, Chrome, Safari, Firefox, Opera, IOS4 +, Android un Windows Phone
• Licence: Nav noteikts, varbūt jums paveiksies)))

3. MagnificPopup

Labi zināms un labi pierādīts gaismas kastes spraudnis, kura pamatā ir jQuery vai Zepto.js. Spraudņa autors ir Dmitrijs Semenovs, kurš ir PhotoSwipe spraudņa izstrādātājs, par kuru es runāšu tālāk. Tiek piegādāts kā jQuery / Zepto spraudnis, un tam ir uzlabotas funkcijas, kurām trūkst PhotoSwipe, piemēram, video atbalsts, karšu un Ajax satura attēlošana, kā arī modālo logu ieviešana ar iekļautām formām. Pēc visiem kritērijiem tas ir vēl viens lielisks rīks tīmekļa izstrādātāja būrī. Atsevišķi ir WordPress spraudnis un detalizēta iestatīšanas un lietošanas dokumentācija. Vienīgais nomācošais ir dokumentācijas trūkums krievu valodā, spriežot pēc vārda un uzvārda, šķiet, ka autors ir krievs, nekad nav sapratis šī kaitīguma dēļ vai iedomātas savas gudrības apziņas dēļ, bet bla. Nu, labi, kam tas jāizdomā, arī mēs neesam mīksti vārīta tēja))).

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

4. PhotoSwipe

• Atkarība: Javascript vai jQuery
• Pārlūkprogrammas atbalsts
• Licence: MIT licence

11. FeatherLight

6 bitu gaismas kastes spraudnis vairāk vai mazāk gudriem izstrādātājiem, kas aprīkots ar visām nepieciešamākajām funkcijām. Papildus visu izplatīto satura veidu (teksta, attēlu, iframe, Ajax) atbalstam ir iespēja pievienot papildu, un jūs varat arī izstrādāt savu paplašinājumu šim spraudnim, kas pilnībā apmierinās jūsu vajadzības, veidojot jaunu projekts. Kā darbojas visa šī ekonomika (paplašinājuma izstrāde), es tajā īsti neiedziļinājos, bet tie, kurus šis spraudnis ievietos, es domāju, ka viņi to izdomās))).

• Atkarība: jQuery
• Pārlūkprogrammas atbalsts: IE8 +, Chrome, Firefox, Safari un Opera
• Licence: MIT licence

12. Gaismas galerija

Gaismas galerija- daudzfunkcionāls gaismas kastes spraudnis ar daudziem papildu iespējas... Nāk ar vairāk nekā 20 iespējām, lai pielāgotu mazākās Lightbox detaļas. Ir viss, labi, vai gandrīz viss)). Pilnīga attēlu galerija ar glīti sakārtotiem sīktēliem, navigācijas vadības ierīcēm un sīktēlu ritināšanu. Vienkāršs HTML marķējums kā nesakārtots saraksts

izmantojot atribūtu data-src pilna izmēra attēliem. Tas pats ir ar video no Youtube un Vimeo. Lieliski atbalsta visus video formātus HTML5, MP4, WebM, Ogg ... Animēti sīktēli, atsaucīgs izkārtojums ar atbalstu mobilajām ierīcēm, slaidu efekti un vienmērīgas izskata pārejas, pārslēdzot attēlus un citu saturu. Izskatu un sajūtu ir viegli veidot un pielāgot, izmantojot CSS. Attēlu iepriekšēja ielāde un koda optimizācija. Navigācija, izmantojot darbvirsmas tastatūru, kā arī iespēja izmantot papildu fontu ikonas. Gaismas galerija- šeit ir īstais "kombains", galvenais ir nepazust šī spraudņa iestatījumu pārpilnībā un plašajās iespējās.
Tiem, kam nepieciešams pienācīgs slīdnis, iesaku pievērst uzmanību tiem pašiem izstrādātājiem.
• Atkarība: jQuery
• Pārlūkprogrammas atbalsts: IE7 +, Chrome, Firefox, Safari, Opera, iOS, Android un Windows Phone
• Licence: MIT licence



13. StripJS

Neparasti, es pat teiktu: neparasta gaismas kastes ieviešana, precīzāk, ne visai pazīstama satura prezentācija, kad labajā pusē parādās attēls vai videoklips gaismas kastes dizainā, kas aizpilda nevis visu ekrānu, bet tikai uz iepriekš iestatīts izmērs pilna izmēra attēls vai video. Lielos ekrānos šī pieeja ir saprotama, joprojām pastāv iespēja mijiedarboties ar lapu. Mazajos mobilo ierīču ekrānos viss šis novatoriskais dizains iekļaujas klasiskajā gaismas kastē. Ideja interesanta, noskaties demo, varbūt kāds ieliks šādu radošo.

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



14. Gaismas slānis

Viegli lietojams gaismas kastes spraudnis, kas labi sader ar jebkuru projektu un labi izskatās arī uz jebkura ekrāna. LightLayer spraudnis nodrošina kontroli pār daudziem iestatījumiem, piemēram, fona krāsas maiņu un tā caurspīdīguma pakāpi, bāzes bloka stāvokli, pārejas efektu izvēli atverot / aizverot, funkcijas, ar kurām lietotāji var manipulēt paši. Spraudnis lieliski darbojas ar ārēju vietnes saturu, iegultiem video atskaņotājiem un kartēm.

• Atkarība: jQuery
• Pārlūkprogrammas atbalsts: IE9 +, Chrome, Firefox, Safari un Opera
• Licence: MIT licence



15. FluidBox

Fluidbox ir gaismas kastes spraudnis tikai attēliem. Iespējamo variāciju skaits attēlu noformējumā ir patiesi iespaidīgs. Spraudnis lieliski darbojas ar dažādu dizainu attēliem, ieskaitot peldošus attēlus, attēlus ar absolūtu pozicionēšanu, attēlus un fotoattēlus, kas ir ierāmēti un atkāpti, ar atsevišķiem attēliem un apvienoti galerijā. Kopumā ir veltīgi ieliet ūdeni, joprojām nedarbosies, lai īsā prezentācijā aprakstītu visas spraudņa iespējas, tāpēc labāk skatieties demonstrāciju, pagrieziet, pagrieziet, un es domāju, ka šis spraudnis daudziem patiks.

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



Tas laikam viss! Es ceru, ka šis īsais pārskats palīdzēs jums saprast piedāvāto tīmekļa izstrādes produktu kaudzi. Es vēlos atzīmēt, ka tālu no visiem kolekcijā esošajiem spraudņiem, kurus izmantoju darba projektos, lielāko daļu pārbaudīju testēšanas vietnēs vai uz lakas, tādēļ, ja rodas kādi jautājumi, mēs, visticamāk, tos atrisināsim kopā, bet kopā , kā vienmēr mums izdosies.

Vai jūs meklējat piemērotu krievu veidni saviem mērķiem? Šajā gadījumā jums, iespējams, vajadzētu apmeklēt TemplateMonster tirgu. Tā vienkāršā iemesla dēļ, ka nesen vietnē parādījās jauna veidņu sadaļa. Tagad katrs lietotājs var iepazīties ar kolekciju, kas tiks atjaunināta un atjaunināta. Veidņu teksti tika rakstīti ar roku. Bet tas nav vienīgais šo gatavo risinājumu pluss. Patiešām, to iepakojumos jūs varat atrast visu, kas atvieglos darbu pie tiešsaistes projekta izstrādes, ieskaitot vizuālo redaktoru.

Visu cieņu, Endrjū

Divi atsevišķi attēli



Četru attēlu komplekts



Darba sākšana

Lejupielādējiet jaunākā laidiena (vai jebkura iepriekšējā) ZIP failu no Github laidienu lapas.

Vai arī instalējiet, izmantojot npm:

Npm instalēt lightbox2 -saglabāt

Atveriet zip failu un palūkojieties uz basiem kauliem, darba piemērs, kas ir iekļauts mapē / piemēri.

1. Vai esat gatavs iestatīt Lightbox savā lapā? Sāciet, iekļaujot Lightbox CSS un Javascript. Abus šos failus varat paņemt no / dist mapes.

   • Iekļaujiet CSS lapas augšpusē atzīme:
   • Pirms aizvēršanas lapas apakšā iekļaujiet Javascript atzīme:

2. Pārliecinieties, vai ir ielādēts arī Lightbox nepieciešamais jQuery.

   • Ja savā lapā jau izmantojat jQuery, pārliecinieties, vai tas ir ielādēts pirms lightbox.js. jQuery 1.7 vai jaunāka versija ir nepieciešama.
   • Ja pašlaik neizmantojat jQuery, esmu izveidojis iepakotu failu, kurā ir gan Lightbox, gan jQuery. Lightbox.js vietā iekļaujiet dist / js / lightbox-plus-jquery.js.
3. Pārliecinieties, vai četri lightbox.css ielādētie attēli atrodas pareizajā vietā. Jūs varat paņemt attēlus no / dist / images mapes.

Inicializēt ar HTML

• Atsevišķi attēli. Pievienojiet datu gaismas kastes atribūtu jebkurai attēla saitei, lai iespējotu Lightbox. Atribūta vērtībai katram attēlam izmantojiet unikālu nosaukumu. Piemēram: Neobligāti:
  • Ja vēlaties parādīt parakstu, pievienojiet atribūtu data-title.
  • Pievienojiet atribūtu data-alt, ja vēlaties iestatīt saistītā attēla alt atribūtu.
• Attēlu komplekti. Ja jums ir saistītu attēlu grupa, kuru vēlaties apvienot komplektā, visiem attēliem izmantojiet to pašu datu gaismas kastes atribūta vērtību. Piemēram:

Iespējas

Ja vēlaties mainīt kādu no noklusējuma opcijām, izsauciet opcijas metodi.

Iespēja	Noklusējuma	Apraksts
vienmērShowNavOnTouchDevices	nepatiesa	Ja tā ir, kreisās un labās puses navigācijas bultiņas, kas parādās, virzot peles kursoru, skatoties attēlu kopas, vienmēr būs redzamas ierīcēs, kas atbalsta pieskārienu.
albumsLabel	"Attēls% 1 no% 2"	Teksts, kas tiek parādīts zem paraksta, skatot attēlu kopu. Noklusējuma teksts parāda pašreizējo attēla numuru un kopējo attēlu skaitu komplektā.
disableScrolling	nepatiesa	Ja tā ir taisnība, neļaujiet lapai ritināt, kamēr Lightbox ir atvērts. Tas darbojas ar iestatījumu pārplūdi, kas paslēpta uz ķermeņa.
fadeDuration	600	Laiks, kas nepieciešams, lai Lightbox konteiners un pārklājums izzustu un izzustu milisekundēs.
fitImagesInViewport	taisnība	Ja tā ir taisnība, mainiet to attēlu izmērus, kas sniedzas ārpus skatu punkta, lai tie labi ietilptu tajā. Tas neļauj lietotājam ritināt, lai redzētu visu attēlu.
imageFadeDuration	600	Laiks, kas nepieciešams attēla izbalēšanai pēc ielādes milisekundēs.
maxWidth		Ja iestatīts, attēla platums tiks ierobežots līdz šim skaitlim pikseļos. Malu attiecība netiks saglabāta.
maxHeight		Ja iestatīts, attēla augstums tiks ierobežots līdz šim skaitlim pikseļos. Malu attiecība netiks saglabāta.
positionFromTop	50	Attālums no skata punkta augšdaļas, kurā tiks parādīts Lightbox konteiners, pikseļos.
resizeDuration	700	Laiks, kas nepieciešams, lai Lightbox konteiners animētu platumu un augstumu, pārejot starp dažāda izmēra attēliem, milisekundēs.
showImageNumberLabel	taisnība	Ja tas ir nepatiess, teksts, kas norāda pašreizējo attēla numuru un kopējo attēlu skaitu (piem., "Attēls 2 no 4"), tiks paslēpts.
aptīt	nepatiesa	Ja tā ir taisnība, kad lietotājs sasniedz pēdējo kopas attēlu, parādīsies labā navigācijas bultiņa, un viņš turpinās virzīties uz priekšu, kas atgriezīsies pie kopas pirmā attēla.

Pārlūkprogrammas atbalsts

Lightbox2 ir veiksmīgi pārbaudīts šādās pārlūkprogrammās:

• Internet Explorer.
  Lightbox-plus-jquery.js failā ietilpst jQuery v2.x un tiek atbalstīta IE 9+. Ja vēlaties atbalstīt IE 6, 7 un 8, izmantojiet savu jQuery v1.x kopiju ar lightbox.js.
• Chrome
• Safari
• Firefox
• iOS Safari
• iOS pārlūks Chrome
• Android pārlūks
• Android pārlūks Chrome

Licence

• 100% bezmaksas. Lightbox var brīvi izmantot gan komerciālos, gan nekomerciālos darbos.
• Nepieciešams attiecinājums. Tas nozīmē, ka jums ir jāatstāj neskarts mans vārds, mana mājas lapas saite un informācija par licenci. Nevienam no šiem vienumiem nav jābūt vērstam uz lietotāju, un tie var palikt kodā.

Palīdzība

Vai jums ir jautājums par Lightbox izmantošanu?

Lai saņemtu palīdzību, veiciet tālāk norādītās darbības. Pārliecinieties, ka esat izlasījis šīs lapas dokumentāciju un vispirms apskatījis pievienoto piemēru.

1. Meklējiet Stackoverflow, lai redzētu, vai citi cilvēki nav saskārušies ar to pašu problēmu, kas jums rodas.
2. Ja jūsu problēma ir unikāla, ievietojiet jaunu jautājumu vietnē Stackoverflow. Izmantojiet tagu lightbox2.

Nelietojiet Github problēmas, lai ziņotu par personīga atbalsta pieprasījumiem.

Atradāt kļūdu?

Ja atrodat kļūdu, izpildiet norādījumus, kas sniegti ieguldījumu ģildēs, lai ziņotu par problēmu.

Skripts organizē attēlu skatīšanu uznirstošajā logā. Skatīšanu var organizēt, izmantojot vienu attēlu vai galeriju, ritinot attēlus uznirstošajā logā.
Vienkāršākais un ātrākais instalējamais skripts. Tas ir instalēts un konfigurēts tikai dažu minūšu laikā.

Kā instalēt gaismas kasti

Lejupielādējiet arhīvu, izpakojiet to un augšupielādējiet to serverī.
Pēc tam ieguliet skriptu savā vietnē. IN html kods lapas, kurās rakstāt kodu




Un pēdējais solis. Attēlu parādīšana.
Jūs veicat šādu attēlu izvadi


Standarta kods neliela attēla un saites uz lielu attēlu parādīšanai, saitei tiek pievienoti tikai divi parametri.
Šeit ir šī koda piemērs - noklikšķinot uz attēla, tiek parādīts liels attēls.

Parametrs ir atbildīgs par šo efektu data-lightbox = "attēls".
Ja lapā ir daudz attēlu, uznirstošajā logā varat atvērt attēlus, nepārvelkot tos, vai arī varat apvienot attēlus, un tie ritinās uznirstošajā logā.
Lai apvienotu attēlus, katrai attēlu grupai jāizmanto viens nosaukums.






Kā redzat, visus attēlus var ritināt uznirstošajā logā, jo datu gaismas kaste visiem ir vienādi.
Ja vēlaties sadalīt attēlus tā, lai tie neritinātu, izmantojiet līdzīgu kodu







Tagad katrs attēls tiek atvērts atsevišķi, tas ir, nav iespējas ritināt līdz nākamajam.

Kas ir jauninātajā versijā

Poga, lai palielinātu attēlu līdz reālajam izmēram. To var redzēt visos piemēros. IN oriģinālā versija viņa nav
Pašā skriptā ir iestatījums, jūs varat izslēgt šo pogu.

Un otrais papildinājums, kas vajadzīgs dažiem cilvēkiem, ir dublētu attēlu izslēgšana.
Pēc noklusējuma atspējots, varat to iespējot tieši skriptā, tajā pašā vietā, kur ir iespējota reālā izmēra poga.
Parastā skripta lietošanā šo funkciju nes tikai kaitējumu, to var izmantot tikai pilnīgi izmisušās situācijās.





Ņemiet vērā, ka trīs saites ir tukšas, tas nozīmē, ka tās ir saistītas ar lieliem attēliem, taču starp tagiem nav nekā, un viena saite ir aizpildīta ar attēlu.
Tā rezultātā pārlūkprogrammā ir redzams tikai viens attēls, uzklikšķinot uz tā, tiek atvērts liels attēls un visi attēli no neaizpildītajām saitēm tiek izvilkti un jūs varat ritināt.
Un paskatieties šeit, saitēs ir divas saites. identiskas bildes(iezīmēts sarkanā krāsā), un, ritinot, jūs redzēsit divus identiskus attēlus.
Ja konkrētā piemērā iespējosit dublikātu noņemšanu, attēlu dublēšanās nebūs.

Protams, šādai situācijai nevajadzētu pastāvēt, kāpēc parādīt divus identiskus attēlus un pēc tam tos izdzēst. Bet dīvainā kārtā es saskāros ar šādu situāciju - vienā interneta veikalā vajadzēja parādīt produkta dublikātus (bija sarežģīti fotoattēlu aizstājumi, izmantojot skriptus), un, skatoties caur gaismas kārbu, dublēti fotoattēli izskatījās ļoti nepareizi. Šeit noderēja dublikātu noņemšana.

Komentāri (1)

11.12.2014 Viktors
Skripts ir ļoti labs. Jūs pat varat aprakstīt attēlu, izmantojot datu nosaukumu. Bet man bija problēma, man bija skripts uz lapas, kas spieda bloku no sāniem, kad šis skripts tika savienots, tas pazūd no manis. Un tas pazūd, ja ir pievienoti js skripti. Es domāju, ka versijas dēļ nav konflikta, nevis viņu dēļ.

23.05.2015 Viktors
Man tas nedarbojas, kad
href = "http://ikk.secrieru.ru/products/Gallery/000039.jpg?ver=20150523142822"
izskatās šādi. Bez? Ver = 20150523142822
strādā

25.05.2015
liels paldies

29.06.2015 Andrejs
Liels paldies par jūsu darbu! Viss strādāja gandrīz pirmo reizi)

26.08.2015 Aleksandrs
izmēģināju dažādus analogus. bez konfliktiem šis kļuva uzreiz. palielināt līdz izcelsmei. lieluma zarnas, ja jūs joprojām izmantojat peli, lai uzņemtu un pārvietotu attēla lauku, parasti kapets

01/11/2015 Igors
Sveiki!
Lieliska galerija. Liels tev paldies.
Tikai tāds jautājums:
Iepriekš minētajā piemērā (3 attēli) attēli tiek parādīti cilpā. Un Lightbox-2.7.1 lejupielādētajā versijā šī funkcija nedarbojas. Skatoties pēdējo attēlu, poga tālāk nav redzama.
Vai varat, lūdzu, pateikt, kāds varētu būt iemesls?

14.11.2015 Antons


15.11.2015 Antons
IOS un Android ierīcēs ekrāna aptumšošana nenotiek visā lapā !!! kāda varētu būt problēma. Parastā LightBox - viss ir kārtībā!

15.11.2015 Antons
IOS un Android ierīcēs ekrāna aptumšošana nenotiek visā lapā !!! kāda varētu būt problēma. Parastā LightBox - viss ir kārtībā!

30.03.2016 Antons
Sveiki!
Vai ir iespējams atvērt attēlu augstākā izšķirtspējā?

18.11.2016. Yura
Liels paldies! Viss strādā perfekti!

05.04.2017 Igors
Liels paldies par scenāriju! Ilgu laiku es meklēju kaut ko līdzīgu un viegli uzstādāmu.
Tikai kāda iemesla dēļ zem fotogrāfijām parādās nesaprotami uzraksti Р˜Р · РѕР ± СѕР ° жение 8 РёР · 8

Varbūt kaut kur jums ir jālabo kodējums?

12.09.2017 Barsuk
Kur tu biji agrāk! Visu dienu pavadīju, mēģinot novērst dublikātu noņemšanu))

Man vienkārši ir mājas lapa galvenā attēla priekšskatījums, un tā apakšā ir vēl mazāk sīktēlu ar papildu attēliem, tāpēc arī galerijā bija dublikāti.

Patiešām lieliski, ka mums ir pieejamas arvien vairāk jaunāko tīmekļa tehnoloģiju, ar kuru palīdzību mūsu darbs kļūs daudz vieglāks. Modālie logi - funkcionāls elements lai parādītu jebkura veida HTML saturu, koncentrējoties uz lietotājam draudzīga dizaina un saskarnes izveidi.

Šajā apkopojumā mēs esam izveidojuši jQuery gaismas kastes bibliotēku un skriptu sarakstu, lai palīdzētu izstrādātājiem un dizaineriem izveidot vēl labākas un profesionālākas vietnes.

Jūs varat viegli pievienot zemāk esošos skriptus savai vietnei. Tāpēc bez liekas piepūles ķersimies pie šīs lietas un apskatīsim šīs super jQuery gaismas kastes, kuras varat pievienot savam arsenālam.

1. Fotografēšana

PhotoSwipe ir HTML fotoattēlu galerija Pamatojoties uz CSS un JavaScript, kas īpaši paredzēts mobilajām ierīcēm. Izstrādājot to, autori par paraugu izmantoja attēlu skatīšanas pakalpojumus mobilajām ierīcēm IOS un Google. PhotoSwipe ir pazīstams un intuitīvs skaidrs interfeiss, kas atvieglo darbu ar attēliem mobilajā vietnē.

Tiek atbalstītas visas galvenās funkcijas: pāreja uz nākamo vai iepriekšējo attēlu, tuvināšana, vilkšana, tālināšana vai aizvēršana un citas.

2. Swipebox

Swipebox ir jQuery spraudnis stacionārie datori, viedtālruņiem un planšetdatoriem. Tā atbalsta pieskāriena vadība mobilajām ierīcēm, tastatūras navigācija galddatoriem, CSS rezerves pārejas uz jQuery vadīklas, diezgan viegli iestatāmas.

Spraudnis ir pārbaudīts pārlūkprogrammās Chrome, Safari, Firefox, Opera, Internet Explorer 8+, iOS4 +, Android, Windows Phone. Izlaists saskaņā ar MIT licenci.

3. iLightbox

iLightBox ļauj viegli izveidot ļoti skaistu atsaucīgu modālie logi lietojot JQuery. Apvienojot plaša multivides satura klāsta atbalstu ar lielisku ādu un lietotājam draudzīgu API, iLightBox cenšas padarīt jūsu gaismas kasti pēc iespējas perfektāku. iLightBox nodrošina iespēju skatīt pilnekrāna režīms, Tīklenes saderīgas ādas, pieskārienu notikumu vadība, iespēja integrēt YouTube un Vimeo HTML5 video, spēcīga JavaScript API. Spraudnim ir bezmaksas atbalsts un versijas atjauninājumi.

4. Attēlu gaismas kaste

Image Lightbox ir minimālistisks, paplašināms un pielāgojams spraudnis IOS, Android un Windows Phone. Jūs varat vienkārši ielādēt nākamo attēlu ar tastatūru, pateicoties CSS pārveidojumu un pāreju izmantošanai.

5. Lielisks uznirstošais logs

Magnific Popup ir bezmaksas atsaucīga jQuery spraudnis, kura mērķis ir nodrošināt vislabāko iespējamo pieredzi starp lietotāju un ierīci. Lielākajai daļai gaismas kastes spraudņu jums ir jāizmēra logs, izmantojot JS. Lieliskajā uznirstošajā logā varat izmantot relatīvās vienības, piemēram, EM, vai mainīt gaismas kastes izmērus, izmantojot CSS multivides vaicājumus.

6. Nivo Lightbox

Nivo Lightbox ir elastīgs gaismas kastes spraudnis. Ir daudz iespēju, ar kurām jūs varat viegli mainīt gaismas kastes izskatu. Piemēram, mainiet motīvu, pārejas efektu un navigācijas metodi.

7. Lightcase

Lightcase ir elastīgs, atsaucīgs un paplašināms gaismas kastes spraudnis, kas izstrādāts kopā ar izmantojot jQuery... Tas lieliski darbojas visās populārajās pārlūkprogrammās, piemēram, Internet Explorer 7+, Firefox, Opera, Webkit un citās. Spraudnis atbalsta fotoattēlu, video, HTML5 video, Iframe, SWF un AJAX zvanus.

8. Gaismaslānis.js

LightLayer ir skripts adaptīvu gaismas kārbu parādīšanai, tas labi darbojas ar citiem komponentiem jebkurā ekrānā. Šis skripts patiešām ir ļoti ērti lietojams. LightLayer nodrošina kontroli pār daudziem parametriem: fona krāsu un necaurredzamību, gaismas kastes pozīciju, atvēršanas / aizvēršanas pārejām un daudzām citām pielāgojamām funkcijām.

9. Strip.js

Strip ir gaismas kārba, kas izvēršas tikai uz lapas daļu. Tas padara to mazāk uzbāzīgu un ļauj mijiedarboties ar citiem lapas elementiem lielos ekrānos; mobilajās ierīcēs gaismas kastē ir klasisks izskats. Strip izmanto jQuery un tiek atbalstīts visās lielākajās pārlūkprogrammās.

10. Fluidbox

Fluidbox ir jQuery spraudnis, kas paredzēts, lai nodrošinātu neuzkrītošu, atsaucīgu gaismas kasti, kas ir lieliski piemērota augstas izšķirtspējas attēliem. Tas lieliski darbojas mobilajās ierīcēs, un to var lietot arī ekrānos ar vairākām ierīcēm augstas izšķirtspējas skaistam attēlu attēlojumam.

11. Spalvu gaisma

Featherlight ir ļoti viegls spraudnis 400 JavaScript virknes , 100 CSS līnijas un mazāk par 6Kb. Gudra, atsaucīga gaismas kaste, pēc noklusējuma atbalsta attēlus, AJAX un iframe. Varat arī pielāgot to savām vajadzībām. Featherlight darbojas IE8 +, visi mūsdienu pārlūkprogrammas un mobilajām platformām.

12. Yalb

Yalb apzīmē citu Lightbox ( Vēl viens Lightbox) - bet tā nav. Yalb ir aprīkots ar lielu saskarņu komplektu, ieskaitot pielāgotus notikumus, kas ļauj noteikt tā stāvokli ( atvērts, aizvērts).