ამ ტუტორიალში მე გაჩვენებთ როგორ შევქმნათ მინიმალისტური, მაგრამ ამავე დროს მოსახერხებელი და ფუნქციონალური ფოტო გალერეა 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;
გადინება: დამალული;
სიგანე: 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: false,
overlay_gallery: ყალბი
});

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

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

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

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

შექმენით სურათების გალერეა jQuery-ით

მაგრამ სანამ Java Script კოდს დავწერთ, რამდენიმე მოსამზადებელი ნაბიჯი უნდა გავიაროთ.

პირველ რიგში, თქვენ უნდა მოამზადოთ თქვენი სურათები. ჩვენ გვექნება ორი სახის გამოსახულება: ესკიზები და დიდი სურათები. შევქმენი "img" საქაღალდე, რომელშიც შევქმენი კიდევ 2 საქაღალდე: "დიდი" და "პატარა". მე შევინახე დიდი სურათები "დიდი" საქაღალდეში (ისინი ყველა დაახლოებით იგივე ზომისაა სიგანით და სიმაღლით, დაახლოებით 500 პიქსელი 500 პიქსელი). „პატარა“ საქაღალდე შეიცავს ერთიდაიგივე სურათების მინიატურებს (მათი ზომებიც დაახლოებით ერთნაირი უნდა იყოს. როცა დაახლოებით ვამბობ, ეს ნიშნავს, რომ 2-3 პიქსელის განსხვავებას დიდი მნიშვნელობა არ აქვს).

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

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

მოდით გავაკეთოთ ეს ახლა.

1. გახსენით რედაქტორი ჩვენი კოდის შესაქმნელად და ახალი html ფაილის შესაქმნელად. მოდით დავარქვათ მას “gallery.html” და შეინახოთ იმავე დირექტორიაში, სადაც არის საქაღალდე “img” სურათებით.

ახლა მოდით დავწეროთ ამ ფაილის შინაარსი.

"სხეულის" ტეგებს შორის იქნება div იდენტიფიკატორით "wrapper". ის შეიცავს 2 ძირითად ელემენტს: სათაურის ტეგს, რომელიც შეიცავს სათაურს და div იდენტიფიკატორით „შინაარსი“, რომელიც შეიცავს მთელ ჩვენს გალერეას.

"content" div შეიცავს div-ს ID-ით "main", რომელიც შეიცავს გალერეის სათაურს; div იდენტიფიკატორით "გალერეა", სადაც განთავსებულია ჩვენი სურათების ესკიზები, და სხვა div იდენტიფიკატორით "photo". იდენტიფიკატორის „ფოტოს“ მქონე div ამ დროისთვის ცარიელი იქნება, მაგრამ როდესაც გალერეა მუშაობს, მასში გამოჩნდება შესაბამისი ესკიზების დიდი სურათები.

ეს ძირითადად ყველაფერია. ყოველივე ზემოთქმულის კოდი ასე გამოიყურება:

გალერეა jQuery

გალერეა jQuery-ით

ჩემი გალერეა

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

2. ახლა საჭიროა გვერდის სტილისტიკა. ამისათვის შექმენით სტილის ფურცლის ფაილი "style.css" და შეინახეთ იგი იმავე დირექტორიაში, როგორც html დოკუმენტი.

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

სტილის ფურცელი დაკავშირებულია და ახლა დროა დავამატოთ სტილის ყველა ჩვენი ელემენტი. გადადით "style.css" ფაილზე და ჩაწერეთ შემდეგი კოდი:

body(ფონი: rgba(102,102,153,1);) #wrapper (ზღვარი: 0 ავტო; სიგანე: 80%;) სათაური (ტექსტის გასწორება: ცენტრში;). ლოგო (შრიფტი-ოჯახი:Helvetica, sans-serif; font- ზომა: 36 პიქსელი: #DD8D15; ტექსტის ჩრდილი: 2პიქსელი 2პიქს. 2px 2px #333; text-align:center;) #gallery(float:left; width:90px; margin-left:20px; border-right:1px solid #fff;) #gallery img(margin:0 0 10px 0; ეკრანი: inline-block; ;)

აქ ჩვენ დავაყენეთ ფერი ჩვენი გვერდისთვის, დავაყენეთ სიგანე div-ისთვის ID "wrapper"-ით და დავაყენეთ მისი პოზიცია ცენტრში.

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

ჩვენ ვანიჭებთ მარცხენა float, სიგანე, padding და მარჯვენა საზღვარი div-ს იდენტიფიკატორით "gallery".

ესკიზური სურათებისთვის, ჩვენ მათ ასევე ვაძლევთ ჩაღრმავებულ ჩარჩოს და თვისებას „display:inline-block“, რომელიც წარმოქმნის ბლოკის ელემენტს, რომელიც ახვევს ვებგვერდის სხვა ელემენტებს.

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

ახლა თუ განვაახლებთ გვერდს ბრაუზერში, ვნახავთ ამას:

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

შეგიძლიათ ჩამოტვირთოთ jQuery ბიბლიოთეკის ფაილი http://jquery.com/-დან ან გადმოწეროთ ამ სახელმძღვანელოს წყაროებიდან საქაღალდედან სახელწოდებით "js".

საიტიდან ბიბლიოთეკის დასაკავშირებლად ფაილის გადმოსაწერად jquery.comსაჭიროა:

1. დააჭირეთ ღილაკს "ჩამოტვირთვა" საიტის მენიუში.
2. გვერდზე, რომელიც იხსნება, იპოვეთ ბმული "ჩამოტვირთეთ შეკუმშული, წარმოების jQuery 1.10.2" (ბოლო ნომრები ბიბლიოთეკის ვერსიაა, ისინი შეიძლება განსხვავდებოდეს).
3. დააწკაპუნეთ ბმულზე მარჯვენა ღილაკით და აირჩიეთ “Save Target As...”, რის შემდეგაც უნდა აირჩიოთ ადგილი, სადაც გსურთ ფაილის შენახვა.

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

ამის შემდეგ შექმენით ახალი JavaScript ფაილი, დაარქვით „my_script.js“ და ასევე შეინახეთ „js“ საქაღალდეში. ეს ფაილი შეიცავს მთელ ჩვენს კოდს გალერეის გასაშვებად.

მაგრამ სანამ დავწერთ, ეს ორი ფაილი უნდა დავაკავშიროთ ჩვენს html გვერდზე.

ამისათვის კვლავ გადადით "gallery.html" ფაილზე და დახურვის ტეგამდე დაამატეთ შემდეგი ხაზები:

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

4. გახსენით ფაილი "my_script.js" და ჩაწერეთ შემდეგი სტრიქონები:

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

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

$(დოკუმენტი).ready(function() ($("#გალერეა a").click(function(evt)()); ));

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

$(დოკუმენტი).ready(function() ($("#გალერეა a").click(function(evt)( evt.preventDefault(); )); ));

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

პირველ რიგში, ჩვენ ამოვიღებთ დიდი სურათის "href" ატრიბუტს, რომლის მინიატურაზე დააწკაპუნეთ და მოვათავსებთ "imgPath" ცვლადში.

მეორეც, ჩვენ შევქმნით ცვლადს "oldImg", რომელიც შეინახავს დიდ სურათს, რომელიც ამჟამად არის გამოსახულების არეში.

მესამე, ჩვენ შევქმნით ცვლადს “newImg”, რომელშიც შევქმნით img ტეგს ახალი სურათისთვის, რომელიც უნდა გამოჩნდეს გამოსახულების არეში. აქ ჩვენ გვჭირდება "imgPath" ცვლადი, რომელიც შეიცავს ამ სურათის "href" ატრიბუტს.

$(document).ready(function() ( $("#გალერეა a").click(function(evt)( evt.preventDefault(); var imgPath = $(this).attr("href"); var oldImg = $("#photo img");

ჩვენ შევქმენით ყველა საჭირო ცვლადი. რჩება მხოლოდ რაღაცის გაკეთება მათთან ერთად.

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

შემდეგი მოქმედება იქნება ტეგზე ახალი სურათის დამატება იდენტიფიკატორით „ფოტო“ და აქ ფუნქცია შეგვეფერება. prepend(), რომელიც დაამატებს სურათის html კოდს ტეგს, კერძოდ თავიდანვე.

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

$(document).ready(function() ( $("#გალერეა a").click(function(evt)( evt.preventDefault(); var imgPath = $(this).attr("href"); var oldImg = $("#photo img"); $("")");

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

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

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

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

$(document).ready(function() ( $("#გალერეა a").click(function(evt)( evt.preventDefault(); var imgPath = $(this).attr("href"); var oldImg = $("#photo img"); $("") $("#photo")

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

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

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

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

$(document).ready(function() ( $("#გალერეა a").click(function(evt)( evt.preventDefault(); var imgPath = $(this).attr("href"); var oldImg = $("#photo img"); $("") $("#photo") $("#gallery a:first").დააწკაპუნეთ());

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

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

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

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

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

და ამ ნოტაზე მე დაგემშვიდობები.

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

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

მეც გილოცავთ დამდეგ საახალწლო დღესასწაულებს და გისურვებთ მხიარულ დროს!

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

განახლებულია 05/09/2017

ასე რომ, ჩვენ ვუყურებთ, ვირჩევთ და ვიყენებთ მათ, ვინც მოგვწონს ჩვენს პროექტებში:

გალერეფიკი

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

კამერის სლაიდშოუ

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

GalleryView

ლამაზი ფოტო

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

LoopedSlider

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

PhotoNav გამოფენა

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

სახელიდან ირკვევა, რომ ეს სხვა არაფერია, თუ არა სურათების სკალირება პირდაპირ ბრაუზერში Javascript-ის გამოყენებით.

Cover Flow სურათების გალერეა

Cover Flow სურათების გალერეასაინტერესო სურათების გალერეა სლაიდშოუს ელემენტებით AJAX-ის გამოყენებით.

qგალერეა

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

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

გამოსახულების ნაკადი— გალერეა იყენებს Apple-ის Cover Flow ტექნოლოგიას, Safari-ის მცოდნეები ამას გაიგებენ და დააფასებენ. JavaScript ქმნის Cover Flow ეფექტს შესამჩნევი დეფექტების გარეშე. მხარდაჭერილია ნავიგაცია კლავიატურის გამოყენებით (ისრის ღილაკები), მაუსის გადახვევა და სურათის გადათრევა და ჩამოშვება. ლამაზი და ძლიერი პანორამა, ძალიან მაგარი გამოსაყენებლად მათთვის, ვისაც ეს ნამდვილად სჭირდება.

Thickbox პროტოტიპი

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

Imago Ajax სურათების გალერეა

Imago Ajax სურათების გალერეაკიდევ ერთი შესანიშნავი სურათების გალერეა, რომელიც დამზადებულია Javascript-ისა და CSS-ის გამოყენებით. მოგერიდებათ ნახოთ და გააზიაროთ თქვენი ფოტოები Flickr-ზე, SmugMug-ზე ან საკუთარ ვებსაიტზე, Imago დაამუშავებს და აჩვენებს მათ საუკეთესოდ.

მონეტის სლაიდერი

მონეტის სლაიდერი jQuery სლაიდერი უნიკალური გარდამავალი ეფექტებით. მას აქვს მოქნილი კონფიგურაციის პარამეტრები და თავსებადია IE6+, Firefox 2+, Safari 2+, Google Chrome 3+ და Opera 9+. ასევე მშვენივრად მუშაობს iOS და Android-თან.

mooCircle

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

mooFlow

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

სლაიდშოუ 2

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

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

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

RhinoSlider

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

კოსმოსური გალერეა

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

Spry ფოტო გალერეა

Spry Photo Gallery არის შესანიშნავი ფოტო გალერეა სურათების ჩვენების სხვადასხვა გზით, რათა აჩვენოს მომხმარებლებს.

მოცურების ყუთები

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

გვერდით

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

Ფოტო გალერეა

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

სურათების სლაიდშოუ გამჭვირვალე წარწერებით

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

წარმატებები და ყოველივე საუკეთესო.

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

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

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

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

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

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

1. Bootstrap Slider

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

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

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

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

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

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

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

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

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

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

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

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

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

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. ფოტო ბარათი

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

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

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

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

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

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

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

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

42. ბლოგერი

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

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

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

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

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

47. jqFancyTransions