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

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

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

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

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

Bootstrap Photo Gallery არის jQuery მოდული, რომელიც შექმნის Bootstrap Photo Gallery-ს თქვენი სურათებისთვის.
ეს მოდული მხარს უჭერს ცვლადი სიმაღლეს სურათებისა და წარწერებისთვის. ასევე შედის ოფცია „მოდალური“ ველი „შემდეგი“ და „წინა“ პეიჯინგით.
დემო & ჩამოტვირთვა

2. JK Responsive YouTube და Image Gallery


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

3. ფაბა


FABA არის ყველაზე პოპულარული Facebook ალბომებისა და ფოტოების გალერეის jquery დანამატი, რომელიც ჩატვირთავს ყველა ალბომს და ფოტოს შერჩეული Facebook გვერდიდან.

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


xGallerify არის მსუბუქი, საპასუხო გალერეის მოდული, რომელიც საშუალებას გაძლევთ შექმნათ დიდი სურათების გალერეები თქვენი ვებსაიტებისთვის. Tsey მოდული მსუბუქი წონაა (ფაილის ზომა 3 კბ), Dosit vikoristuvati i komi კონფიგურირებადი ვარიანტებისა და სტილის რაოდენობით.
დემო & ჩამოტვირთვა


Instagram Element არის პრემიუმ ინსტაგრამის დანამატი ბლოგერებისთვის, ფოტოგრაფებისთვის, მოდელებისთვის და ყველასთვის, ვინც ცდილობს გაზარდოს თავისი ყოფნა ინსტაგრამზე.
ეს მოდული არის სრულად ყოვლისმომცველი და გაძლევთ საშუალებას მართოთ 50+ ვარიანტი და ვარიანტი და ლამაზად იმუშაოთ თქვენს ფოტოებთან ნებისმიერ მოწყობილობაზე.


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

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


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

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


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


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

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

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


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


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

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


nanoGALLERY ¢ შეხებით ჩართული და რეაგირებადი სურათების გალერეა გამართლებული, კასკადური და ბადის განლაგებით. ეს მხარდაჭერილია თვით ჰოსტირებული სურათებით და Flickr, Picasa, Google+ და SmugMug ფოტო ალბომების ამოღებით.

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


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

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


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

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


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

16. S გალერეა


S Gallery მხარდაჭერილია HTML5-ის სრული ეკრანის API-ით და ასევე ეყრდნობა CSS3 ანიმაციის სიკეთეს და CSS3 ტრანსფორმაციას, რომელიც იმუშავებს მხოლოდ ბრაუზერებში, რომლებიც მხარს უჭერენ ამ ფუნქციებს.
დემო & ჩამოტვირთვა

17. Ultimate Grid Responsive Gallery


ეს არის HTML | CSS | JQuery Grid Lightbox-ით, შეგიძლიათ სწრაფად დააყენოთ მოწყობილობები ქინძისთავისთვის და როდესაც დააწკაპუნებთ მასზე ლაითბოქსის გასახსნელად, ის ჩატვირთავს ნორმალურ სურათს, შეგიძლიათ სწრაფად დააყენოთ ტექსტი წარწერებისთვის და ლაითბოქსისთვის. ასევე, თქვენ არ შეგიძლიათ აირჩიოთ ყველა სურათი ერთზე (პროდუქტიულობისთვის), მაგრამ შეგიძლიათ სწრაფად შეიყვანოთ სურათის რაოდენობა, რათა აირჩიოთ ელემენტის პირველი რაოდენობა, ასევე იმ სურათების რაოდენობა, რომლებიც უნდა აირჩიოთ და შემდეგ დააწკაპუნეთ ღილაკი "მეტი სურათის ჩატვირთვა".


Responsive Thumbnail Gallery არის jQuery მოდული სურათების გალერეების შესაქმნელად, რომლებიც მიედინება თქვენს თაღში.
დემო & ჩამოტვირთვა


SuperBox ¢ jQuery დანამატი, რომელიც არის „იმიჯი“ და „ლაითბოქსი“ მოკლედ, რაც ამცირებს JavaScript-ს და გამოსახულების დატვირთვის დამოკიდებულებას, რათა ლაითბოქსი წარსულს ჩაბარდეს! დამატებითი დახმარებისთვის, HTML5 data-* ატრიბუტები, საპასუხო განლაგება და jQuery.

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


Ultimate Thumbnail Gallery არის სრულად საპასუხო სურათების გალერეის მოდული მოყვება განლაგების 2 ტიპს (ბადე და ხაზი, ვერტიკალური და ჰორიზონტალური), scroll (jScrollPane) ან ღილაკების ნავიგაცია. მინიატურების ყუთები მხარს უჭერს ნებისმიერ HTML ელემენტს მათ შიგნით.

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

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

HTML განლაგება

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

1
2
3
4
5
6
7
8

<ul class = "პორტფოლიო-კატეგის ფილტრი" >
<li >კატეგორიები:</li>
<li class = "ყველა აქტიური" > ყველა</a>
<li class = "cat-item-1" > კატეგორია 1</a>
<li class = "cat-item-2" > კატეგორია 2</a>
<li class = "cat-item-3" > კატეგორია 3</a>
<li class = "cat-item-4" > კატეგორია 4</a>
</ul>

1
2
3
4
5
6
7
8
9
10
11


    		•

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

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

    CSS სტილები

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

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28

    პორტფოლიო-კატეგი (ზღვარი-ქვედა: 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 (ტექსტი-გაფორმება: ხაზგასმა;)

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

    jQuery

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23

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

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

    var filterClass= $(this ) .attr ("კლასი") .split("") .slice(-1) [0];

    if (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(“active”) ოფცია, რათა არავის შეაწუხოთ, მაშინ ყველა კატეგორია გააქტიურდება და ფილტრაცია შეჩერდება.

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

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

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

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

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

    1
    2
    3
    4
    5
    6
    7

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

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

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

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

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

    შაბათ-კვირა

    HTML განლაგება

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


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

    • ყველა

    • კატეგორია 1

    • კატეგორია 2

    • კატეგორია 3

    • კატეგორია 4







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




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

    ასევე არ დაგავიწყდეთ 2 მნიშვნელოვანი სიტყვა, სიის ელემენტი ან 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 (ტექსტის გაფორმება: ხაზგასმული;)

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

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

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

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

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

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

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

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

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

    თქვენ შეგიძლიათ იპოვოთ მაგალითი აქ:

    მოზიდვა

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

    HTML ნაწილი

    ახლა თქვენ უნდა ჩართოთ jQuery ბიბლიოთეკა, რათა გამოიყენოთ Flipping Gallery მოდული ტეგებს შორის :

    1 2 3 4 5 6 <თავი > ... <"http://code.jquery.com/jquery-1.9.1.js"> <სკრიპტის ტიპი = "ტექსტი/ჯავასკრიპტი" src = "http://code.jquery.com/jquery.flipping_gallery.js"> ... </თავი>

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

    1 2 3 4 5 6 7 8 <div class = "გალერეა" > <a href = "#" > <a href = "#" > <a href = "#" > <a href = "#" > <a href = "#" > ... </div>

    და სურათის აღწერილობის დასამატებლად (როგორც დემო 4 და 5) თქვენ უნდა აირჩიოთ ატრიბუტი მონაცემთა წარწერა:

    1 2 3 4 5 6 7 8 <div class = "გალერეა" > <a href = "#" data-caption = "დუჟე" > <a href = "#" data-caption = "შესანიშნავი" > <a href = "#" data-caption = "გალერეა" > <a href = "#" data-caption = "დამატებითი დახმარებისთვის" > <a href = "#" data-caption = "Flipping" > ... </div>

    JS ნაწილი

    1 2 3 4 5 6 7 8 9 $.

    მოდით შევხედოთ რას ნიშნავს კანის მეთოდი:

    • მიმართულება- მეთოდი, რომელიც განსაზღვრავს, თუ როგორ გამოჩნდება სურათები. თუ ის წინ არის, მაშინ სურათები თავიდანვე განთავსდება ბოლოს, თუ უკან - საპირისპიროდ. მნიშვნელობა დაყენებულია წინ.
    • სელექტორი- სელექტორი, რომელი სურათის არჩევისთვის, რომელიც შეიძლება შეიცვალოს თითოეული სურათისთვის.
    • ინტერვალი- ადგენს მიდგომას სურათებს შორის პერსპექტივაში.
    • შოუმაქსიმუმი— ადგენს სურათების რაოდენობას, რომლებიც შეიძლება გამოყენებულ იქნას სანახავად. თქვენ შეგიძლიათ აირჩიოთ 100 სურათის ნახვა, მაგრამ ნაჩვენები იქნება მხოლოდ პირველი 15, რაც მარტივია და არ აწუხებს ბრაუზერს.
    • enableScroll- შეგიძლიათ შეხედოთ სურათს მაუსის საჭეს მიღმა.
    • flipDirection- ეს მიუთითებს სად წავა სურათი: "მარცხნივ" - მარცხნივ, "მარჯვნივ" - მარჯვნივ, "ზემოდან" - ზევით და "ქვემოდან" - ქვევით. ჩაცმის შემდეგ ქვევით ჩადის.
    • ავტომატური ჩართვა- ავტოსტარტის გალერეა. შემდეგ ის დაყენებულია მილიწამებში. რამდენი დრო სჭირდება სურათების შეცვლას?

    ვისნოვოკი

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

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

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

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

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

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

    1. Bootstrap Slider

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

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

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

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

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

    4. ფოტორამა

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

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

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

    6. უმცირესი

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

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

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

    8. Squeezebox Portfolio შაბლონი

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

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

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

    10. უფასო jQuery Lightbox Plugin

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

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

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

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

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

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

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

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

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

    15. Glide JS

    Glide JS არის მარტივი, გლუვი და ჭკვიანი jQuery სლაიდერი. მისი დაყენება მარტივია, მაგრამ დანამატი დიდ ადგილს არ იკავებს.

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

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

    აპლიკაცია © 2022 მობილური და კომპიუტერული გაჯეტები