Jquery სურათების გალერეა ესკიზებით. სურათების გალერეა jQuery-ში საინტერესო ეფექტით. jQuery მინი გალერეა "Touch-Gallery"

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

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

დღევანდელ სტატიაში ჩვენ შევაგროვეთ თქვენთვის საუკეთესო jQuery სურათების გალერეები და სლაიდერები.

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

აირჩიეთ ამ ელემენტებიდან რომელი ჯდება იდეალურად თქვენს პროექტში.

1. Bootstrap Slider

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

2. პროდუქტის გადახედვის სლაიდერი

Product Preview Slider განასახიერებს jQuery-ის სრულ პოტენციალს და იდეალურად ჯდება ნებისმიერ ინტერფეისში. თქვენ ასევე კმაყოფილი დარჩებით ამ მოდულის კოდის ხარისხით და სისუფთავით.

3. გაფართოებადი სურათების გალერეა

Expandable Image Gallery არის საოცარი დანამატი, რომელიც იქცევა სრულეკრანიან გალერეად ერთი დაწკაპუნებით. ის შეიძლება გამოყენებულ იქნას განყოფილებაში „ჩვენს შესახებ“ ან პროდუქტის ინფორმაციის სანახავად.

4. ფოტორამა

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

5. იმერსიული სლაიდერი

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

6. უმცირესი

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

7. მოცურების პანელების შაბლონი

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

8. Squeezebox Portfolio შაბლონი

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

9. სურათების არევა

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

10. უფასო jQuery Lightbox Plugin

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

11. PgwSlider – საპასუხო სლაიდერი jQuery-სთვის

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

12. გაფანტული პოლაროიდების გალერეა

Scattered Polaroids Gallery არის განსაცვიფრებელი სლაიდერი ბრტყელი დიზაინით. მისი ელემენტები ქაოტურად მოძრაობენ სურათების გადართვისას, რაც საოცრად გამოიყურება.

13. Bouncy კონტენტის ფილტრი

Bouncy Content Filter იდეალური გადაწყვეტაა პორტფოლიოებისთვის. ეს დანამატი მომხმარებლებს საშუალებას აძლევს სწრაფად გადავიდნენ ერთი კატეგორიიდან მეორეში.

14. მარტივი jQuery სლაიდერი

მარტივი jQuery Slider შეესაბამება მის სახელს. ეს მოდული აერთიანებს JavaScript, HTML5 და CSS3 ელემენტებს. ნაგულისხმევი დემო მხოლოდ ტექსტის ჩატვირთვის საშუალებას იძლევა, მაგრამ თუ რამდენიმე ცვლილებას განახორციელებთ, შეგიძლიათ დაამატოთ ვიზუალური შინაარსიც.

15. Glide JS

Glide JS არის მარტივი, სწრაფი და საპასუხო jQuery სლაიდერი. მისი კონფიგურაცია მარტივია და დანამატი დიდ ადგილს არ იკავებს.

16. სრულეკრანიანი დრაგ-სლაიდერი პარალაქსით

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

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

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

S Gallery მიმზიდველი Jquery სურათების გალერეის მოდული. ანიმაცია მუშაობს css3-ის გამოყენებით.

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

სუპერბოქსი თანამედროვე სურათების გალერეა Jquery, css3 და html5 გამოყენებით. ჩვენ ყველა მიჩვეული ვართ იმ ფაქტს, რომ როდესაც თქვენ დააჭირეთ გადახედვას, სრული სურათი იხსნება ლაითბოქსში (pop-up ფანჯარა). ამ მოდულის შემქმნელებმა გადაწყვიტეს, რომ ლაითბოქსი უკვე მოძველებული იყო. ამ გალერეის სურათები იხსნება გადახედვის ქვემოთ. უყურეთ დემო ვერსიას და ნახეთ, რომ ეს გამოსავალი ბევრად უფრო თანამედროვე გამოიყურება.
| Smooth Diagonal Fade Gallery თანამედროვე სურათების გალერეა, რომელშიც გადახედვები ნაწილდება ეკრანის მთელ სივრცეში. სკრიპტს შეუძლია სერვერზე ფოტოების მქონე საქაღალდის სკანირება, ანუ არ არის საჭირო თითოეული სურათის ცალკე ჩასმა. უბრალოდ ატვირთეთ სურათები სერვერის საქაღალდეში და პარამეტრებში მიუთითეთ დირექტორიაში მიმავალი გზა. შემდეგ სცენარი ყველაფერს თავად გააკეთებს.

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

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

jGalleryjGallery არის სრულეკრანიანი, საპასუხო სურათების გალერეა. ეფექტები, გადასვლები და სტილიც კი ადვილად კონფიგურირებადია.

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

Mosaic Flow მარტივი, საპასუხო სურათების გალერეა Pinterest-ის სტილის ბადით.

Galereya კიდევ ერთი ელეგანტური გალერეა Pinterest-ის სტილის ბადით გაფილტრული კატეგორიების მიხედვით. მუშაობს ბრაუზერებში: Chrome, Safari, Firefox, Opera, IE7+, Android ბრაუზერი, Chrome მობილური, Firefox მობილური.

minimum.jsშესანიშნავი უფასო სურათების გალერეა JQUERY, 5 და CSS3 გამოყენებით. მას აქვს ძალიან მიმზიდველი გარეგნობა და უდავოდ მიიპყრობს თქვენი ვიზიტორების ყურადღებას.

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

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

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

ძირითადი უპირატესობები (+)

მარტივი ინსტალაცია, კონფიგურაცია და გამოყენება. jQuery-ს გარდა, დაგჭირდებათ დააკავშირეთ მხოლოდ 2 ფაილიდა გალერეის საჩვენებლად საჭიროა მხოლოდ სურათების ბმულების მიწოდება.

ოდნავ გავლენას ახდენს საიტის ჩატვირთვის სიჩქარეზე.

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

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

სენსორული მოწყობილობების მხარდაჭერა.

ვიდეო მხარდაჭერა.

სურათების ზარმაცი დატვირთვის შესაძლებლობა.

და ბევრი, ბევრი სხვა რამ, რაც მოეწონება დახვეწილ მომხმარებელს.

მინუსები (-)

მომხმარებლის მხარდაჭერის ნაკლებობა.

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

პირველი ვარიანტი Fotorama-ს დასაკავშირებლად

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

jQuery-ის შემოწმება. გადადით საიტის საწყის კოდზე (კლავიატურის მალსახმობი Ctrl + U) → ცდილობთ იპოვოთ მსგავსი რამ: https://ajax.googleapis.com/ajax/libs/jquery/X.X.X/jquery.min.js

თქვენი ძიების გასაადვილებლად გამოიყენეთ Ctrl + F . თუ სასურველი ხაზი არ არის, მაშინ მოგიწევთ jQuery-ის დაკავშირება. WordPress-ზე, ეს შეიძლება გაკეთდეს ქვემოთ მოცემული კოდის ჩასმით თემის ფუნქციების ფაილში (functions.php). სინამდვილეში, ეს სკრიპტი გამოიყენება jQuery-ის სხვადასხვა ვერსიებს შორის კონფლიქტების დროს და ის მუშაობს შემდეგი სქემის მიხედვით: წაშლის ადრე რეგისტრირებულ jQuery-ს, არეგისტრირებს ახალს და აჩვენებს სკრიპტს. jQuery ბიბლიოთეკის მიმდინარე ვერსიები შეგიძლიათ იხილოთ აქ.

თქვენ შეგიძლიათ უბრალოდ ჩასვათ ეს ხაზი შორის და:

ჩვენ ვუკავშირდებით fotorama.css და fotorama.js. ჩადეთ შემდეგი კოდი ტეგებს შორის, WordPress-ში ეს კეთდება თემის სათაურის ფაილში (header.php).

ეს ასრულებს გალერეის დაკავშირებას პირველი მეთოდის გამოყენებით. როგორ გამოვიყენოთ ის წერია განყოფილებაში „გალერეის უშუალოდ შექმნა“.

კავშირის მეორე ვარიანტი [მოკლე კოდი + ავტომატური ოპტიმიზაცია]

ამ კავშირის პარამეტრში, სკრიპტის ფაილები გამოჩნდება მხოლოდ საჭირო გვერდებზე [shortcode]-ის საშუალებით. და თუ იყენებთ Autoptimize დანამატს, მაშინ სკრიპტის კოდი ასევე ინტეგრირებული იქნება თემის ფაილებში. ამ მარტივმა მანიპულაციებმა უნდა გაზარდოს საიტის ჩატვირთვის სიჩქარე.

jQuery-ის შემოწმება. ისევე, როგორც პირველ ვარიანტში, იხილეთ ზემოთ.

ჩამოტვირთეთ ფოტო ჩარჩოს ფაილები → ამოალაგეთ → ატვირთეთ ცალკე საქაღალდეში საიტის ძირში.

მოკლე კოდის შესაქმნელად ჩასვით ქვემოთ მოცემული კოდი თემის ფუნქციების ფაილში (functions.php), შეცვალეთ ფაილების ბმულები თქვენს საკუთარზე..js"> "; ) add_shortcode("ფოტო","სდ");

ახლა, როდესაც წერთ სტატიას, ბოლოში შეიყვანეთ მოკლე კოდი

უშუალოდ გალერეის შექმნა გალერეა ნაჩვენებია HTML კოდის გამოყენებითკონტეინერი c class = "ფოტორამა" , კონტეინერი შეიცავს გამოსახულების გამომავალ კოდს ან სურათის ბმული

. WordPress-ის ძრავის გამოყენებით სტატიის დაწერისას გადართეთ რედაქტორი ტექსტის რეჟიმში და შეიყვანეთ კონტეინერი c class="fotorama" .

ეს ასე გამოიყურება:

1 3 4

ან ასე (ბმულების ნუმერაცია არჩევითია): Fotorama პარამეტრების მაგალითები

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

არის სხვა პარამეტრები:

Data-width="98%" //relative width data-ratio="800/600" //ასპექტის თანაფარდობა data-minwidth="420" //წთ. სიგანე data-maxwidth="900" // მაქს. სიგანე data-minheight="320" // წთ. სიმაღლე data-maxheight="100% // შედარებითი მაქსიმალური სიმაღლე data-height="100% // ფარდობითი სიმაღლე

მინიატურები

Data-nav="thumbs" პასუხისმგებელია ესკიზებზე

მაგრამ ეს მეთოდი არც თუ ისე ეფექტურია, რადგან სკრიპტმა უნდა ჩაიტვირთოს ყველა ფოტო ერთდროულად, რომ ესკიზების გენერირება მოახდინოს, ამიტომ უფრო რაციონალური იქნებოდა სურათების მცირე ასლების წინასწარ მომზადება. WordPress ავტომატურად ქმნის მინიატურებს, რასაც ჩვენ გამოვიყენებთ. მინიატურაზე ბმული რომ მიიღოთ, დაამატეთ -70x70 ფაილის სახელს (https://site/wp-content/uploads/2017/11/27ltl9eRXk.jpg → https://site/wp-content/uploads/2017/ 11/27ltl9eRXk- 70x70.jpg).

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

HTML კოდი + ფოტომასალა

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

მაგალითების ჩვენება/დამალვა

იხილეთ კალამი ooppwb by Ivanov Klim (@DreamerKlim) CodePen-ზე.

იხილეთ კალამი aVEEVb by Ivanov Klim (@DreamerKlim) CodePen-ზე.

სრული ეკრანის რეჟიმი data-allowfullscreen="true" //ბრაუზერის ფანჯარაში data-allowfullscreen="native" //მთელ მონიტორზე

სრული ეკრანის რეჟიმში ცალკე დიდი სურათის დამატება შესაძლებელია მონაცემთა სრული საშუალებით:

სხვა data-autoplay ="true" //autoplay data-autoplay="3000" //სლაიდებს შორის ინტერვალი ms-ში data-caption ="One" //კომენტარები სურათებზე data-კლავიატურა ="true" //arrow navigation data-shuffle ="true" //გამოსახულებები სხვადასხვა თანმიმდევრობით data-navposition ="top" //მინიატურები ზედა data-loop ="true" //ციკლური გადახვევა შევეცადოთ დავაკავშიროთ ყველაფერი და დავამატოთ ვიდეო "ზოგიერთი კომენტარი 1" > "ზოგიერთი კომენტარი 2" > საყვარელი სამუშაოს პოვნა

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

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

წყაროები

HTML მარკირება

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

• კატეგორიები:


• ყველა


• კატეგორია 1


• კატეგორია 2


• კატეგორია 3


• კატეგორია 4

სურათის დასახელება

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

ასევე არ დაგავიწყდეთ 2 მნიშვნელოვანი რამ: li list ელემენტს უნდა ჰქონდეს უნიკალური data-id ატრიბუტი. მონაცემთა ტიპის ატრიბუტი შეიცავს კატეგორიის კლასს, რომლის სია ზემოთ აღვწერე. როგორც ჩანს, ყველაფერი მარკირებას ეხება.

CSS სტილები

განსაკუთრებულ ყურადღებას არ გავამახვილებ სტილებზე, რადგან ვიყენებთ მზა PrettyPhoto ბიბლიოთეკას, რომელიც პასუხისმგებელია გამოსახულების გაფართოებაზე და საკმაოდ ბევრი CSS კოდია. ამასთან, აღსანიშნავია, რომ გაფართოებული სურათის დიზაინის 5 ვარიანტია, თუმცა იდეალურად მხოლოდ 3, რადგან ორ ვარიანტში მხოლოდ დამრგვალება ამოღებულია.

ამიტომ, მე ვაჩვენებ მხოლოდ CSS სტილებს ესკიზებისთვის და კატეგორიების ჩამონათვალში.

პორტფოლიო-კატეგი (ზღვარი-ქვედა: 30 პიქსელი; )
.პორტფოლიო-კატეგლი (
ჩვენება: inline;
margin-right:10px;
}
.image-block(
ჩვენება: ბლოკი;
პოზიცია: ნათესავი;
}
.image-block img (
საზღვარი: 1px მყარი #d5d5d5;
საზღვარი-რადიუსი: 4px 4px 4px 4px;
ფონი:#FFFFFF;
padding: 10px;
}
.image-block img:hover (
საზღვარი: 1px მყარი #A9CF54;
box-shadow:0 0 5px #A9CF54;
}
.პორტფოლიო-არეალი li (
float: მარცხენა;
ზღვარი: 0 12px 20px 0;
overflow: დამალული;
სიგანე: 245px;
padding: 5px;
}
.home-portfolio-text ( margin-top:10px; )
li.active a (ტექსტის დეკორაცია: ხაზგასმული; )

პრინციპში, ყველაფერი ნათელი უნდა იყოს სტილით. იმისთვის, რომ კატეგორიები დალაგდეს, ჩვენების თვისება დაყენებულია inline . გამოსახულების მონახაზის ეფექტის მისაცემად, დააყენეთ ფონის ფერი (თეთრი) და შიგთავსი 10 პიქსელზე. სიის ელემენტების ზომები მითითებულია .portfolio-area li .

jQuery

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

// აირჩიეთ პორტფოლიო-არეის ყველა ბავშვის ელემენტი და ჩაწერეთ ცვლადზე
var $data = $(".portfolio-area").clone();

$(".portfolio-categ li").click(function(e) (
$(".ფილტრი li").removeClass("აქტიური");

Var filterClass=$(this).attr("class").split(" ").slice(-1);

თუ (filterClass == "ყველა") (
var $filteredData = $data.find(".portfolio-item2");
) სხვა (
var $filteredData = $data.find(".portfolio-item2");
}
$(".portfolio-area").quicksand($filteredData, (
ხანგრძლივობა: 600,
სიმაღლის კორექტირება: "ავტომატური"
), ფუნქცია () (

LightboxPhoto();
});
$(this).addClass("აქტიური");
დაბრუნება false;
});

clone() მეთოდისა და სელექტორის გამოყენებით, ჩვენ ვირჩევთ .portfolio-area-ის ყველა შვილო ელემენტს და ვწერთ $data ცვლადში. შემდეგი, ჩვენ ვადევნებთ თვალყურს დაწკაპუნებას ერთ-ერთ კატეგორიაზე, სიის li ელემენტზე კლასით .portfolio-categ . ჩვენ ყველა კატეგორიას უმოქმედოდ ვაქცევთ removeClass(„აქტიური“) ამოღებით, თუ ეს არ გაკეთებულა, დროთა განმავლობაში ყველა კატეგორია გააქტიურდება და ფილტრაცია შეჩერდება.

ვინაიდან სიის ელემენტზე ვაწკაპუნებთ, ეს სელექტორი შეიცავს სიის ელემენტს, ანუ li , მისგან ვიღებთ კლასის ატრიბუტის მნიშვნელობას და split მეთოდის გამოყენებით კლასის სახელს ვყოფთ რამდენიმე ნაწილად, საზღვარი არის სივრცე. (ანუ თუ კლასი იყო "ყველა აქტიური", მაშინ გაყოფის შემდეგ მივიღებთ "ყველა" და "აქტიური" მასივს). და შემდეგ slice მეთოდის გამოყენებით ვირჩევთ მასივის პირველ ელემენტს (ჩვენს შემთხვევაში, „ყველა“) და მიღებულ შედეგს ვწერთ filterClass ცვლადში. თუ სივრცე არ არის, კლასის სახელი არ შეიცვლება.

შემდეგი, ჩვენ ვამოწმებთ, შეიცავს თუ არა filterClass ცვლადი სტრიქონს all , შემდეგ .find მეთოდის გამოყენებით ვირჩევთ ყველა ელემენტს portfolio-item2 კლასით $data მასივიდან, რომელიც ზემოთ ვნახეთ. შერჩეული ელემენტები (და ეს არის სიის ყველა ელემენტი, ანუ ყველა სურათი) მოთავსებულია filteredData ცვლადში.

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

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

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

JQuery("a").prettyPhoto((
ანიმაციის სიჩქარე: "სწრაფი",
სლაიდშოუ: 5000,
თემა: "ფეისბუქი",
show_title: ყალბი,
overlay_gallery: ყალბი
});

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

ვებდიზაინი jQuery-ით ძალიან მარტივია! AD გალერეა- ფოტო გალერეა მინიატურებით.
ინსტალაცია და კონფიგურაცია

ხშირ შემთხვევაში, ვებსაიტზე ლამაზი ფოტო გალერეა შეიძლება შეიქმნას კარუსელის გამოყენებით ესკიზებით, რომლებიც იხსნება დიდ ფანჯარაში დაწკაპუნებისას. ასეთი გალერეის შესაქმნელად საჭიროა მხოლოდ HTML და CSS ინსტრუმენტები (იხილეთ, მაგალითად, სტატია ფოტო გალერეის შექმნა Photoshop), მაგრამ გაცილებით მეტი შესაძლებლობა მოცემულია უფასო jQuery ბიბლიოთეკის დანამატების გამოყენებით. მაგალითად, განვიხილოთ ფოტო გალერეა AD Gallery, რომელიც შემუშავებულია შვედი პროგრამისტის ანდერს ეკდალის მიერ.

ეს ფოტო გალერეა საშუალებას გაძლევთ აირჩიოთ რამდენიმე ვარიანტი სურათების შესაცვლელად, აჩვენებს მასშტაბს ესკიზების გადახედვით და ტექსტით სურათების ქვეშ, აქვს სლაიდ შოუს რეჟიმი, ასევე ბევრი სხვა სასარგებლო ფუნქცია. დანამატი სწორად მუშაობს ბრაუზერების უმეტესობაში, მათ შორის IE 7, 8 და ა.შ. AD Gallery ფოტო გალერეის ერთ-ერთი ვარიანტი ნაჩვენებია ქვემოთ (მუშა მაგალითი, როგორც ყოველთვის):

ფოტო გალერეის დაყენება AD გალერეა

ჯერ შევქმნათ საიტზე ახალი საქაღალდე და დავარქვათ ad-gallery. შემდეგ გადმოწერეთ არქივი და გახსენით შექმნილ საქაღალდეში. მასში გვექნება ორი js სკრიპტი, CSS სტილის ფაილი და რამდენიმე დამხმარე სურათი.

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

$(ფუნქცია() (
var galleries = $(".ad-gallery").adGallery();
});

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

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

სურათების დასაყენებლად (დიდი - big.jpg და მინიატურები - small.jpg) გამოიყენება შეუკვეთავი სია, ჩასმული რამდენიმე ტეგში. ჩვენი მაგალითისთვის ხუთი სურათით, HTML კოდი ასე გამოიყურება:

• 


• 


• 


• 


• 

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

როგორც ხედავთ, AD Gallery ფოტო გალერეის დაყენება, ისევე როგორც jQuery პლაგინების უმეტესობა, ძალიან მარტივია და არ საჭიროებს პროგრამირების სპეციალურ ცოდნას.

ფოტოების გალერეის პარამეტრების დაყენება AD გალერეა

AD Gallery-ის გარეგნობის უმეტესი პერსონალიზაცია ხდება CSS წესების გამოყენებით jquery.ad-gallery.css ფაილში. ძირითადი მოცემულია რუსული კომენტარებით და არ გააჩნიათ რაიმე განსაკუთრებული თვისებები, ანუ სირთულეები.

ანიმაცია და სხვა პარამეტრები შეიძლება შეიცვალოს jquery.ad-gallery.js ფაილში. ამისათვის გახსენით ის რედაქტორში ან Notepad-ში და თავიდანვე ნახავთ ხაზებს კომენტარებით. პარამეტრის მნიშვნელობების შეცვლით და შედეგის ბრაუზერში ნახვით, შეგიძლიათ შეცვალოთ ფოტო გალერეა თქვენს საჭიროებებზე. მაგალითად, ხაზი
ეფექტი: "slide-hori", // slide show ეფექტები: "slide-vert", "fade", "size", "none", "slide-hori"
განსაზღვრავს გადასვლის ხუთიდან ერთ-ერთ ვარიანტს სურათების შეცვლისას.

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

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

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