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

მე ვაძლევ თქვენს შემოსავალს 14 Lightbox Plugins მხარდაჭერა მობილური პლატფორმების.

Photoswipe.

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

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

ბრწყინვალე popup.

Magnific Popup - არის კიდევ ერთი მოსწონს მოდული, რომელიც შექმნილია იგივე ავტორი, როგორც Photoswipe, დიმიტრი სემენოვივი. მოდული მოდის jQuery / zepto მოდული, და ასევე მოიცავს მხარდაჭერას, რომელიც არ არის დაკარგული Photoswipe, როგორიცაა: ვიდეო მხარდაჭერა, ბარათები და აიაქსი. ეს არის შესანიშნავი ალტერნატივა მათთვის, ვინც ურჩევნია უფრო მეტი შესაძლებლობები ხელთ.

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

SWIPIPEBOX.

SwipeBox jQuery მოდული მხარდაჭერა სენსორული ჟესტების მობილური პლატფორმების. მან ასევე უჭერს მხარს YouTube- ს და Vimeo- სგან, გარდა სურათების გარდა. Swipebox არის მარტივი ინსტალაცია, და რამდენიმე ვარიანტი კონფიგურაცია მისი კონფიგურაცია. მე ვფიქრობ, რომ Swipebox არის ძალიან დაჭრილი Lightbox მოდული მათთვის, ვისაც არ აქვს JavaScript.

Lightbox for Bootstrap

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

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

Nivo Lightbox

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

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

ImageLightBox.

ImageLightBox მარტივი Lightbox მოდული გარეშე frills. იგი გამოიყენება მხოლოდ იმიჯისთვის, აქედან გამომდინარე სახელი. არც ვიდეო და არც სხვა სახის მხარდაჭერა არ არის მხარდაჭერილი. იგი ასევე არ საჭიროებს დამატებით HTML მარკს; ტაგ საკმარისია. ეს მოდული ადვილია მუშაობა.

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

მინი Lightbox

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

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

Lightcase.

Lightcase Beautiful Likebox მოდული. მხარს უჭერს რამდენიმე ანიმაციური სახეობა, როგორიცაა: ქრებოდა, ელასტიური, ზუმი და სენსორული. გარდა ამისა, იგი ასევე მხარს უჭერს სხვადასხვა ტიპის მედიას, მათ შორის YouTube Embed, HTML ვიდეო, SWF და შეყვანის ფორმები.

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

Featherlight.

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

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

Lightlayer.

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

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

Lightgallery.

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

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

სითხე

Fluidbox Likebox Plug-in ნამუშევრები სურათები. მოიცავს სხვადასხვა ჩვენების მხარდაჭერას, მათ შორის მცურავი გამოსახულებას, აბსოლუტურ პოზიციას, სურათებს საზღვრებსა და დეპოზიტებთან და გალერეებთან. ასევე არსებობს WordPress მოდული.

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

Stripjs.

Stripjs უნიკალური Likebox მოდული. გამოსახულების დაკისრების ნაცვლად, ASHBox Module სლაიდები ერთად გამოსახულების გვერდით, ისე, რომ გამოსახულება არ დაბლოკოს ყველა შინაარსს. Stripjs მხარს უჭერს ორივე სურათებს და ვიდეოს.

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

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

წარმოგიდგენთ კიდევ ერთი შერჩევა 15 ადაპტაციური jQuery plug-ins, რომელიც არის მეგობრები, როგორიცაა Desktop ბრაუზერები, და შეესაბამება სრულყოფილად ეკრანებზე სხვადასხვა მობილური მოწყობილობების (ლაპტოპები, სმარტფონებისათვის, ტაბლეტები და ა.შ.).

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

1. ilightbox

ilighbox - ეს არის სინათლის Lightbox- მოდული jQuery ერთად ფართო სპექტრი სხვადასხვა ტიპის ტიპები: სურათები, ვიდეო, Flash / SWF, Ajax შინაარსი, ჩარჩოები და ჩაშენებული ბარათები. ეს მოდული ასევე დასძენს სოციალური ქსელების ღილაკებს, რომელიც საშუალებას აძლევს მომხმარებლებს Facebook- ის მეშვეობით, Twitter- ის ან Reddit- ის საშუალებით. შესანიშნავი ფუნქცია ორგანიზაციის სანახაობრივი slideshows, გამოსახულება გალერეები და ვიდეო კლიპები, ნახულობს ჩვეულებრივი და სრულ ეკრანზე რეჟიმები.

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

• ნარკომანია: jQuery.
• მხარდაჭერა ბრაუზერები: IE7 +, Chrome, Firefox, Safari და Opera
• ნებართვა: და ჯოჯოხეთი იცის)))

2. SWIPIPEBOX.

SWIPIPEBOX. - ეს არის jQuery მოდული მხარდაჭერა მობილური პლატფორმა სენსორული ეკრანები. გარდა სურათების გარდა, მოდული მხარს უჭერს embedded ვიდეო YouTube და Vimeo. SwipeBox ძალიან მარტივია ნებისმიერი პროექტისთვის, მოდული აქვს რამდენიმე ინტუიციური ვარიანტი მისი ფუნქციონირების და ქცევის კონფიგურაციისთვის. დეველოპერის ვებ-გვერდზე, მოდულის დამაკავშირებელი და გამოყენების შესახებ დეტალური დოკუმენტაცია, ჭარბი წყლის გარეშე ყველაფერი მხოლოდ იმ შემთხვევაში, ასე რომ, ძნელი არ არის იმის გაგება, თუ სად, და რატომ, მე ვფიქრობ, რომ ეს არ იქნება რთული.

• ნარკომანია: jQuery.
• მხარდაჭერა ბრაუზერები: IE9 +, Chrome, Safari, Firefox, Opera, IOS4 +, Android და Windows Phone
• ნებართვა: მე არ განისაზღვრება, იქნებ გაუმართლა)))

3. MAGNIFICPOPUP.

დიდი ხნის განმავლობაში, კარგად ცნობილი და კარგად დადასტურებული მოსწონს jQuery ან zepto.js. მოდულის ავტორი - დიმიტრი სემენოვი, რომელიც არის დეველოპერი და მოდული photoswipe, რომელიც გითხრათ მხოლოდ ქვემოთ. მოდის სახით jQuery / zepto მოდული, აქვს მეტი შესაძლებლობები არ არსებობს photoswipe, როგორიცაა ვიდეო მხარდაჭერა, რუკების და Ajax შინაარსი, განხორციელების მოდალური ფანჯრები ჩაშენებული ფორმები. ყველა კრიტერიუმისთვის, ეს არის კიდევ ერთი შესანიშნავი ინსტრუმენტი ვებ დეველოპერი. ცალკე არსებობს მოდული WordPress და დეტალური დოკუმენტაცია setup და გამოყენება. რუსულ ენაზე მხოლოდ დოკუმენტაციის ნაკლებობა, სახელი და გვარი, ავტორი, როგორც ჩანს, რუსულია, არასდროს მიხვდა, რომ მავნე, ან მისი განცდა, და ბლაჰის წარმოსახვითი ცნობიერების გამო. კარგად, okay, ვისთვისაც უნდა შესწიროს, ჩვენ ასევე არ ჩაიძიროს ჩაი ძალიან)).

• ნარკომანია: jQuery 1.9.1+, ან zepto.js
• მხარდაჭერა ბრაუზერები: IE7 (ნაწილობრივ), IE8 +, Chrome, Firefox, Safari და Opera
• ნებართვა: MIT ლიცენზია

4. Photoswipe.

• ნარკომანია: Javascript ან jQuery
• მხარდაჭერა ბრაუზერები
• ნებართვა: MIT ლიცენზია

11. Featherlight.

6 K.Bit Lightbox- მოდული, მეტ-ნაკლებად საზრიანი დეველოპერებისთვის, აღჭურვილია ყველა საჭირო თვისებით. გარდა ამისა, ყველა საერთო შინაარსის ტიპების მხარდასაჭერად (ტექსტი, სურათები, iframe, ajax), არსებობს სურვილისამებრ კავშირი სურვილისამებრ, ისევე, როგორც თქვენ შეგიძლიათ განავითაროთ თქვენი გაფართოება ამ მოდულისთვის, რომელიც სრულად შეესაბამება თქვენს მოთხოვნებს ახალი პროექტის შექმნისას . ყველა ამ ეკონომიკის მსგავსად (გაფართოების განვითარება) მუშაობს, ეს არ იყო განსაკუთრებით მიზანმიმართული, მაგრამ ის, ვინც ამ მოდულის ჩასმა, მე ვფიქრობ))).

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

12. Lightgallery.

Lightgallery. - მრავალფუნქციური Likebox- მოდული მრავალჯერადი Დამატებითი ფუნქციები. მოდის 20-ზე მეტი ვარიანტი, რათა დააკონფიგურიროთ პატარა სინათლის დეტალები. არსებობს ყველაფერი, კარგად, ან თითქმის ყველაფერი). სურათების სრულფასოვანი გალერეა neatly აშენებული მინიატურების, ნავიგაციის ელემენტებით და მინიატურული სენსორებით. მარტივი HTML მარკირების სახით უწესრიგო სია

მონაცემთა SRC ატრიბუტი გამოყენებით სრული ზომის სურათები. იგივე ვიდეო YouTube და Vimeo. ეს ხელს უწყობს ყველა ვიდეო ფორმატს HTML5, MP4, Webm, Ogg ... ანიმაციური გამოსახულება, ადაპტური განლაგება მობილური მოწყობილობის მხარდაჭერით, სლაიდ ეფექტებით და გლუვი გამოჩენა, როდესაც გადართვის სურათები და სხვა შინაარსი. გამოჩენა ადვილად ჩამოყალიბდა და კონფიგურაცია cSS- ის გამოყენებით.. წინასწარი დატვირთვის სურათი და კოდი ოპტიმიზაცია. ნავიგაცია კლავიატურაზე, ისევე როგორც დამატებითი შრიფტის ხატების გამოყენების უნარი. Lightgallery. - ეს არის ის, სადაც ნამდვილი "კომბინირება", მთავარია, რომ არ დაიკარგოს პარამეტრების სიმრავლისა და ამ მოდულის ვრცელი შესაძლებლობები.
მათ, ვისაც ღირსეული სლაიდერი სჭირდება, ვურჩევ ყურადღებას იმავე დეველოპერებს.
• ნარკომანია: jQuery.
• მხარდაჭერა ბრაუზერები: IE7 +, Chrome, Firefox, Safari, Opera, iOS, Android და Windows Phone
• ნებართვა: MIT ლიცენზია



13. Stripjs.

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

• ნარკომანია: jQuery.
• მხარდაჭერა ბრაუზერები: IE7 +, Chrome, Firefox, Safari, Opera, iOS 5+ და Android 3+
• ნებართვა: Creative Commons By-NC-ND 3.0 ლიცენზია



14. Lightlayer.

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

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



15. Fluidbox

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

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



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

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

ყველა პატივისცემა, ენდრიუ

ორი ინდივიდუალური გამოსახულება



ოთხი გამოსახულება კომპლექტი.



Ვიწყებთ.

ჩამოტვირთეთ zip უახლესი გამოშვების (ან ნებისმიერი წინა) საწყისი Github რელიზები გვერდი.

ან დააყენოთ NPM- ის გამოყენებით:

NPM ინსტალაცია Lightbox2 - Save

გახსენით zip ფაილი და მიიღოს peek at barebones, სამუშაო მაგალითი, რომელიც შედის / მაგალითები საქაღალდეში.

1. მზად არის განათავსოთ Lightbox თქვენს გვერდზე? დაწყება, მათ შორის Lightbox CSS და JavaScript. თქვენ შეგიძლიათ დაიბრუნოთ ორივე ეს ფაილი / DIST საქაღალდეში.

   • ჩართეთ CSS თქვენს გვერდზე თქვენს გვერდზე საკვანძო:
   • ჩართეთ JavaScript ბოლოში თქვენი გვერდი დახურვის დაწყებამდე საკვანძო:

2. დარწმუნდით jQuery, რომელიც საჭიროა Lightbox, ასევე დატვირთული.

   • თუ თქვენ უკვე იყენებთ jQuery თქვენს დატვირთულ ადრე lightbox.js. JQuery 1.7 ან მეტია საჭირო.
   • თუ თქვენ არ იყენებთ JQuery- ს, მე "შევქმენით შეფუთული ფაილი tat მოიცავს როგორც Lightbox და JQuery. ჩართეთ DIST / JS / Lightbox-Plus-jquery.js ნაცვლად lightbox.js.
3. დაადასტურეთ, რომ Lightbox- ის მიერ დატვირთული ოთხი სურათი სწორ ადგილას არის. თქვენ შეგიძლიათ დაიბრუნოთ სურათები / დისკო / სურათები საქაღალდეში.

ინიციალიზაცია HTML.

• ერთი გამოსახულება. დაამატეთ მონაცემების Lightbox ატრიბუტი ნებისმიერი გამოსახულების ბმულზე, რათა Lightbox- ის ჩართვა. ატრიბუტის ღირებულებისთვის, გამოიყენეთ უნიკალური სახელი თითოეული გამოსახულებისთვის. Მაგალითად: სურვილისამებრ:
  • დაამატეთ მონაცემთა სათაური ატრიბუტი თუ გსურთ აჩვენოთ წარწერა.
  • დაამატეთ მონაცემთა ALT ატრიბუტი თუ გსურთ შექმნათ alt ატრიბუტი დაკავშირებული გამოსახულება.
• გამოსახულების კომპლექტი. თუ თქვენ გაქვთ ჯგუფის დაკავშირებული გამოსახულებები, რომ გსურთ დააკავშიროთ კომპლექტი, გამოიყენოთ იგივე მონაცემების Lightbox ატრიბუტი ღირებულება ყველა გამოსახულება. Მაგალითად:

Პარამეტრები.

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

არჩევა	ნაგულისხმევი.	აღწერა.
allownsownavontouchdevices.	ცრუ	თუ ჭეშმარიტი, მარცხენა და მარჯვენა ნავიგაციის ისრები, რომლებიც მაუსის საშუალებით გამოჩნდებიან, როდესაც სურათის კომპლექტში ჩანს, ყოველთვის ხილული იქნება მოწყობილობებზე, რომლებიც მხარს უჭერენ.
ალბუმლაბელი	"გამოსახულება% 1% 2"	ტექსტის ქვემოთ მოყვანილი ტექსტი გამოსახულების ნახვისას. ნაგულისხმევი ტექსტი გვიჩვენებს მიმდინარე სურათის ნომერს და სურათების საერთო რაოდენობას.
disablecrollling	ცრუ	თუ ჭეშმარიტი, თავიდან ასაცილებლად გვერდზე სენსორული ხოლო lightbox ღიაა. ეს მუშაობს სხეულზე დაფარული პარამეტრებით.
fadeduration.	600	დრო სჭირდება Lightbox კონტეინერის და overlay რომ ქრებოდა და გარეთ, milliseconds.
fitimagesinviewport	მართალია.	თუ ჭეშმარიტი, გამოსახულების ზომის შეცვლა, რომელიც ვრცელდება Viewport- ის გარეთ, ასე რომ, მას შიგნით მოხვდა. ეს ზოგავს მომხმარებელს, რომელსაც მთელი იმიჯის სანახავად გადასცემს.
imagefadeduration.	600	დრო სჭირდება იმიჯი ქრებოდა ერთხელ დატვირთული, milliseconds.
maxwidth.		თუ მითითებული, გამოსახულების სიგანე შემოიფარგლება ამ ნომერზე, პიქსელებში. ასპექტის თანაფარდობა არ შენარჩუნდება.
maxheight		თუ მითითებული, სურათის სიმაღლე შემოიფარგლება ამ ნომერზე, პიქსელებში. ასპექტის თანაფარდობა არ შენარჩუნდება.
positionfromtop.	50	მანძილი საწყისი Viewport, რომ Lightbox კონტეინერი გამოჩნდება, პიქსელებში.
რეზეზირება	700	დრო სჭირდება Lightbox კონტეინერისთვის, რათა მისი სიგანე და სიმაღლე, როდესაც სხვადასხვა ზომის გამოსახულებებს შორის გადასვლა, მილიწამებში.
showimagenumberlabel.	მართალია.	თუ ყალბი, ტექსტი, რომელიც მითითებულია ამჟამინდელი გამოსახულების ნომრისა და სურათების მთლიანი რაოდენობის მიხედვით (ex. Image 2 of 4) იქნება დამალული.
wraparled.	ცრუ	თუ ჭეშმარიტი, როდესაც მომხმარებელი აღწევს უკანასკნელ ისერს, გამოჩნდება და მარჯვენა სანავიგაციო arrow გამოჩნდება და იქნება გააგრძელოს წინსვლა, რომელიც მათ პირველ სურათს მიიღებს.

ბრაუზერის მხარდაჭერა

Lightbox2 უკვე გამოცდილია წარმატებით შემდეგ ბრაუზერებში:

• Internet Explorer.
  Lightbox-Plus-jquery.js ფაილი მოიცავს jQuery v2.x და მხარს უჭერს IE 9 +. თუ გსურთ მხარდაჭერა IE 6, 7 და 8, გამოიყენოთ თქვენი საკუთარი ასლი jQuery v1.x Lightbox.js.
• Chrome.
• Safari.
• Firefox.
• iOS Safari.
• iOS Chrome.
• Android ბრაუზერი.
• Android Chrome.

ლიცენზია.

• 100% უფასოა. Lightbox არის თავისუფალი გამოყენება როგორც კომერციულ და არაკომერციულ საქმიანობაში.
• Attribution მოთხოვნა.ეს იმას ნიშნავს, რომ თქვენ უნდა დატოვონ ჩემი სახელი, ჩემი მთავარი ბმული და ლიცენზიის ინფორმაცია ხელუხლებელი. არცერთი საკითხი არ უნდა იყოს მომხმარებლის წინაშე და შეიძლება დარჩეს კოდექსში.

დახმარება.

აქვს შეკითხვა იმის შესახებ, თუ როგორ გამოიყენოთ Lightbox?

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

1. ძებნა stackoverflow თუ oter ხალხს აწარმოებს იგივე საკითხი თქვენ მქონე.
2. თუ თქვენი საკითხი უნიკალურია, მაშინ ახალი შეკითხვა StackoverFlow- ზე. გამოიყენეთ Lightbox2 tag.

არ გამოიყენოთ GitHub- ის საკითხები პირადი დახმარების მოთხოვნის შესახებ.

იპოვა შეცდომა?

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

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

როგორ დააყენოთ Lightbox

ჩამოტვირთეთ არქივი, ამოღება სერვერი და ჩამოტვირთეთ სერვერი.
შემდეგი ჩაწერეთ სკრიპტი თქვენს საიტზე. -ში hTML კოდი გვერდები განსაზღვრავს კოდექსს




და ბოლო ნაბიჯი. გამოსახულების ჩვენება.
გამოსახულების გამომავალი ასეა


სტანდარტული გამომავალი კოდი მცირე სურათისთვის და ბმულზე დიდი სურათისთვის, მხოლოდ ორი პარამეტრი დაემატება ბმულს.
აქ არის მაგალითი ამ კოდექსის - როდესაც დაჭერით სურათზე pops up დიდი იმიჯი.

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






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







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

რა არის განახლებული ვერსია

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

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





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

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

კომენტარები

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

05/23/2015 ვიქტორ
მე არ ვმუშაობ
href \u003d "http://ikk.secrieru.ru/products/gallery/000039.jpg?ver\u003d20150523142822"
მას აქვს ასეთი სახის. გარეშე? Ver \u003d 20150523142822
სამუშაოება

05/25/2015 კახა.
Დიდი მადლობა.

06/29/2015 ანდრეი
ბევრი მადლობა თქვენი სამუშაო! ყველაფერი თითქმის პირველად მიიღო)

08/26/2015 ალექსანდრე
მე შევეცადე სხვადასხვა ანალოგი. კონფლიქტის გარეშე, ეს მაშინვე გახდა. წარმოშობის გაზრდა. ზომა gut. თუ ჯერ კიდევ მაუსი მიიღოს და გადაადგილება საველე სურათები - ზოგადად kapets

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

11/14/2015 Anton


11/15/2015 Anton
On iOS და Android Darkening ეკრანზე არ მთელი გვერდი !!! რა შეიძლება იყოს პრობლემა. ჩვეულებრივ მსგავსად - ყველაფერი კარგად არის!

11/15/2015 Anton
On iOS და Android Darkening ეკრანზე არ მთელი გვერდი !!! რა შეიძლება იყოს პრობლემა. ჩვეულებრივ მსგავსად - ყველაფერი კარგად არის!

03/30/2016 Anton
გამარჯობა!
შესაძლებელია თუ არა ის, რომ სურათმა გაიხსნა მეტი რეზოლუცია?

11/18/2016 იურა
Დიდი მადლობა! ყველაფერი კარგად მუშაობს!

05/04/2017 იგორ
დიდი მადლობა სცენაზე! ძალიან დიდი ხნის წინ, მე ვეძებდი რაღაც მსგავსი და ადვილად დამონტაჟებული.
მხოლოდ რაიმე მიზეზით, მე გაურკვეველი წარწერები გამოჩნდება სურათებში. · РРР± ± сђр · 8

იქნებ სადმე თქვენ უნდა დააფიქსიროთ კოდირება?

09/12/2017 ბარსუკი.
სად იყავი ადრე! მთელი დღის განმავლობაში გავატარე ორმაგი მოხსნა)

მე უბრალოდ მაქვს Მთავარი გვერდი მთავარი იმიჯის prejugance და ის არის ბოლოში, არსებობს კიდევ უფრო ნაკლებია, ვიდრე prevail დამატებითი, რადგან ამ, Duplicas გალერეა და გალერეაში.

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

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

თქვენ შეგიძლიათ მარტივად დაამატოთ სკრიპტები თქვენს საიტზე. აქედან გამომდინარე, შემდგომი prefaces, მოდით წავიდეთ თემას და განიხილოს ეს სუპერ jQuery-boblisters of likebox, რომელიც შეგიძლიათ შეავსონ თქვენი არსენალი.

1. Photoswipe.

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

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

2. SWIPIPEBOX.

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

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

3. ilightbox.

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

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

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

5. შესანიშნავი popup.

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

6. Nivo Lightbox

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

7. Lightcase.

Lightcase არის მოქნილი, ადაპტური და გაფართოებული Lightbox -plagin, რომელიც განკუთვნილია jQuery. იგი მუშაობს ყველა პოპულარულ ბრაუზერში, როგორიცაა Internet Explorer 7+, Firefox, Opera, WebKit და სხვა. მოდული მხარს უჭერს ფოტო, ვიდეო, HTML5-Video, iFrame, SWF და Ajax.

8. Lightlayer.js.

Lightlayer არის სკრიპტი outputting ადაპტური Lightbox, იგი კარგად მუშაობს სხვა კომპონენტები ნებისმიერ ეკრანზე. ეს სკრიპტი მართლაც ძალიან მარტივია. Lightlayer უზრუნველყოფს კონტროლს პარამეტრების კომპლექტი: ფონზე ფერი და სისწრაფე, პოზიცია Lightbox, გახსნის / დახურვის გადასვლები და მრავალი სხვა საბაჟო ფუნქციები.

9. Strip.js.

Strip არის Lightbox, რომელიც unfolds მხოლოდ ნაწილი გვერდზე. ეს ნაკლებად obsessive და საშუალებას გაძლევთ ურთიერთქმედება სხვა ელემენტებით გვერდის დიდი ეკრანები; Lightbox მობილური მოწყობილობებს აქვს კლასიკური სახე. ზოლები იყენებს jQuery და მხარს უჭერს ყველა ძირითად ბრაუზერში.

10. Fluidbox

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

11. Featherlight.

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

12. იალბ.

Yalb არის decrypted როგორც სხვა lightbox ( კიდევ ერთი. Lightbox) - მაგრამ ეს არ არის. Yalb მოდის დიდი კომპლექტი ინტერფეისები, მათ შორის მომხმარებლის მოვლენები, რომელიც საშუალებას მისცემს მას განსაზღვრავს მისი მდგომარეობა ( ღია, დახურულია).