გალერეა გამოსახულების ესკიზებით რეაგირებს. jQuery სურათების გალერეა საინტერესო ეფექტით

12.01.2024

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

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

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

1. iLightbox

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

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

დამოკიდებულება: jQuery
ბრაუზერის მხარდაჭერა: IE7+, Chrome, Firefox, Safari და Opera
ლიცენზია: ეშმაკმა იცის )))

2. SwipeBox

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

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

3.MagnificPopup

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

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

4.PhotoSwipe

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

11.FeatherLight

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

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

12. LightGallery

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

ლაით გალერეა

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

13. StripJS

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

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

14.მსუბუქი ფენა

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

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

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

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

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

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

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

პატივისცემით, ანდრეი

1. jQuery გალერეა გვერდის შემობრუნების ეფექტით

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

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

3. jQuery სურათების გალერეა პროდუქტისთვის, "slideJS" მოდული

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

გამოსახულება იზრდება, როდესაც მასზე მაუსის ატარებთ.

5. ელეგანტური ლაითბოქსის გალერეა „ppGallery“

6. jQuery Touch-გალერეა

7. ახალი jQuery გალერეა ესკიზებით

2011 წლის პროფესიონალური jQuery გალერეა.

8. jQuery მოდული „Nivo Zoom“

კიდევ ერთი მაღალი ხარისხის jQuery მოდული Nivo სლაიდერის დეველოპერებისგან. გაადიდეთ სურათი მინიატურაზე დაწკაპუნებით.

9. jQuery 3D Wall Gallery

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

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

11. სურათების არაჩვეულებრივი ჩვენება jQuery გალერეაში

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

12. jQuery გალერეის მოდული „MB.Gallery“

13. jQuery გალერეა, რომელიც გადაჭიმულია მთელი ეკრანის შესავსებად

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

14. მსუბუქი jQuery გალერეა

მოდული ავტომატურად სკანირებს საქაღალდეს და ქმნის სურათების მცირე ასლებს.

16. თანამედროვე გალერეა jQuery და Raphael ბიბლიოთეკების გამოყენებით

საინტერესო ეფექტი მინიატურაზე მაუსის გადატანისას.

17. jQuery მოდულის ახალი ვერსია „Supersized“ ვერსია 3.1

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

18. jQuery მოდული „Galleria 1.2.2“

ახალი jQuery გალერეა თქვენი პროექტებისთვის.

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

20. მოდული „Timer Gallery“

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

სურათების გალერეის მოდული jQuery-ის გამოყენებით.

22. javascript გალერეა მობილურ მოწყობილობებზე სანახავად "PhotoSwipe"

სურათების გალერეა ოპტიმიზირებულია მობილური მოწყობილობებზე (ტელეფონები ან ტაბლეტები) სანახავად.

23. javascript გალერეა 3D ეფექტით

24. jQuery მორფის გალერეა

ახალი jQuery სლაიდერი. რამდენიმე მაგარი ანიმაციური ეფექტი სლაიდების შეცვლისას.

25. jQuery მოდული „Galleria 1.2.3“

26. jQuery სურათების გალერეა "Image Wall"

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

27. CSS3 გალერეა

საინტერესო ჰოვერის ეფექტი.

28. გალერეა მინიატურებით “TN3 Gallery”

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

29. სურათების ბადე „გრიდ-გალერეა“

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

30. jQuery Swap Gallery

მსუბუქი jQuery გალერეა კოდის რამდენიმე სტრიქონში.

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

31. jQuery სურათების გალერეა

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

გამოსახულება და მისი მინიატურები შესრულებულია წრეების სახით.

33. jQuery ფოტოგრაფის პორტფოლიოს მოდული „Portfolio Image Navigation“

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

34. მოდული „jmFullZoom“

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

35. ფოტო ბარათი

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

36. სურათების გალერეა ესკიზებით

jQuery გალერეა ესკიზებით.

37. jQuery გალერეა “Galleriffic”

სლაიდშოუ ესკიზებით.

38. jQuery CSS3 მოდული „Wave Display Effect“

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

ჩვენების მრავალი ვარიანტი და პარამეტრი.

42. ბლოგერი

43. მარტივი, საყვარელი გალერეა, დამზადებული CSS-ით, სკრიპტების გამოყენების გარეშე

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

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

46. გალერეა ფოტოების დასის სახით

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

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

ამ გალერეის შესაქმნელად გამოყენებული იქნება ორი უფასო ბიბლიოთეკა JQuery: სწრაფი ქვიშადა 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 ცვლადი სტრიქონს ყველა, შემდეგ .find მეთოდის გამოყენებით ვირჩევთ ყველა ელემენტს portfolio-item2 კლასით $data მასივიდან, რომელიც ზემოთ განვიხილეთ. შერჩეული ელემენტები (და ეს არის სიის ყველა ელემენტი, ანუ ყველა სურათი) მოთავსებულია filteredData ცვლადში.

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

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

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

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

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

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

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

საიტის | დემო

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

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

პარალაქსის სლაიდერი

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

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

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

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

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

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

Javascript და jQuery გამოსახულების მრავალი სლაიდერისგან განსხვავებით, Slider.js არის ჰიბრიდული გადაწყვეტა, რომელიც აღჭურვილია CSS3 გადასვლებითა და ანიმაციებით.

ეს არის ერთი გვერდიანი შაბლონი შესაქმნელად სხვადასხვა პრეზენტაციები HTML5-ში და CSS3-ში.

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

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

JavaScript სლაიდშოუ სწრაფი განვითარებისთვის

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

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

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

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

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

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

ეს არის ადვილად გამოსაყენებელი jQuery მოდული თქვენი ფოტოების სლაიდშოუს სახით გამოსაჩენად სურათებს შორის გადასვლის ეფექტებით (თქვენ გინახავთ უფრო საინტერესო). jqFancyTransitions თავსებადია და ფართოდ არის გამოცდილი Safari 2+-თან. Internet Explorer 6+, Firefox 2+, Google Chrome 3+, Opera 9+.

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

კიდევ ერთი jQuery მოდული Lightbox სერიიდან, თუმცა ის აღმაშფოთებლად ცოტას იწონის (9 KB), მაგრამ აქვს ტონა ფუნქციონირება. არსებობს წესიერად შემუშავებული ინტერფეისი, რომლის გაუმჯობესება ან მორგება ყოველთვის შეგიძლიათ CSS-ის გამოყენებით.

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

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

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

ეს არის გამოსაყენებლად მზა სლაიდების ჩვენება scriptaculous/prototype ან jQuery-ის გამოყენებით. Horinaja არის გარკვეულწილად ინოვაციური გადაწყვეტა, რადგან ის საშუალებას გაძლევთ გამოიყენოთ ბორბალი სლაიდერში განთავსებული შინაარსის გადასასვლელად. როდესაც მაუსის მაჩვენებელი სლაიდშოუს ზონის გარეთაა, გადახვევა ხდება ავტომატურად, როდესაც მაჩვენებელი მოთავსებულია სლაიდშოუზე, გადახვევა ჩერდება.

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

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

ეს არის jQuery მოდული, რომელიც ოპტიმიზირებულია დიდი მოცულობის ფოტოების დასამუშავებლად, გამტარუნარიანობის დაზოგვისას.

ვეგასის ფონი

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

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

არის მსუბუქი (დაახლოებით 5 KB) javascript გამოსახულების ნახვის ორგანიზებისთვის. დიდი სურათების ავტომატური ზომის შეცვლა და სკალირება საშუალებას გაძლევთ ნახოთ სურათის სრული ზომით ბრაუზერის ფანჯარაში

PikaChoose jQuery სურათების გალერეის 4 ვერსია ხელმისაწვდომია! Pikachoose არის მსუბუქი jQuery სლაიდშოუ შესანიშნავი ფუნქციებით! Fancybox-თან ინტეგრაცია, შესანიშნავი თემები (თუმცა არა უფასო) და მრავალი სხვა, თქვენს ყურადღებას გთავაზობენ მოდულების დეველოპერებს.

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

კიდევ ერთი jQuery სლაიდერი, რომელიც იდეალურად ჯდება WordPress-ის ნებისმიერ შაბლონში.

"Nivo"-ს კიდევ ერთი განვითარება, ისევე როგორც ყველაფერი, რასაც აკეთებენ ამ სტუდიის ბიჭები, მოდული დამზადებულია მაღალი ხარისხით, შეიცავს 16 უნიკალურ გარდამავალ ეფექტს, კლავიატურის ნავიგაციას და ბევრ სხვას. ეს ვერსია მოიცავს სპეციალურ დანამატს პირდაპირ WordPress-ისთვის. ასე რომ, ამ ბლოგის ძრავის ყველა გულშემატკივრისთვის, Nivo Slider ზუსტად თქვენთვის იქნება.

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

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

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

სრულეკრანიანი სლაიდშოუ HTML5-ით და jQuery-ით

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

კიდევ ერთი განვითარება Codrops-ის გუნდიდან, სრულფასოვანი და ფუნქციონალური სურათების გალერეა, თუმცა მის აღწერას აზრი არ აქვს, უნდა ნახოთ.

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

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

ჩვენ ჩუმად ვიწყებთ შეგუებას და ველოდებით ახალ ნამუშევრებს Codrops-ის გუნდისგან. გთხოვთ, მიიღოთ შესანიშნავი გამოსახულების სლაიდერი შესანიშნავი 3D გარდამავალი ეფექტით, სურათების სრული ეკრანის რეჟიმში სანახავად.

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

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

კარგი სლაიდშოუს მოდული WordPress-ში ინტეგრაციისთვის. Xili-floom-slideshow ინსტალირებულია ავტომატურად, ასევე დაშვებულია პერსონალური პარამეტრები.

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

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

WordPress-ის ეს მოდული გარდაქმნის ჩაშენებულ გალერეის სურათებს მარტივ და მოქნილ სლაიდშოუში. მოდული იყენებს FlexSlider jQuery გამოსახულების სლაიდერს და მომხმარებლის პირად პარამეტრებს.

არის WordPress დანამატი ფოტოების, სურათების სლაიდშოუს ორგანიზებისთვის SmugMug, Flickr, MobileMe, Picasa ან Photobucket RSS feed, მუშაობს და დისპლეი სუფთა Javascript-ის გამოყენებით.

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

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

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

საიტის | დემო

აჩვენებს პოსტის/გვერდის ყველა სურათს სლაიდშოუს სახით. მარტივი ინსტალაცია. ეს მოდული მოითხოვს Adobe Flashგარდამავალი ანიმაციის მქონე ვერსიისთვის, თუ Flash ვერ მოიძებნა, სლაიდერი მუშაობს ნორმალურ რეჟიმში.

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

Meteor Slides არის jQuery WordPress სლაიდერი ოცზე მეტი გარდამავალი სტილის არჩევით. ავტორმა მოდულს "მეტეორი" უწოდა, რაც სავარაუდოდ მოქმედების სიჩქარეს გულისხმობს, ალბათ მეტეორიული არაფერი შემიმჩნევია.

oQey Gallery არის სრულფასოვანი სურათების გალერეა WordPress-ისთვის სლაიდშოუს ელემენტებით, ჩაშენებული ვიდეო და მუსიკის შესაძლებლობებით.

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

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

WOW Slider არის jQuery გამოსახულების სლაიდერი WordPress-ისთვის საოცარი ვიზუალური ეფექტებით (Explosion, Fly, Blinds, Squares, Fragments, Basic, Fade, Stack, Vertical Stack და Linear) და პროფესიონალურად შექმნილი შაბლონებით.

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

| დემო

ახალი ვერსია 2.4: მხარდაჭერა drag-n-drop დახარისხება ფოტოების პირდაპირ მეშვეობით WordPress რედაქტორი, ასევე მთავარ სურათებზე ფოტო ბმულების დამატების შესაძლებლობა. (IE8-ს შეიძლება ჰქონდეს გარკვეული შეცდომები, კარგად მუშაობს ყველა მთავარ ბრაუზერში. ავტორები გპირდებიან IE8-ის სრულ მხარდაჭერას მომავალში.)

| დემო

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

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

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