გალერეა jquery-ში პორტფოლიოსთვის. jQuery დანამატების მუდმივად განახლებული მონაცემთა ბაზა ფოტო, ვიდეო და მედია გალერეებისთვის. ხელსაწყოები ლამაზი სურათების შესაქმნელად CSS ფილტრების გამოყენებით. Mootools მოდული "CwComplete"

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

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

ჩამოტვირთვა

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

HTML ნაწილი

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

1 2 3 4 5 6

<თავი > ... <"http://code.jquery.com/jquery-1.9.1.js"> <სკრიპტის ტიპი = "text/javascript" src= "http://code.jquery.com/jquery.flipping_gallery.js"> ... </თავი>

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

1 2 3 4 5 6 7 8

<div class="gallery"> <href="#"> <href="#"> <href="#"> <href="#"> <href="#"> ... </div>

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

1 2 3 4 5 6 7 8

<div class="gallery"> <a href = "#" data-caption= "ძალიან" > <a href = "#" data-caption= "cool" > <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- განსაზღვრავს, სად დაიძვრება სურათი: "მარცხნივ" - მარცხნივ, "მარჯვნივ" - მარჯვნივ, "ზემოდან" - ზემოთ და "ქვემოდან" - ქვევით. ნაგულისხმევად, ის სრიალებს ქვემოთ.
• ავტომატური ჩართვა- გალერეა autorun. მითითებულია მილიწამებში, ე.ი. რამდენი დრო დასჭირდება სურათების შეცვლას?

დასკვნა

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

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

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

წყაროები

HTML მარკირება

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

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


• ყველა


• კატეგორია 1


• კატეგორია 2


• კატეგორია 3


• კატეგორია 4

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

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

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

CSS სტილები

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

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

პორტფოლიო-კატეგი (ზღვარი-ქვედა: 30 პიქსელი; )
.portfolio-categ li(
ჩვენება: 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;
გადინება: დამალული;
სიგანე: 245 პიქსელი
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("active") ამოღებით, თუ ეს არ გაკეთებულა, დროთა განმავლობაში ყველა კატეგორია გააქტიურდება და ფილტრაცია შეჩერდება.

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

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

ფოტო ყუთი

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

S გალერეა

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

DIAMONDS.JS

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

სუპერბოქსი

თანამედროვე სურათების გალერეა გამოყენებით jquery, css3 და html5. ჩვენ ყველა მიჩვეული ვართ იმ ფაქტს, რომ როდესაც თქვენ დააჭირეთ გადახედვას, სრული სურათი იხსნება ლაითბოქსში (pop-up ფანჯარა). ამ მოდულის შემქმნელებმა გადაწყვიტეს, რომ ლაითბოქსმა უკვე გადააჭარბა მის სარგებლობას. ამ გალერეის სურათები იხსნება გადახედვის ქვემოთ. შეამოწმეთ დემო ვერსია და ნახეთ, როგორ გამოიყურება ეს გამოსავალი ბევრად უფრო თანამედროვე.
|

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

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

გამა გალერეა

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

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

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

jGallery

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

Glisse.js

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

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

მარტივი, ადაპტირებული სურათების გალერეა Pinterest სტილის ბადით.

გალერეა

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

სულ მცირე.js

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

flipLightBox

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

blueimp გალერეა

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

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

მთავარი პლიუსები (+)

1. Სიმარტივეინსტალაცია, კონფიგურაცია და გამოყენება. jQuery-ს გარდა, დაგჭირდებათ მოიცავს მხოლოდ 2 ფაილსდა გალერეის საჩვენებლად, თქვენ უნდა მიუთითოთ მხოლოდ სურათების ბმულები.
2. ოდნავ მოქმედებს სიჩქარესაიტის ჩატვირთვა.
3. ადაპტირება. თქვენი გალერეა კარგად გამოიყურება თქვენს ტელეფონზე, ლეპტოპზე და ტელევიზორის ეკრანზეც კი.
4. პარამეტრების და ფუნქციების სიმრავლე,დაკავშირებულია ცალკე, HTML ტეგების ატრიბუტების მეშვეობით.
5. სენსორული მოწყობილობების მხარდაჭერა.
6. მხარდაჭერა ვიდეო.
7. შესაძლებლობა ზარმაცი დატვირთვასურათები.
8. და ბევრი, ბევრი სხვა რამ, რაც მოეწონება დახვეწილ მომხმარებელს.

მინუსები (-)

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

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

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

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

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

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

   <სკრიპტი src= "http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> სკრიპტი>
2. ჩვენ მოიცავს fotorama.css და fotorama.js.ჩასვით შემდეგი კოდი ტეგებს შორის და, WordPress-ზე ეს კეთდება თემის სათაურის ფაილში (header.php). "http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css" rel="stylesheet">
3. На этом подключение галереи первым способом окончено. Как использовать написано в разделе "Непосредственно создание галереи".

Второй вариант подключения [шорткод + Autoptimize]

В этом варианте подключения файлы скрипта будут выводиться только на нужных страницах через [шорткод ]. А если вы используете плагин Autoptimize, то код скрипта в придачу интегрироваться в файлы темы. Эти нехитрые манипуляции должны увеличить скорость загрузки сайта.

1. Проверяем наличие jQuery. Так же как и в первом варианте, смотрите выше.
2. Скачиваем файлы фоторамы → распаковываем → загружаем в отдельную папку в корне сайта.
3. Для создания шорткода в файл функций темы (functions.php) вставляем код, расположенный ниже, изменяем ссылки к файлам на свои..js"> "; ) add_shortcode("ფოტო","სდ");
4. ახლა, როდესაც წერთ სტატიას, ჩაწერეთ მოკლე კოდი ბოლოს

გალერეის უშუალო შექმნა

გალერეა გამოსახულია HTML კოდის გამოყენებით კონტეინერი