→ Lightbox on jQuery

სტატია უზრუნველყოფს გალერეის დანამატების მაგალითს Სინათლის ყუთი. ზე jQuery. და აქ შეგიძლია ძლეებ სამუშაო ვარიანტი. ასე მუშაობს ეს რეალურად:

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

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

$ ("# გალერეა A"). Lightbox ();

კოდის მაგალითი:

სიჩქარე. - ფოტოებისა და მისი დახურვის სიჩქარის სიჩქარე, მილზინებში.

პარამეტრების hash გასაღებები: დახურვა, წინა და შემდეგი ეს არის გასაღებები, რომელთა ალტერნატიული გალერეა ხილული მართვა.

ხოცვა - გამჭვირვალობის გამჭვირვალობა. იღებს ღირებულებებს 0-დან 1. ფონზე შეიძლება შეიცვალოს სტილის ფაილში.

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

ასევე heshe ტექსტში, თქვენ შეგიძლიათ შეცვალოთ ეტიკეტების ნავიგაცია.

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

მადლობა JQuery Community, არსებობს დიდი რაოდენობით Lightbox Plugins, რომელიც ქმნის შესანიშნავი შესაძლებლობები დიზაინერების მუშაობა სურათები. ჩვენი გაკვეთილი, 15 სხვადასხვა plugins წარმოდგენილია ყურადღება მიაქციოს.

TopUp.

TopUp არის მარტივი გამოსაყენებელი JavaScript ბიბლიოთეკა unobtrusive გამოსახულების გამომავალი და ვებ გვერდები. ბიბლიოთეკა აკონტროლებს jQuery და jQuery UI- ს, რათა უზრუნველყოს ჯვარედინი თავსებადობა და კომპაქტურობა.

მოდული highslide

Highslide არის სპეციალური ინსტრუმენტი სურათების, მედიისა და გალერეების ნახვისთვის.

ფერი ყუთი

პატარა საბაჟო მოდული jQuery 1.3+.

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

prettyPhoto მხარს უჭერს არა მხოლოდ სურათებს, არამედ ვიდეო, Flash, YouTube და Ajax. Likebox for მედია ფაილი.

Slimbox 2 - ღია ყუთი 2 კლონი 4 KB ზომის, განხორციელებული გამოყენებით jQuery.

Shadowbox - ვებ აპლიკაცია მედიის ფაილების ნახვისთვის, რომელიც მხარს უჭერს ყველა პოპულარულ ფორმატს. Shadowbox არის დაწერილი JavaScript და CSS, და აქვს კარგი setup პარამეტრები.

Pirobox გაფართოებული v.1.0.

ამ დანამატების ერთ-ერთი უპირატესობა არის ნებისმიერი ტიპის ფაილების გახსნა - UWF ფაილის ჩამონტაჟებული შინაარსიდან მარტივი გამოსახულება up to.pdf ფაილი.

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

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

Super Box არის მოდული, რომელიც აჩვენებს Windows- ს სინათლის ეფექტს.

შექმნის ფოტო გალერეა საიტზე

Ფოტო გალერეა Lightbox2. - მონტაჟი და კონფიგურაცია

ერთ-ერთ წინა სტატიაში, ყველაზე ხშირად პოპულარული უფასო ფოტო გალერეა - Სინათლის ყუთი.SPATED ბიბლიოთეკის მიხედვით შექმნილია jQuery. . ბაზაზე Სინათლის ყუთი. ვებ დიზაინერებმა ბევრი საინტერესო კლონი შეიმუშავეს, მაგრამ თავდაპირველი ვარიანტი კვლავაც განაგრძობს განვითარებას და წარმატებით გამოიყენება სხვადასხვა საიტებზე. განვიხილოთ იგი Ბოლო განახლება - Ჩართვა შეერთება Lightbox2.განსხვავებული მცირე ზომის და როგორც ყოველთვის, მარტივი ინსტალაცია საიტზე. სხვა Lightbox2. მას აქვს მიმზიდველი დიზაინი, მუშაობს ყველა ბრაუზერში და, რომელიც განსაკუთრებით სასიამოვნოა, სწორად აჩვენებს დიდ სურათებს, მათ ეკრანის ზომის შესაბამისად.

უბრალო დეველოპერი Lightbox2. - Lokesh Dhakar, პროგრამისტი San Francisco. ამჟამად (2014) არის Lightbox V2.7.1- ის ვერსია, რომელიც ჩვენ ვცდილობთ დააყენოთ საიტზე. მაგალითი ერთი გამოსახულების გამოყენებით Lightbox2. ნაჩვენებია ფიგურაში.

ფოტო გალერეა Lightbox2- ის ინსტალაცია.

ფოტო გალერეის ინსტალაციისთვის Lightbox2. პირველი, შექმენით ახალი საქაღალდე საიტზე, რასაც მას, რა თქმა უნდა, lightbox2.. ეს საქაღალდე უნდა იყოს იგივე დირექტორიაში, როგორც ფოტო გალერეა გვერდზე. შემდეგ ჩამოტვირთეთ არქივი და ამოიღეთ იგი შექმნილი საქაღალდეში. ჩვენ გვექნება ორი სკრიპტი ( * .Js.), დამხმარე სურათები (საქაღალდე iMG) და CSS ფაილი (* escss). შემდეგი, ჩადეთ სათაური გვერდზე მომავალი ფოტო გალერეა შიგნით tag ... ჩვენი ახალი ფაილების გზების მითითებით შემდეგი ხაზები:

Მნიშვნელოვანი ჩანაწერი: თუ თქვენ იყენებთ რამდენიმე plugins თქვენს საიტზე jQuery.უფრო მოსახერხებელია გადარიცხოს jquery.js ფაილი (სასურველია უახლესი ვერსია) root საქაღალდე ისე, რომ არ ჩატვირთვა რამდენჯერმე. ამ შემთხვევაში, row გასაჩივრების იგი გამოიყურება თანაბრად ყველა plugins. კერძოდ, ჩვენი მაგალითია, აღმოჩნდება:
.
არ არის რეკომენდებული რამდენიმე გვერდი რამდენიმე სხვადასხვა ვერსიები jQuery.ისე, რომ ისინი არ ეწინააღმდეგებიან ერთმანეთს. ამავე დროს, დარწმუნდით, რომ შეამოწმოთ ოპერაცია plugins ერთად დამონტაჟებული ვერსია jQuery.მას შემდეგ, რაც ყველა ვერსია არ არის ურთიერთშემცვლელნი.

ახლა თქვენ უნდა განათავსოთ სასურველი სურათები გვერდზე საიტზე. როგორც წესი, თითოეული უნდა იყოს მინიატურული (მცირე) და სრული ზომის სურათზე (დიდი), რომელსაც მინიატურების ბმული მიუთითებს. ბმულების ტეგში დამატებით განსაზღვრავს rel \u003d "Lightbox" - ერთი გამოსახულება, და თუ გვინდა გალერეა რამდენიმე სურათის გაერთიანება, მაშინ ნებისმიერი გამოხატულება იგივეა, მაგალითად, "Lightbox-One"


და ა.შ.

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

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

ამიტომ, სასურველია, რომ დიდი გამოსახულება აქვს რეზოლუციის მიწოდებას, მაგალითად, მინიმუმ 1000 პიქსელი ვერტიკალურად სტანდარტული ეკრანი სრული HD. - 1920x1080. ჩვენს მაგალითში, ეს არის სურათის "შაბათი".

შექმნის ფოტო გალერეა Lightbox2.

კონფიგურაციის ფოტო გალერეული ფაილი ფაილი lightbox.js. ნებისმიერ HTML- ზე ტექსტის რედაქტორიმაგალითად, ნოუთბუქში. ფაილის დასაწყისში ნახავთ თქვენს პარამეტრებს:
ეს. Fadeduration \u003d 500; / / გახსნის დრო სურათები MS
this.fitimagesinviewport \u003d true; // fitting ეკრანზე ზომა True / False
ეს.რესალიზაცია \u003d 700; / / დრო განლაგების სურათები ms
thppositionfromtop \u003d 50; // Windbox Windbox- ის წერტილი ეკრანზე
thes.showimagenumberlabel \u003d true; / / დასკვნა ოთახი სურათები True / False
და ა.შ.

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

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

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

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

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

იხილეთ 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. ყველაფერი wensively მხარს უჭერს ყველა ვიდეო ფორმატში 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 მარჩებს. უბრალო მიზეზით, რაც ცოტა ხნის წინ გამოჩნდა საიტზე ახალი სექცია თარგები. ახლა თითოეულ მომხმარებელს შეუძლია გაეცნოს კოლექციას, რომელიც განაახლებს და განახლებას. თარგების ტექსტები ხელით დაწერილი იყო. მაგრამ ეს არ არის მხოლოდ ამ მზა გადაწყვეტილებების ერთადერთი პლუს. ყოველივე ამის შემდეგ, მათ პაკეტებში შეგიძლიათ იპოვოთ ყველაფერი, რაც ხელს შეუწყობს ონლაინ პროექტს, მათ შორის ვიზუალური რედაქტორის ჩათვლით.

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

Lightbox არის jQuery-plugin, რომელიც გამოიყენება გამოსახულების ან სხვა შინაარსის ჩვენება სპეციალურად გაფორმებული ფანჯარაში, რომელიც არის ნაჩვენები, როგორც წესი, translucent shadowned ფონზე მთავარ შინაარსის გვერდი.

Plugin- ის ინსტალაციის დაწყებამდე გვერდზე და ჩაერთეთ, მოდით შევხედოთ მაგალითებს:



მიღება Lightbox- ით

ძლეებ Ბოლო ვერსია მოდული (ასევე ხელმისაწვდომია Bower: Bower დააყენოთ Lightbox2 - Save). ამის შემდეგ, unzorchive zip ფაილი. და შეხედეთ შემცირების მუშაობის მაგალითს, რომელიც საქაღალდეშია მაგალითები..

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

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

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

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

სურათი # 1.

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

Img 2 img 3 img 4

პარამეტრები Lightbox

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

• deffent: ყალბი

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

• fadeduration default: 500

  დრო, რომელიც საჭიროა კონტეინერის გაქირავების დროს.

• fitimagesinviewport ნაგულისხმები: TRUE

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

• maxwidth.

  თუ მითითებული, სურათის სიმაღლე შემოიფარგლება ამ ღირებულებით (პიქსელებში). ასპექტის თანაფარდობა არ იქნება დაცული.

• maxheight

  თუ მითითებული, სურათის სიგანე შემოიფარგლება ამ ღირებულებით (პიქსელებში). ასპექტის თანაფარდობა არ იქნება დაცული.

• positionFromtop default: 50

  მანძილი ნახვის ფანჯრის ზედა ნაწილში სინათლის კონტეინერზე (პიქსელებში).

• ნაგულისხმები Resizeduration: 700

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

• showimagenumberlabel default: TRUE

  Თუ ცრუტექსტი მიუთითებს მიმდინარე სურათის ნომერზე და სურათების საერთო რაოდენობის მიხედვით, მაგალითად: "Image 2 of 4".

• ნაგულისხმები Wraparound: FALSE

  Თუ მართალია.როდესაც ეს უკანასკნელი გამოსახულება არის ნაჩვენები, ღილაკს, რომ გამოჩნდეს შემდეგი სურათი არ გაქრება. დაჭერით ეს გამოიწვევს პირველი იმიჯის შოუს.