jquery პორტფოლიოს გალერეა. Fotorama - ადაპტური jQuery გალერეა, დაინსტალირებული და მორგებული. პორტფელის დანერგვა jQuery გალერეის გამოყენებით

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

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

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

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

გამოქვეყნებულია: 2012 წ

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

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

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

ძირითადი უპირატესობები (+)

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

მინუსები (-)

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

პირველი კავშირის ვარიანტი

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

ჩვენ ვამოწმებთ 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"> სკრიპტი >
ჩვენ მოიცავს fotorama.css და fotorama.js.ჩადეთ შეურაცხმყოფელი კოდი ტეგებს შორის і WordPress-ზე თქვენ უნდა გამოიყენოთ თემის სათაურის ფაილი (header.php). "http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css" rel = "სტილის ფურცელი" >
На этом подключение галереи первым способом окончено. Как использовать написано в разделе "Непосредственно создание галереи".

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

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

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

უცენტრო გალერეა

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

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

c class="fotorama" .

ეს ასე გამოიყურება:

ან ასე (ნომერაცია პოზილან ნეობოიაზკოვა):

1 3 4

გამოიყენეთ რამდენიმე შესწორება Fotorama

კონტეინერის ზომები

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

გაეცანით სხვა კორექტირებას:

Data-width="98%" // width data-ratio="800/600" // Spread of sides data-minwidth="420" // xv. სიგანე data-maxwidth="900" // მაქს. სიგანე data-minheight = "320" // xv. სიმაღლე data-maxheight="100% // მაქსიმალური სიმაღლე data-height="100% // მაქსიმალური სიმაღლე

მინიატურები

ესკიზებისთვის შეგიძლიათ იხილოთ data-nav="thumbs"

თუმცა, ეს მეთოდი არ არის ძალიან ეფექტური, რადგან სკრიპტმა დაუყოვნებლივ უნდა შემოიტანოს ყველა ფოტოსურათი მინიატურების გენერირებისთვის, მაშინ უფრო რაციონალურია მომავალში სურათების მცირე ასლების მომზადება. WordPress ავტომატურად გამოიმუშავებს ესკიზებს და ჩვენ მათ ვიკორიზირებთ. ესკიზის ასარჩევად ფაილის სახელს დაამატეთ -70x70 (https://site/wp-content/uploads/2017/11/27ltl9eRXk.jpg → https://site/wp-content/uploads/2017/11/27ltl9eRXk-70x70.jpg).

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

HTML კოდი + ფოტომასალა

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

ჩვენება / მიმართვა

გადადით კალმზე ooppwb by Ivanov Klim (@DreamerKlim) CodePen-ზე.

გადადით Ivanov Klim-ის (@DreamerKlim) Pen aVEEV-ზე CodePen-ზე.

Სრული ეკრანის რეჟიმი

data-allowfullscreen="true" //ბრაუზერის ფანჯარაში data-allowfullscreen="native" //მთელ მონიტორზე

შესაძლებელია ოკრემის დამატება დიდი სურათიამისთვის სრული ეკრანის რეჟიმიმონაცემთა სრული საშუალებით:

წინააღმდეგ შემთხვევაში

data-autoplay= "true" //autoplay data-autoplay="3000" //სლაიდებს შორის ინტერვალი ms-ში data-caption = "ერთი" // კომენტარები სურათებამდე data-keyboard = "true" // ნავიგაცია ისრებითმონაცემთა შერწყმა = „ჭეშმარიტი“ //მრავალფეროვნების გამოსახულებები data-navposition= "ზემო" // ესკიზები ზემოთ data-loop= „ჭეშმარიტი“ //ციკლური გადახვევაშევეცადოთ დავაკავშიროთ ყველაფერი და დავამატოთ ვიდეო

data-caption = "One" data-keyboard = "true" data-shuffle = "true" data-navposition = "top" data-autoplay = "true" data-loop = "true">

"რა კომენტარი 1">

"რა კომენტარი 2"> სანამ საყვარელ საქმეს იპოვი

1. პორტფელის დანერგვა დამატებითი jQuery გალერეის გამოყენებით

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

2. პორტფელის საიტის სუპერ დანერგვა CSS და jQuery-ის გამოყენებით

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

3. პორტფელის კედელი jQuery-ზე

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

4. jQuery გვერდების გლუვი გადახვევა

ვერტიკალური და ჰორიზონტალური გადახვევის განხორციელება.

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

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

6. ცალმხრივი პორტფელის საიტი

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

7. ბლოკის ჩვენების ტიპის გადართვა jQuery-ზე

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

8. შაბლონი რესტორნის ვებსაიტისთვის jQuery გალერეით და Google რუქით

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

9. Plasm The Wall მოდული

ფოტოების ან HTML ბლოკებისგან საკუთარი „კედლების“ შესაქმნელად, რომლებიც შეგიძლიათ გადაიტანოთ ეკრანზე მაუსის საშუალებით ფიქსირებულ ზონაში.

10. დანამატი ელემენტების ფსონის მიხედვით საჩვენებლად

ჩვენება სხვადასხვა ელემენტების მხარეს მოცემული დიამეტრის ფსონის მიხედვით.

11. ნაკბენის მხარე „როზრობცის ვებგვერდი“

გვერდზე შეგიძლიათ გაგზავნოთ ელ.წერილი იმ მისამართზე, რომელიც დარეგისტრირდება მონაცემთა ბაზაში და სადაც შეგიძლიათ გაგზავნოთ შეტყობინებები საიტის გახსნის შესახებ. მხარეს ასევე ამშვენებს პატარა სლაიდშოუ, რომელიც განხორციელებულია jQuery მოდულის Nivo Slider v. 2.3.

12. QuickFlip 2 მოდული

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

13. JQuery დააწკაპუნეთ რუკაზე

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

რეალიზაცია cute ეკრანის კლავიატურა. ბევრი არ გჭირდება.

15. jQuery Sticky Notes

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

16. რეიტინგი jQuery-ზე

17. HoverAttribute

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

18. jQuery Fancy captcha რეგისტრაციის ფორმისთვის

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

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

20. ტრანსფერი. jQuery მოდული „jTextTranslate“

მოდული იყენებს Google Language API-ს და შეუძლია ტექსტის თარგმნა ნებისმიერ ენაზე, რომელსაც Google ეძებს. თარგმნისთვის, თქვენ უნდა დააჭიროთ აბზაცის გვერდით არსებულ ხატულას და სიიდან აირჩიოთ ენა, რომლის თარგმნაც გსურთ.

21. jQuery დანამატი გვერდითი ნავიგაციისთვის

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

22. jQuery მოდული „Notatki“

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

23. jQuery მოდული „Catch404“

24. jQuery მოდული jBreadCrumb

მოდული ანიმაციური ნავიგაციის ლანგრის შესაქმნელად "Bread Cry"

25. მოდული „Reel“

26. jQuery მოდული „Dance Floor“

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

27. jQuery მოდული „3D მარკირება“

28. მოცულობის CSS ღილაკები

29. გვერდის ანიმაციური ჰორიზონტალური გადახვევა

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

30. jQuery მოდული „რეიტინგული სისტემა“

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

31. jQuery Panel Magic

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

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

32. ინტერესის მაჩვენებელი Mootools-ზე, მოდული „MoogressBar“

მიზიდულობის ეფექტური მაჩვენებელი.

33. Mootools მოდული „CwComplete“

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

34. ძლიერი ajax ჩატი დაფუძნებული jQuery-სა და CSS3-ზე

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

35. გვერდის „პროექტის გამოწერა“ განხორციელება.

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

36. ხმის მიცემის/ავტორიზაციის განხორციელება დამატებითი PHP-ისა და jQuery-ის გამოყენებით

37. ხმის მიცემა Ajax "TinyEditor"-ზე

ტესტირების ფრთხილად განხორციელება საიტზე. Vicky ტექნოლოგიები: JQuery, Ajax, PHP და MySQL.

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

მარტივი კომენტარის სისტემა Ajax-ის გამოყენებით შეყვანილი ინფორმაციის სისწორის შემოწმებით. კომენტარები ინახება მონაცემთა ბაზაში. დანერგილია დამატებითი დახმარებით: PHP, MySQL, CSS, jQuery.

40. ექიმი ძალიან აინტერესებს საქმეს

41. შენიშვნები გვერდზე PHP ვიკით

Wikoristan ტექნოლოგიები: PHP, jQuery, CSS.

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

43. jQuery საიტის ძებნა Google-ის ვიკი ტექნოლოგიის გამოყენებით

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

44. jQuery გადაფარვის ეფექტი სურათზე

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

45. „კვება-ვიდეო“ გვერდის დანერგვა jQuery-ის გამოყენებით

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

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

47. შეცვალეთ ფერი და ტექსტი jQuery-ის გამოყენებით

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

48. საიტის გზამკვლევი jQuery ვიკიებით

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

49. ვირტუალური ტური "Joyride Kit" ვებგვერდით

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

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

1. Bootstrap Slider

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

პოპულარული