საპასუხო ლაითბოქსის გალერეა. ვებ დიზაინი და საძიებო სისტემის ოპტიმიზაცია

ლაითბოქსი არის jQuery დანამატი, რომელიც გამოიყენება გამოსახულების ან ნებისმიერი სხვა შინაარსის საჩვენებლად სპეციალურად შექმნილ ფანჯარაში, რომელიც ჩვეულებრივ ნაჩვენებია გამჭვირვალე დაჩრდილულ ფონზე, მთავარი გვერდის შინაარსის თავზე.

მოდულის გვერდზე დაყენებამდე და მის დაყენებამდე, მოდით გადავხედოთ მაგალითებს:

დაწყება Lightbox-ით

ჩამოტვირთეთ მოდულის უახლესი ვერსია (ასევე ხელმისაწვდომია Bower-ის საშუალებით: bower install lightbox2 --save). ამის შემდეგ გახსენით zip ფაილი და გადახედეთ საქაღალდეში მდებარე ამოღებულ სამუშაო მაგალითს მაგალითები.

მზად ხართ დააინსტალიროთ Lightbox თქვენს გვერდზე? დაიწყეთ CSS-ისა და Javascript-ის შეერთებით. თქვენ შეგიძლიათ ამ ორივე ფაილის აღება საქაღალდიდან დისტანცია. ჩასვით შემდეგი კოდი თქვენს ვებ გვერდზე სათაურ ტეგებს შორის

ჩასვით შემდეგი კოდი, რომელიც აკავშირებს დანამატს სხეულის დახურვის ტეგამდე:

დარწმუნდით, რომ jQuery, რომელსაც Lightbox მოითხოვს, ასევე დატვირთულია. თუ თქვენ უკვე იყენებთ JQuery-ს (საჭიროა JQuery 1.7 ან უფრო მაღალი) გვერდზე, დარწმუნდით, რომ ის იტვირთება მანამდე. lightbox.js. თუ არ გაქვთ jQuery ჩართული, გამოიყენეთ dist/js/lightbox-plus-jquery.js, რომელსაც უკვე აქვს ეს ბიბლიოთეკა, ან ჩამოტვირთეთ უახლესი ვერსია. საიტი. დარწმუნდით, რომ ჩამოთვლილი ოთხი სურათი lightbox.cssმდებარეობა მითითებულ ადგილას. შეგიძლიათ სურათების გადაღება საქაღალდედან /დისტ/გამოსახულებები.

ახლა მოდით გადავიდეთ HTML კოდზე. დაამატეთ data-lightbox ატრიბუტი ბმულზე, რომელიც შეიცავს სურათებს, რომლებზეც გვინდა გამოვიყენოთ ჩვენი დანამატი. ატრიბუტის მნიშვნელობისთვის გამოიყენეთ სახელი, რომელიც უნიკალურია თითოეული სურათისთვის. Მაგალითად:

სურათი #1

დაამატეთ მონაცემთა სათაურის ატრიბუტი, თუ გსურთ სათაურის ჩვენება. თუ თქვენ გაქვთ დაკავშირებული სურათების ჯგუფი, რომელთა გაერთიანება გსურთ ნაკრებში, გამოიყენეთ იგივე მნიშვნელობა data-lightbox ატრიბუტში საჭირო სურათებისთვის. Მაგალითად:

Img 2 Img 3 Img 4

ლაითბოქსის პარამეტრები

თუ გსურთ შეცვალოთ რომელიმე ნაგულისხმევი ვარიანტი, გამოიძახეთ ვარიანტი: მეთოდი.

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

ყოველთვისShowNavOnTouchDevices ნაგულისხმევი: false
თუ მართალია, შემდეგ მარცხენა და მარჯვენა ნავიგაციის ისრები, რომლებიც გამოჩნდება მაუსის გადატანაზე სურათების ნაკრების ნახვისას, ყოველთვის ხილული იქნება შეხებით ჩართულ მოწყობილობებზე
fade ხანგრძლივობა ნაგულისხმევი: 500
დრო სჭირდება კონტეინერის გაქრობას, მილიწამებში.
fitImagesInViewport ნაგულისხმევი: true
თუ მართალია, შემდეგ პროპორციულად შეამცირეთ სურათის ზომა ისე, რომ სურათი მოერგოს სანახავ ზონას. ეს იხსნის მომხმარებელს მთელი სურათის სანახავად გადახვევისგან.
მაქსიმალური სიგანე
თუ დაყენებულია, სურათის სიმაღლე შემოიფარგლება ამ მნიშვნელობით (პიქსელებში). ასპექტის თანაფარდობა არ იქნება დაცული.
მაქსიმალური სიმაღლე
თუ დაყენებულია, სურათის სიგანე შემოიფარგლება ამ მნიშვნელობით (პიქსელებში). ასპექტის თანაფარდობა არ იქნება დაცული.
პოზიცია ზემოდან ნაგულისხმევი: 50
მანძილი ხედის ზემოდან Lightbox-ის კონტეინერამდე (პიქსელებში).
ზომის შეცვლა ნაგულისხმევი ხანგრძლივობა: 700
დრო, რომლის დროსაც ლაითბოქსის კონტეინერი შეიცვლება მისი სიგანე და სიმაღლე სურათების შეცვლისას სხვადასხვა ზომის(მილიწამებში).
showImageNumberLabel ნაგულისხმევი: true
თუ ყალბი, ტექსტში მითითებული იქნება სურათის მიმდინარე ნომერი და სურათების მთლიანი რაოდენობა კომპლექტში, მაგალითად: "სურათი 2 / 4".
wrapAround ნაგულისხმევი: false
თუ მართალია, მაშინ როდესაც ბოლო სურათი გამოჩნდება, შემდეგი სურათის ჩვენების ღილაკი არ ქრება. მასზე დაჭერით გამოჩნდება პირველი სურათი.

სკრიპტი აწყობს გამოსახულების ყურებას pop-up ფანჯარაში. ნახვის ორგანიზება შესაძლებელია ერთი სურათით ან გალერეით, ამომხტარ ფანჯარაში სურათების გადახვევით.
ინსტალაციის უმარტივესი და სწრაფი სკრიპტი. ინსტალაცია და კონფიგურაცია ხდება რამდენიმე წუთში.

როგორ დავაყენოთ ლაითბოქსი ჩამოტვირთეთ არქივი, ამოალაგეთ და ატვირთეთ სერვერზე.
შემდეგი, ჩადეთ სკრიპტი თქვენს ვებსაიტზე. IN html კოდიდაწერეთ კოდი გვერდზე

და ბოლო ნაბიჯი. სურათების გამოტანა.
თქვენ აწარმოებთ სურათებს შემდეგნაირად:

სტანდარტული კოდი პატარა სურათის ჩვენების და დიდი სურათის ბმული, ბმულს მხოლოდ ორი პარამეტრი ემატება.
აი ამ კოდის მაგალითი - სურათზე დაწკაპუნებისას ჩნდება დიდი სურათი.

ამ ეფექტზე პასუხისმგებელია data-lightbox="image" პარამეტრი.
თუ თქვენ გაქვთ ბევრი სურათი გვერდზე, შეგიძლიათ გახსნათ სურათები გადახვევის გარეშე ამომხტარ ფანჯარაში, ან შეგიძლიათ დააკავშიროთ სურათები და ისინი გადაინაცვლებენ ამომხტარ ფანჯარაში.
სურათების გაერთიანებისთვის, თქვენ უნდა გამოიყენოთ ერთი სახელი სურათების თითოეული ჯგუფისთვის

როგორც ხედავთ, ყველა სურათის გადახვევა შესაძლებელია pop-up ფანჯარაში, რადგან მონაცემთა ლაითბოქსი ყველასთვის ერთნაირია.
თუ გსურთ სურათების განცალკევება ისე, რომ ისინი არ გადაადგილდნენ, გამოიყენეთ მსგავსი კოდი

ახლა თითოეული სურათი იხსნება ცალ-ცალკე, ანუ არ არის გზა გადახვევა შემდეგზე.

რა არის მოდერნიზებულ ვერსიაში ღილაკი გამოსახულების რეალურ ზომამდე გასადიდებლად. თქვენ შეგიძლიათ ნახოთ ეს ყველა მაგალითში. ორიგინალ ვერსიაში არ არის
თავად სკრიპტში არის პარამეტრი, შეგიძლიათ გამორთოთ ეს ღილაკი.

და მეორე ცოტაა აუცილებელი დამატება, ეს არის დუბლიკატი სურათების გამორიცხვა.
ნაგულისხმევად გამორთულია, მაგრამ შეგიძლიათ ჩართოთ პირდაპირ სკრიპტში, იმავე ადგილას, სადაც ჩართულია რეალური ზომის ღილაკი.
სკრიპტის ნორმალურ გამოყენებაში ამ ფუნქციასმას მხოლოდ ზიანი მოაქვს, მისი გამოყენება მხოლოდ სრულიად უიმედო სიტუაციებშია შესაძლებელი.

გაითვალისწინეთ, რომ ბმულებიდან სამი ცარიელია, რაც ნიშნავს, რომ ისინი უკავშირდებიან დიდ სურათებს, მაგრამ ტეგებს შორის არაფერია და ერთი ბმული ივსება სურათით.
შედეგად, ბრაუზერში მხოლოდ ერთი სურათი ჩანს, როცა მასზე დაწკაპუნებთ, იხსნება უფრო დიდი სურათი და ცარიელი ლინკებიდან ყველა სურათი იშლება და შეგიძლიათ მასზე გადახვევა.
და ნახეთ აქ, ლინკებში არის ორი იდენტური სურათი (მონიშნულია წითლად) და როცა გადახვევთ, ნახავთ ორ იდენტურ სურათს.
თუ შიგნით კონკრეტული მაგალითითუ ჩართავთ დუბლიკატის წაშლას, არ იქნება დუბლიკატი სურათები.

რა თქმა უნდა, ეს სიტუაცია არ უნდა არსებობდეს, რატომ აჩვენოთ ორი იდენტური სურათი და შემდეგ წაშალოთ ისინი. მაგრამ უცნაურად შევხვდი ასეთ სიტუაციას: ერთ ონლაინ მაღაზიაში დუბლიკატი ფოტოები უნდა გამოჩენილიყო პროდუქტისთვის (ხდებოდა ფოტოების ჭკვიანური ჩანაცვლება სკრიპტების საშუალებით) და ლაითბოქსით დათვალიერებისას, დუბლიკატი ფოტოები ძალიან არასწორად გამოიყურებოდა. სწორედ აქ გამოდგება დუბლიკატების ამოღება.

კომენტარები

12/11/2014 ვიქტორ
სცენარი ძალიან კარგია. თქვენ შეგიძლიათ სურათის აღწერაც კი მონაცემთა სათაურის გამოყენებით. მაგრამ პრობლემა მქონდა, გვერდზე მქონდა სკრიპტი, რომელიც დაკავშირებისას ბლოკს გვერდზე აყენებდა ამ სკრიპტისის ქრება ჩემგან. უფრო მეტიც, ის ქრება, თუ js სკრიპტები დაკავშირებულია. მეგონა, რომ ეს იყო კონფლიქტური ვერსიის გამო, მაგრამ არა მათ გამო.

05/23/2015 ვიქტორ
არ მუშაობს ჩემთვის როდის
href="http://ikk.secrieru.ru/products/Gallery/000039.jpg?ver=20150523142822"
ასე გამოიყურება. გარეშე?ver=20150523142822
მუშაობს

25.05.2015 კაჰა
დიდი მადლობა

29.06.2015 ანდრეი
დიდი მადლობა თქვენი მუშაობისთვის! ყველაფერი მუშაობდა თითქმის პირველად)

26.08.2015 ალექსანდრე
მე ვცადე სხვადასხვა ანალოგები. ეს მაშინვე გახდა კონფლიქტების გარეშე. ორიგინალის გაზრდა ზომა არის ნაწლავი

11/01/2015 იგორ
გამარჯობა!
დიდი გალერეა. Დიდი მადლობა.
მხოლოდ ეს კითხვა:
ზემოთ მოცემულ მაგალითში (3 სურათი), სურათები ნაჩვენებია ციკლში. მაგრამ lightbox-2.7.1-ის გადმოწერილ ვერსიაში ეს ფუნქცია არ მუშაობს. ბოლო სურათის ნახვისას ღილაკი აღარ ჩანს.
მითხარით, გთხოვთ, რა შეიძლება იყოს მიზეზი?

14.11.2015 ანტონ

15.11.2015 ანტონ
IOS-ზე და Android-ზე ეკრანის ჩაბნელება მთელ გვერდს არ ფარავს!!! რა შეიძლება იყოს პრობლემა. ჩვეულებრივ LightBox-ში - ყველაფერი წესრიგშია!

30.03.2016 ანტონ
გამარჯობა!
შესაძლებელია თუ არა სურათის უფრო მაღალი გარჩევადობის გახსნა?

18.11.2016 იურა
Დიდი მადლობა! ყველაფერი მუშაობს იდეალურად!

05/04/2017 იგორ
დიდი მადლობა სცენარისთვის! დიდი ხანია ვეძებ რამე მსგავსს და მარტივად დასაინსტალირებელს.
მხოლოდ რატომღაც ჩემი ფოტოების ქვეშ უცნაური წარწერები ჩნდება РР·РѕР±СЂР°Р¶РµРЅРёРµ 8 РеР· 8

იქნებ კოდირება უნდა შესწორდეს სადმე?

09.12.2017 ბარსუკ
სად იყავი აქამდე? მთელი დღე ვცდილობდი გამეგო, როგორ ამომეღო დუბლიკატები))

უბრალოდ მაქვს მთავარი გვერდიმთავარი სურათის გადახედვა, ხოლო ბოლოში არის დამატებითი სურათების კიდევ უფრო მცირე გადახედვები, ამის გამო იყო გალერეაში დუბლიკატები.

ლაითბოქსი არის JavaScript-ის პატარა ბიბლიოთეკა, რომელიც გამოიყენება დიდი სურათების სანახავად ამჟამინდელი გვერდი. მარტივი ინსტალაციაა და მუშაობს ყველაფერში თანამედროვე ბრაუზერები.

სკრიპტი საშუალებას გაძლევთ აჩვენოთ სურათები როგორც ცალკეული, ასევე ამომხტარი ფანჯრის შიგნით გადართვით.

Ინსტრუქცია გამოსაყენებლად.

ნაწილი I: ბიბლიოთეკის დაკავშირება.

1. ჩამოტვირთეთ და ამოშალეთ არქივი სკრიპტით აქედან

2. JS საქაღალდეში იპოვეთ ფაილები jquery-1.10.2.min.js და lightbox-2.6.min.js და დააკოპირეთ ისინი საქაღალდეში თქვენი სკრიპტებით თქვენს საიტზე.

3. დააკავშირეთ ეს სკრიპტები თქვენს გვერდზე შემდეგი ხაზების ჩაწერით ტეგებს შორის:

4. css საქაღალდეში იპოვეთ lightbox.css ფაილი და დააკოპირეთ იგი საქაღალდეში თქვენი სტილის ფაილებით.

5. დააკავშირეთ ეს ფაილი თქვენს გვერდზე ტეგებს შორის შემდეგი ხაზების დამატებით:

6. img საქაღალდიდან დააკოპირეთ შემდეგი ფაილები თქვენს სერვერზე საქაღალდეში თქვენი საიტის დიზაინის სურათებით: და next.png . ეს ფაილები გამოიყენება lightbox.css სტილის ფაილში. ნაგულისხმევად, სტილის ფაილი ეხება სურათებს, რომლებიც მდებარეობს img საქაღალდეში, რომელსაც აქვს იგივე მშობელი, როგორც css საქაღალდე. თუ თქვენი სურათების საქაღალდე და styles საქაღალდე არის სრულიად განსხვავებულ საქაღალდეებში, მაშინ უნდა შეცვალოთ ბილიკები სურათებისკენ lightbox.css ფაილში შესაბამისზე.

ნაწილი II: სურათების ჩასმა გვერდზე.

ეს სკრიპტი ამოქმედდება ბმულზე დაწკაპუნებისას. ბმული შეიძლება იყოს ტექსტი ან სურათი. იმისათვის, რომ სკრიპტს მიუთითოთ, რომელი ბმული უნდა დაამუშაოს, თქვენ უნდა დაამატოთ ბმულს data-lightbox ატრიბუტი და მიანიჭოთ მას რაიმე მნიშვნელობა.

ცალკეული სურათები.

ბმული ტექსტი 1 ბმული ტექსტი 2 ბმულის ტექსტი 3

* სათაურის ატრიბუტის შევსება შესაძლებელია სურვილისამებრ. თუ ის სავსეა, მისი შინაარსი გამოჩნდება ამომხტარი სურათის ქვეშ.

სურათების ჯგუფი.

ვთქვათ, თქვენ გაქვთ სურათების ჯგუფი და როდესაც დააწკაპუნებთ ერთ-ერთ ბმულზე, გსურთ შეძლოთ ამ ჯგუფის ყველა სურათის გადახვევა ამომხტარ ფანჯარაში, ამომხტარი ფანჯრის დახურვის გარეშე.

ბმული ტექსტი 1 ბმული ტექსტი 2 ბმულის ტექსტი 3

*ადრე იყენებდით rel="lightbox" ატრიბუტს LiteBox სკრიპტისთვის, ახლაც შეგიძლიათ მისი გამოყენება და ის იმუშავებს, მაგრამ სასურველია ახალი ატრიბუტების გამოყენება, რადგან ის უზრუნველყოფს უფრო გაფართოებულ შესაძლებლობებს.

როგორც ჩანს, ყველაფერი გაკეთდა, ყველაფერი უნდა იმუშაოს, მაგრამ:

თუ სურათების ჯგუფს შევქმნით, მაშინ ნახვისას, ნახატების ქვეშ ამომხტარ ფანჯარაში მითითებულია „სურათი 1 8-დან“? მინდა ვნახო მსგავსი რამ "სურათი 1 8-დან".

ამისათვის, მე-13 სტრიქონში lightbox-2.6.min.js ფაილში თქვენ უნდა შეცვალოთ ეს:

დააბრუნეთ "სურათი " + b + " of " + c

დააბრუნეთ "+c"-ის "+b +" გამოსახულება

დააბრუნეთ "სურათი " + b + " -დან " + c

დააბრუნეთ "სურათი " +b +"-დან " +c

ბოლო დროს, როცა ეს სკრიპტი გამოვიყენე, დამჭირდა მისი გამოყენება კარუსელის სკრიპტთან ერთად და შევნიშნე ერთი ხარვეზი.

ქვემოთ მოცემულია ხარვეზის აღწერა და მისი გამოსწორების გზები.

თუ გვერდზე გვაქვს სურათების 2 განსხვავებული ჯგუფი და მაგალითად პირველ ჯგუფში სურათებს აქვთ წარწერები (სათაურის ატრიბუტი ივსება), ხოლო მეორე ჯგუფში სათაურის ატრიბუტს აქვს ცარიელი მნიშვნელობები ან არ არის მითითებული ყველა, მაშინ სურათების აღწერის გარეშე ნახვისას (თუ ერთი სურათი მაინც გვაქვს ნანახი აღწერილობით), ჩვენ მაინც გამოვაჩენთ ბოლო ნანახი სურათის აღწერას. ანუ, სკრიპტი უარს ამბობს ამომხტარი ფანჯრის სათაურის გასუფთავებაზე, ის ცვლის მას ახლით, თუ ეს შესაძლებელია. როგორ გავასწორო?

Title ატრიბუტის გაუქმების შეცდომის გამოსასწორებლად, შეცვალეთ ტექსტი lightbox-2.6.min.js ფაილში 219 სტრიქონში:

if (tip.album.title !== "დაუზუსტებელი" amp;amp;amp;amp;amp;amp; this.album.title !== "") ( this.$lightbox.find(".lb-caption ").html(this.album.title).fadeIn("სწრაფი") )

თუ (ამ . ალბომის ტიპი [ეს. currentImageIndex] . სათაური! ==" განუსაზღვრელი" & amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; & amp; amp; amp; amp; amp ; ამ ;

ყველაზე პოპულარული ბიბლიოთეკაა Lightbox Javascript, რომელსაც ჩვენ მრავალი წელი ვიყენებთ დესკტოპებზე, მაგრამ არა მობილური პლატფორმებიოჰ.

წარმოგიდგენთ 14 Lightbox დანამატს მობილური პლატფორმების მხარდაჭერით.

PhotoSwipe

PhotoSwipe არის მსუბუქი, შეხებით ჩართული და რაც მთავარია მოდულური დანამატი, რომელიც საშუალებას გაძლევთ ამოიღოთ არასაჭირო ნაწილები, რომლებიც არ არის საჭირო. კარგად მუშაობს მობილური ბრაუზერები. თქვენ შეგიძლიათ შეცვალოთ სურათები თითის დარტყმით, თითქოს ეს იყო სტანდარტული აპლიკაცია, გლუვი გადასვლებით.

საჭირო ბიბლიოთეკები: არცერთი.
ბრაუზერის მხარდაჭერა: IE8+, Chrome, Firefox, Safari, Opera და სხვა მობილური ბრაუზერები.
ლიცენზია: MIT ლიცენზია

ბრწყინვალე ამომხტარი

Magnific Popup არის კიდევ ერთი ლაითბოქსის დანამატი, რომელიც შემუშავებულია იმავე ავტორის მიერ, როგორც PhotoSwipe, დიმიტრი სემენოვი. მოდული მოდის როგორც JQuery/Zepto მოდული და ასევე მოიცავს მხარდაჭერას, რომელსაც PhotoSwipe აკლია, როგორიცაა ვიდეო, რუკები და Ajax მხარდაჭერა. ეს არის შესანიშნავი ალტერნატივა მათთვის, ვისაც ურჩევნია მეტი ვარიანტი ჰქონდეს ხელზე.

საჭირო ბიბლიოთეკები: JQuery 1.9.1+ ან Zepto.js
ბრაუზერის მხარდაჭერა: IE7 (ნაწილობრივ), .
ლიცენზია: MIT ლიცენზია

SwipeBox

Swipebox არის JQuery მოდული, რომელსაც აქვს შეხების ჟესტების მხარდაჭერა მობილური პლატფორმებისთვის. ის ასევე მხარს უჭერს Youtube და Vimeo ვიდეოებს სურათების გარდა. Swipebox მარტივი ინსტალაციაა და აქვს რამდენიმე ვარიანტი მისი კონფიგურაციისთვის. მე ვფიქრობ, რომ Swipebox არის ზედმეტად გადატვირთული ლაითბოქსის მოდული მათთვის, ვინც არ იცის JavaScript.

ლაითბოქსი Bootstrap-ისთვის

თავდაპირველად, Lightbox მოდული არ შედის Bootstrap-ში. Lightbox for Bootstrap აფიქსირებს ამას. თუ იყენებთ Bootstrap-ს, რეკომენდებულია ამ ბიბლიოთეკის გამოყენება. მოდული კარგად ინტეგრირდება Bootstrap-თან.

საჭირო ბიბლიოთეკები: JQuery და Bootstrap მოდული
ბრაუზერის მხარდაჭერა: IE8+, Chrome, Firefox, Safari და Opera
ლიცენზია: GNU ლიცენზია

ნივო ლაითბოქსი

Nivo Lightbox არის უაღრესად კონფიგურირებადი ლაითბოქსი მოდული. სხვადასხვა ვარიანტები საშუალებას გაძლევთ შეცვალოთ გარეგნობა. მაგალითად: თემა, გარეგნობის ანიმაცია და ნავიგაციის ტიპი.

საჭირო ბიბლიოთეკები: JQuery
ბრაუზერის მხარდაჭერა:
ლიცენზია: MIT ლიცენზია

ImageLightbox

ImageLightbox არის მარტივი ლაითბოქსის დანამატი, რომელსაც არ აქვს რაიმე წვრილმანი. იგი გამოიყენება მხოლოდ გამოსახულების მიზნებისთვის, აქედან გამომდინარეობს სახელი. არც ვიდეო და არც სხვა ტიპები არ არის მხარდაჭერილი. ის ასევე არ საჭიროებს დამატებით HTML მარკირებას; ტეგი საკმარისია. ეს მოდული მარტივი გამოსაყენებელია.

საჭირო ბიბლიოთეკები: JQuery
ბრაუზერის მხარდაჭერა: IE9+, Chrome, Firefox, Safari და Opera
ლიცენზია: არ არის განსაზღვრული

მინი ლაითბოქსი

კიდევ ერთი ლაითბოქსის მოდული დანამატების გარეშე. ბიბლიოთეკა მხოლოდ 2 კილობაიტს იწონის და მუშაობს მხოლოდ სურათებით. ეს არის შესანიშნავი მოდული, თუ მხოლოდ ამისთვის ავითარებთ უახლესი ვერსიაბრაუზერი და არ არის საჭირო ვიდეოს ან სხვა ფორმატების მხარდაჭერა.

საჭირო ბიბლიოთეკები: არა
ბრაუზერის მხარდაჭერა: Internet Explorer 10+, Chrome, Firefox, Safari და Opera
ლიცენზია: MIT ლიცენზია

LightCase

Lightcase არის შესანიშნავი ლაითბოქსის მოდული. მხარს უჭერს რამდენიმე ტიპის ანიმაციას, როგორიცაა: fade, elastic, zoom და scrolling. გარდა ამისა, ის ასევე მხარს უჭერს სხვადასხვა ტიპის მედიას, მათ შორის Youtube Embed, HTML Video, SWF და შეყვანის ფორმები.

საჭირო ბიბლიოთეკები: JQuery
ბრაუზერის მხარდაჭერა: IE9+, Chrome, Firefox, Safari და Opera
ლიცენზია: GPL ლიცენზია

ბუმბულის შუქი

Featherlight არის ძირითადი დანამატი, რომელიც იწონის 6 კილობაიტს საზრიანი დეველოპერებისთვის და მოიცავს მხოლოდ აუცილებელ ელემენტებს. თუ თქვენ გჭირდებათ ლაითბოქსის ეფექტი, მაგალითად, სურათების ჯგუფისთვის გალერეაში, შეგიძლიათ ჩართოთ გალერეის გაფართოება. თქვენ ასევე შეგიძლიათ განავითაროთ თქვენი საკუთარი მოდულის გაფართოება თქვენს პროექტებში გამოსაყენებლად.

საჭირო ბიბლიოთეკები: JQuery
ბრაუზერის მხარდაჭერა: IE8+, Chrome, Firefox, Safari და Opera
ლიცენზია: MIT ლიცენზია

LightLayer

LightLayer არის მარტივი გამოსაყენებელი ლაითბოქსის მოდული. მოდული მხარს უჭერს ბევრ ვარიანტს, მორგებული Javascriptმეთოდები და მომხმარებლის მოვლენები. მოდული მუშაობს სურათებით, ვიდეოებით, რუქებით.

საჭირო ბიბლიოთეკები: JQuery
ბრაუზერის მხარდაჭერა: IE9+, Chrome, Firefox, Safari და Opera
ლიცენზია: MIT ლიცენზია

ლაით გალერეა

LightGallery, სხვა ლაითბოქსის დანამატი დიდი თანხაფუნქციები. იგი მოიცავს 20-ზე მეტ ვარიანტს ლაითბოქსის ეფექტების სხვადასხვა დეტალების მოსარგებად.

საჭირო ბიბლიოთეკები: JQuery
ბრაუზერის მხარდაჭერა: IE7+, Chrome, Firefox, Safari, Opera, IOS, Android და Windows Phone
ლიცენზია: MIT ლიცენზია

ფლუიდბოქსი

Fluidbox lightbox მოდული მუშაობს სურათებთან. მოიცავს სხვადასხვა დისპლეის მხარდაჭერას, მათ შორის მცურავი სურათების, აბსოლუტური პოზიციის გამოსახულებების, საზღვრებისა და ბალიშების მქონე სურათებს და გალერეებს. ასევე არის WordPress მოდული.

საჭირო ბიბლიოთეკები: JQuery
ბრაუზერის მხარდაჭერა: IE9+, Chrome, Firefox, Safari, Opera
ლიცენზია: MIT ლიცენზია

StripJS

StripJS არის უნიკალური ლაითბოქსი მოდული. გამოსახულების გადაფარვის ნაცვლად, ლაითბოქსის მოდული სურათთან ერთად სრიალებს გვერდიდან გვერდზე ისე, რომ გამოსახულება არ დაბლოკოს მთელი შინაარსი. StripJS მხარს უჭერს როგორც სურათებს, ასევე ვიდეოებს.

საჭირო ბიბლიოთეკები: JQuery
ბრაუზერის მხარდაჭერა: IE7+, Chrome, Firefox, Safari, Opera, IOS 5+ და Android 3+
ლიცენზია: Creative Commons BY-NC-ND 3.0 ლიცენზია

მართლაც ძალიან კარგია, რომ სულ უფრო მეტი უახლესი ვებ ტექნოლოგიებია ჩვენთვის ხელმისაწვდომი, რომელთა დახმარებით ჩვენი მუშაობა ბევრად გამარტივდება. მოდალური ფანჯრები არის ფუნქციური ელემენტი ნებისმიერი ტიპის HTML შინაარსის საჩვენებლად, რომელიც მიზნად ისახავს მოსახერხებელი დიზაინისა და ინტერფეისის შექმნას.

ამ მიმოხილვაში ჩვენ შევადგინეთ JQuery ბიბლიოთეკებისა და სკრიპტების სია ლაითბოქსების შესაქმნელად, რაც დაეხმარება დეველოპერებს და დიზაინერებს შექმნან კიდევ უფრო უკეთესი და პროფესიონალური ვებსაიტები.

თქვენ შეგიძლიათ მარტივად დაამატოთ ქვემოთ მოცემული სკრიპტები თქვენს ვებსაიტზე. ასე რომ, ყოველგვარი შეფერხების გარეშე, მოდით გადავიდეთ აზრზე და გადავხედოთ ამ სუპერ jQuery lightbox ბიბლიოთეკებს, რომლებიც შეგიძლიათ დაამატოთ თქვენს არსენალში.

1.Photoswipe

PhotoSwipe არის HTML ფოტო გალერეა CSS დაფუძნებულიდა JavaScript, რომელიც მიმართულია კონკრეტულად მობილურ მოწყობილობებზე. მისი შემუშავებისას ავტორებმა მაგალითად აიღეს მობილური ტელეფონებისთვის გამოსახულების ნახვის სერვისები. iOS მოწყობილობებიდა Google. PhotoSwipe-ს აქვს ნაცნობი და ინტუიციური ინტერფეისი, რომელიც აადვილებს სურათებთან მუშაობას მობილურ საიტზე.

ყველა ძირითადი ფუნქცია მხარდაჭერილია: გადატანა შემდეგ ან წინა სურათზე, მასშტაბირება, გადათრევა, მასშტაბირება ან დახურვა და სხვა.

2. Swipebox

Swipebox – JQuery მოდული დესკტოპის კომპიუტერებისთვის, სმარტფონებისთვის და ტაბლეტებისთვის. მხარს უჭერს შეხების კონტროლიმობილური მოწყობილობებისთვის, კლავიატურის ნავიგაცია დესკტოპ მოწყობილობებისთვის, CSS გადასვლები JQuery-ის კონტროლებით, საკმაოდ მარტივი პერსონალიზაცია.

მოდული გამოცდილია Chrome, Safari, Firefox, Opera, Internet Explorer 8+, iOS4+, Android, Windows Phone-ზე. გამოშვებულია MIT ლიცენზიით.

3. iLightbox

iLightBox აადვილებს ძალიან ლამაზი რეაგირებადი მოდალური ფანჯრების შექმნას JQuery-ის გამოყენებით. მედიის შინაარსის ფართო სპექტრის მხარდაჭერით შესანიშნავ სკინებთან და მომხმარებლისთვის მოსახერხებელი API-სთან ერთად, iLightBox ცდილობს შექმნას ლაითბოქსი რაც შეიძლება სრულყოფილი. iLightBox იძლევა ნახვის შესაძლებლობას სრული ეკრანის რეჟიმი, Retina-თან თავსებადი სკინები, სენსორული ღონისძიებების მართვა, YouTube და Vimeo ინტეგრაცია HTML5 ვიდეოსთვის, ძლიერი JavaScript API. დანამატს აქვს უფასო მხარდაჭერადა ვერსიის განახლებები.

4. გამოსახულების ლაითბოქსი

Image Lightbox არის მინიმალისტური, გაფართოებადი და კონფიგურირებადი დანამატი iOS, Android და Windows Phone-ისთვის. თქვენ შეგიძლიათ უბრალოდ ჩატვირთოთ შემდეგი სურათი თქვენი კლავიატურის გამოყენებით CSS გარდაქმნებისა და გადასვლების გამოყენების წყალობით.

5. დიდებული ამომხტარი

Magnific Popup უფასოა საპასუხო jQueryმოდული, რომელიც ორიენტირებულია უზრუნველყოფაზე საუკეთესო ურთიერთქმედებამომხმარებელსა და მოწყობილობას შორის. ლაითბოქსის დანამატების უმეტესობა მოითხოვს ფანჯრის ზომის განსაზღვრას JS-ის გამოყენებით. Magnific Popup-ში შეგიძლიათ გამოიყენოთ შედარებითი ერთეულები, როგორიცაა EM ან შეცვალოთ ლაითბოქსის ზომა CSS მედია მოთხოვნების გამოყენებით.

6. Nivo Lightbox

Nivo Lightbox არის მოქნილი ლაითბოქსი მოდული. არჩევანის უამრავი ვარიანტია, რომლითაც მარტივად შეგიძლიათ შეცვალოთ ლაითბოქსის გარეგნობა. მაგალითად, შეცვალეთ თემა, გადასვლის ეფექტი და ნავიგაციის მეთოდი.

7.შუქურა

Lightcase არის მოქნილი, საპასუხო და გაფართოებადი ლაითბოქსის მოდული, რომელიც შემუშავებულია JQuery-ის გამოყენებით. ის იდეალურად მუშაობს ყველა პოპულარულ ბრაუზერში, როგორიცაა Internet Explorer 7+, Firefox, Opera, Webkit და სხვა. მოდული მხარს უჭერს ფოტო, ვიდეო, HTML5 ვიდეო, Iframe, SWF და AJAX ზარებს.

8. Lightlayer.js

LightLayer არის სკრიპტი ადაპტური ლაითბოქსების ჩვენებისთვის, ის კარგად მუშაობს სხვა კომპონენტებთან ერთად ნებისმიერ ეკრანზე. ეს სკრიპტი მართლაც ძალიან მარტივი გამოსაყენებელია. LightLayer უზრუნველყოფს კონტროლს ბევრ პარამეტრზე: ფონის ფერი და გამჭვირვალეობა, ლაითბოქსის პოზიცია, გახსნა/დახურვის გადასვლები და მრავალი სხვა კონფიგურირებადი ფუნქცია.

9. Strip.js

Strip არის ლაითბოქსი, რომელიც ფართოვდება მხოლოდ გვერდის ნაწილზე. ეს მას ნაკლებად ინტრუზიულს ხდის და საშუალებას აძლევს მას დაუკავშირდეს სხვა გვერდის ელემენტებს დიდი ეკრანები; on მობილური მოწყობილობებილაითბოქს აქვს კლასიკური სახე. Strip იყენებს JQuery-ს და მხარდაჭერილია ყველა მთავარ ბრაუზერში.

10. ფლუიდბოქსი

Fluidbox არის jQuery დანამატი, რომელიც შექმნილია უხილავი, საპასუხო შუქბოქსის უზრუნველსაყოფად, რომელიც იდეალურია სურათებით მაღალი გარჩევადობა. ის მშვენივრად მუშაობს მობილურ მოწყობილობებზე და ასევე შეიძლება გამოყენებულ იქნას უფრო მაღალი გარჩევადობის ეკრანებზე ლამაზი გამოსახულების გამოსატანად.

11. ბუმბული

Featherlight არის ძალიან მსუბუქი დანამატი 400 ხაზი JavaScript, 100 ხაზი CSS და 6Kb-ზე ნაკლები ზომით. ჭკვიანი, საპასუხო ლაითბოქსი, ნაგულისხმევად მხარს უჭერს სურათებს, AJAX-ს და iframe-ს. თქვენ ასევე შეგიძლიათ მოერგოთ თქვენს საჭიროებებს. Featherlight მუშაობს IE8+-ში, ყველა თანამედროვე ბრაუზერში და მობილურ პლატფორმაზე.

12. იალბ

Yalb ნიშნავს Yet Another Lightbox - მაგრამ ეს ასე არ არის. Yalb-ს გააჩნია ინტერფეისების დიდი ნაკრები, მათ შორის მორგებული მოვლენები, რომლებიც საშუალებას გაძლევთ განსაზღვროთ მისი მდგომარეობა (ღია, დახურული).