სურათების გალერეა jQuery-ში. სურათების გალერეა jQuery-ში სპეციალური ეფექტით გალერეა jquery სრულ ეკრანზე

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

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

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

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

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

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

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

მდიდარი Javascript და jQuery გამოსახულების სლაიდერების გარდა, Slider.js არის ჰიბრიდული გადაწყვეტა, CSS3 გადასვლებისა და ანიმაციების ეფექტურობაზე დაფუძნებული.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ვეგასის ფონი

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

- სლაიდერი ისევე, როგორც სლაიდერი, არც მეტი არც ნაკლები, წარწერებით, სურათებით ან სტატიების განცხადებებით და უბრალოდ მენეჯერებისთვის, „ტიკის“ მეთოდის გამოყენებით.

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

PikaChoose jQuery სურათების გალერეის 4 ვერსია ხელმისაწვდომია! Pikachoose არის მსუბუქი jQuery სლაიდშოუ დიდი შესაძლებლობებით! Fancybox–თან ინტეგრაცია, დიზაინის ჩათვლით (თუმცა არა ხარჯების გარეშე) და ბევრად მეტი, დაუმტკიცებს თქვენს პატივცემულ დანამატის დეველოპერებს.

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

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

ერთი rodros “NIVO”, yak Usi, shit გადაიტანოს clap of jacket, vicunances of Yakibos, 16 UNIKALICE EXPENTS, ნავიგაცია სკოლამდელი აღზრდისთვის Claudyaturi რომ ბაგატო ინშოგო. ეს ვერსია შეიცავს სრულყოფილ დანამატს WordPress-ისთვის. ასე რომ, ამ ბლოგის ძრავის ყველა თაყვანისმცემლისთვის, Nivo Slider იქნება მხოლოდ ის.

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

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

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

სრული ეკრანის სლაიდშოუს რეჟიმი HTML5 და jQuery

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

Codrops-ის გუნდის ნამუშევარი არის სრული და ფუნქციონალური გალერეა, მაგრამ ძნელი აღსაწერია, მაგრამ მნიშვნელოვანია მისი აღწერა.

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

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

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

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

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

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

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

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

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

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

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

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

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

საიტის | დემო

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

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

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

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

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

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

WOW Slider არის jQuery გამოსახულების სლაიდერი WordPress-ისთვის შესანიშნავი ვიზუალური ეფექტებით (vibkh, Fly, ბლაინდები, სკვერები, ფრაგმენტები, ძირითადი, გაცვეთილი, სტეკი, ვერტიკალური დასტა და ხაზოვანი) და პროფესიონალურად შექმნილი შაბლონები.

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

| დემო

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

| დემო

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

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

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

ენდის მიერ - The Coffeescripter
უაღრესად რეგულირებადი გალერეა/გამოფენის მოდული jQuery-სთვის.

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

Tonic Gallery – jQuery XML Portfolio Gallery $6

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

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

თომას კანის მიერ
Smooth Div Scroll არის jQuery დანამატი, რომელიც გადახვევს შინაარსს ჰორიზონტალურად მარცხნივ ან მარჯვნივ. უამრავ სხვა ტალღოვან მოდულთან ერთად, რომლებიც შეიძლება დაიწეროს jQuery-სთვის, მიმღები div პინი არ იძლევა კიდეებამდე დახვევის საშუალებას.

ვიქტორ ზამბრანოს მიერ – frwrd.net
Minishowcase არის პატარა და მარტივი php/javascript ონლაინ ფოტო გალერეა, რომელიც ეყრდნობა AJAX-ს, რომელიც საშუალებას მოგცემთ სწრაფად აჩვენოთ თქვენი სურათები ონლაინში, რთული კოდირებისა და კოდირების გარეშე, რაც საშუალებას გაძლევთ განახლდეს და გაუშვათ გალერეა დროის უმცირესობაში.

კასპარ დევიდ ფრიდრიხის მიერ
EOGallery არის ვებ ანიმაციური სლაიდშოუს გალერეა, რომელიც დამზადებულია jQuery-ით. jQuery-ის ყველა ძირითადი ფუნქცია და Cody Lindley's Thickbox შესანიშნავი სურათების შესაქმნელად.

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

The Wall – მედია გალერეა – jQuery Powered | $5

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

მორენო დი დომენიკოს მიერ
jmFullWall არის jQuery მოდული შთამბეჭდავი პორტფოლიოს შესაქმნელად.

ფაბრიციო კალდერანის მიერ
Mosaiqy არის jQuery დანამატი Opera 9+, Firefox 3.6+, Safari 3.2+, Chrome და IE7+-ის სანახავად და ფოტოების გადაღებისთვის. ფოტოები განაახლებს JSON/JSONP მონაცემთა სტრუქტურას და შეუფერხებლად გადააადგილებს პინს შუაში. ყველა გრანდიოზული ანიმაცია საჭიროებს დამატებით GPU-ს სხვა ბრაუზერებზე, vikoryst CSS3 მოძრაობს, CPU-ის ზედნადების მინიმუმამდე შემცირებას.

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

VION – jQuery Image Gallery Plugin | $7

მალიჰუს მიერ
შემოქმედების მარტივი, მაგრამ ელეგანტური სრულეკრანიანი სურათების გალერეა jQuery ჩარჩოთი და მარტივი CSS-ის მოქმედებებით.

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

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

HTML განლაგება

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

1 2 3 4 5 6 7 8 9 10 11

სურათის დასახელება გამოქვეყნებულია: 2012 წ

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

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

CSS სტილები

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

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

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

jQuery

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

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

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

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

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

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

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

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

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

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

ფოტო ყუთი

S გალერეა

DIAMONDS.JS

სუპერბოქსი

გლუვი დიაგონალური Fade გალერეა

გამა გალერეა

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

jGallery

Glisse.js

მოზაიკის ნაკადი

გალერეა

სულ მცირე.js

flipLightBox

blueimp გალერეა