Galerie de imagini Ajax. Fotorama - galerie jQuery receptivă, instalare și configurare. Pluginul jQuery CSS3 „Efect de afișare unde”
Galeriile de imagini și glisoarele sunt unele dintre cele mai populare formate jQuery. Datorită acestora, puteți adăuga cantitatea necesară de conținut vizual site-ului dvs., economisind în același timp spațiu valoros.
Galeriile și glisoarele fac pagina mai puțin ocupată, dar vă permit totuși să adăugați toate imaginile de care aveți nevoie pentru a vă transmite mesajul. Acestea vor fi utile în special pentru magazinele online.
În articolul de astăzi, am colectat cele mai bune galerii de imagini și slidere jQuery pentru tine.
Pentru a le instala, trebuie doar să adăugați pluginurile selectate în secțiunea de cap a paginii HTML împreună cu biblioteca jQuery și să le configurați conform documentației (doar câteva rânduri de cod).
Alege care dintre aceste elemente se potrivește perfect în proiectul tău.
1. Slider Bootstrap
Bootstrap Slider este un slider de imagine gratuit, optimizat pentru mobil, cu derulare prin atingere și glisare. Va arăta uimitor pe orice ecran și în orice browser. Puteți încărca imagini, videoclipuri, text, miniaturi și butoane în glisoare.
2. Slider de previzualizare a produsului
Product Preview Slider întruchipează întregul potențial al jQuery și se potrivește perfect în orice interfață. De asemenea, veți fi mulțumit de calitatea și curățenia codului acestui plugin.
3. Galerie de imagini extensibilă
Galeria de imagini extensibilă este un plugin uimitor care se transformă într-o galerie pe ecran complet cu un singur clic. Poate fi folosit pentru secțiunea „Despre noi” sau pentru a vizualiza informații despre produs.
4. Fotorama
Fotorama este un plugin de galerie jQuery receptiv care funcționează atât pentru desktop, cât și pentru desktop. browsere mobile. Oferă o varietate de opțiuni de navigare: miniaturi, defilare, butoane înainte și înapoi, prezentări automate de diapozitive și marcatori.
5. Glisor imersiv
Immersive Slider vă permite să creați o experiență unică de vizionare a diapozitivelor, similară cu glisorul Google TV. Puteți modifica imaginea de fundal pentru a fi neclară pentru a păstra fotografia principală focalizată.
6. Cel puținjs
Leastjs este un plugin jQuery receptiv care vă va ajuta să creați o galerie uimitoare. Când treceți cursorul peste imagine, apare text; când faceți clic, fereastra se extinde la ecran complet.
7. Şablon de panouri glisante
Acest plugin este ideal pentru un portofoliu. Va crea blocuri de imagini dispuse orizontal (vertical pe mici ecrane) la care va fi legat conținutul selectat.
8. Șablon de portofoliu Squeezebox
Squeezebox Portfolio Template oferă efecte de mișcare pentru portofoliul dvs. Când treceți cu mouse-ul peste imaginea principală (sau bloc), apar elemente ancorate.
9. Amestecă imagini
Shuffle Images este un plugin responsiv uimitor care vă permite să creați o galerie cu imagini care se modifică la trecerea cursorului.
10. Plugin jQuery Lightbox gratuit
Pluginul gratuit jQuery Lightbox vă va ajuta să afișați una sau mai multe imagini pe o singură pagină. De asemenea, pot fi mărite și readuse la dimensiunea inițială.
11. PgwSlider – Glisor receptiv pentru jQuery
PgwSlider este un glisor de imagine minimalist. Codul jQuery este ușor, așa că viteza de încărcare a acestui plugin vă va surprinde plăcut.
12. Galerie Polaroiduri împrăștiate
Scattered Polaroid Gallery este un slider uimitor realizat în design plat. Elementele sale se mișcă haotic la schimbarea imaginilor, ceea ce arată uimitor.
13. Filtru de conținut Bouncy
Bouncy Content Filter este o soluție ideală pentru portofolii. Acest plugin permite utilizatorilor să treacă rapid de la o categorie la alta.
14. Slider jQuery simplu
Simplu Slider jQueryîși ridică numele. Acest plugin combină elemente JavaScript, HTML5 și CSS3. Demo-ul implicit permite doar încărcarea textului, dar dacă faceți câteva modificări, puteți adăuga și conținut vizual.
15. Glide JS
Glide JS – simplu, rapid și receptiv Slider jQuery. Este ușor de configurat, iar pluginul nu ocupă mult spațiu.
16. Glisor cu glisare pe ecran complet cu paralaxă
Acest uimitor glisor jQuery cu capacitatea de a încărca imagini și text este potrivit pentru orice site. Va încânta utilizatorii cu un ușor efect de paralaxă și aspect lent al textului.
Am petrecut mult timp alegând subiectul pentru subiectul de astăzi. Drept urmare, am observat că nu am făcut încă selecții cu galerii de imagini. Cred că este un subiect grozav pentru că galerii prezent pe multe site-uri. Sincer, nu sunt toate foarte atractive. Luând în considerare tendințele actuale de dezvoltare jquery, html5 etc. M-am gândit, până la urmă, că trebuie să existe soluții mult mai atractive decât cele pe care le-am întâlnit înainte. Asa de. După ce am petrecut o zi, am reușit să găsim un număr mare de scenarii. Din tot acest munte, am decis să selectez doar, pentru că îmi place, așa cum ați observat deja din postările anterioare.
Galerie de imagini aplicabil nu numai în caz cu albume foto. Scriptul poate fi folosit, cred că ar fi și mai corect, așa cum portofoliu pentru fotografi, designeri etc. Efecte jquery va ajuta să atrageți atenția vizitatorilor și pur și simplu să adăugați eleganță site-ului dvs.
Asa de. Colecție pentru atenția dumneavoastră pluginuri pentru galeria de imagini jquery pentru site.
Nu uitați să comentați și să vă amintiți, pentru a nu pierde această colecție, o puteți adăuga la favorite făcând clic pe steaua din partea de jos a articolului.
CUTIE FOTO
Gratuit, ușor, galerie receptivă imagini, în care toate efectele și tranzițiile sunt realizate folosind css3. Ideal pentru crearea unui site web de portofoliu al unui fotograf.
Galeria S
Atractiv Plugin Jquery galerii de imagini. Animația funcționează folosind css3.
DIAMONDS.JS
Original plugin pentru crearea unei galerii de imagini. Miniaturale au forma romb, în ce acest moment foarte popular. Acest formular este realizat folosind css3. Singurul dezavantaj al acestei galerii este lipsa unei casete luminoase în care fotografia să se deschidă la dimensiune completă. Adică, va trebui să înșurubați pluginul lightbox. Acest script generează o grilă adaptivă de imagini sub forma unui diamant.
Superbox
Galeria de imagini modernă folosind Jquery, css3 și html5. Suntem cu toții obișnuiți cu faptul că atunci când faceți clic pe o previzualizare, imaginea completă se deschide într-o casetă de lumină (fereastră pop-up). Dezvoltatorii acestui plugin au decis că lightbox-ul și-a depășit deja utilitatea. Imaginile din această galerie se deschid sub previzualizare. Urmărește demonstrația și vezi că această soluție pare mult mai modernă.|
Smooth Diagonal Fade Gallery
O galerie de imagini modernă în care previzualizările sunt distribuite pe întreg spațiul ecranului. Scriptul poate scana un folder cu fotografii pe server, adică nu este nevoie să inserați fiecare imagine separat. Doar încărcați imaginile într-un folder de pe server și specificați calea către director în setări. Apoi, scenariul va face totul singur.
Galeria Gamma
O galerie de imagini elegantă, ușoară și receptivă, cu o grilă în stil Pinterest, care a devenit foarte populară în zilele noastre. Scenariul funcționează excelent pe ambele computere desktop, și pe dispozitive mobile cu orice rezoluție de ecran. O soluție excelentă pentru crearea unui portofoliu de designer web.
GRILĂ DE MINIAȚI CU PREVIZUalizare extinsă
Pluginul este grilă de imagine adaptivă. Când dați clic mai jos, vor apărea o fotografie mai mare și o descriere. Bun pentru crearea unui portofoliu.
jGallery
jGallery este galerie de imagini pe ecran complet, receptivă. Efectele, tranzițiile și chiar stilul sunt ușor de personalizat.
Glisse.js
Un plugin simplu, dar foarte eficient pentru galerie de imagini. Aceasta este exact soluția atunci când trebuie să creați un album foto. Pluginul acceptă albume și are un efect de răsturnare foarte cool.
Flux de mozaic
Simplu, adaptiv Galerie de imagini grilă în stil Pinterest.
Galerie
O altă galerie elegantă cu o grilă în stil Pinterest, filtrată pe categorii. Funcționează în browsere: Chrome, Safari, Firefox, Opera, IE7+, browser Android, Chrome mobil, Firefox mobil.
cel puțin.js
Excelent galerie de imagini gratuită folosind JQUERY, 5 și CSS3. Ea are un foarte atractiv aspectși, fără îndoială, va atrage atenția vizitatorilor dvs.
flipLightBox
O simplă galerie de imagini. Când faceți clic pe previzualizare, imaginea completă se deschide într-o casetă lightbox.
Galeria blueimp
Galerie flexibilă. Capabil să emită la fereastra modală nu numai imagini, ci și video. Funcționează excelent pe dispozitivele tactile. Este ușor de personalizat și este posibil să extindeți funcționalitatea folosind plugin-uri suplimentare (vezi următorul plugin).În colecția noastră de scripturi puteți găsi pluginuri mici, dar foarte utile și funcționale pentru site-ul dvs. Revenind la mijloace jQueryGalerie, galerie ușor de organizat fotografii digitale cu un design frumos, cu capacitatea de a derula, mări, vizualiza miniaturi și multe altele funcții utile. Există atât soluții stricte pentru site-uri web profesionale, cât și luminoase cu animație și alte efecte speciale pentru proiecte de divertisment.
Prin mijloace Imagini jQuery poate fi vizualizat fără a reîncărca pagina și fără a crește fluxul de trafic. Pluginurile prezentate vă permit să optimizați încărcarea imaginilor în timp real și să prezentați galeria într-un mod convenabil și ușor de utilizat. Datorită ușurinței setărilor și multor soluții disponibile, propriile dvs galerie foto jQuery acum poți arăta exact așa cum vrei tu. Scripturile prezentate au fost testate pe diferite platforme și au o compatibilitate excelentă.
Astăzi, designul responsive a devenit alegerea numărul unu pentru designeri și dezvoltatori, deoarece tot mai mulți oameni doresc ca site-urile lor web să ruleze pe dispozitive inteligente. Designul responsive atrage atenția utilizatorului mobil și vă ajută să generați clienți potențiali și vânzări care să vă ducă afacerea la un alt nivel.
În zilele noastre, puteți crea un aspect receptiv pentru aproape orice, cum ar fi meniu, grilă, coloană și chiar imagini și imagini. Dacă doriți să afișați conținutul site-ului dvs., imaginile și videoclipurile într-un stil de galerie receptiv, atunci următoarele Pluginuri pentru galeria de imagini jQuery te-ar putea ajuta cu asta.
Acest articol include unele dintre Cele mai bune pluginuri responsive jQuery Image Gallery care nu numai că vă va permite să creați galerii de imagini receptive pentru site-urile dvs. web, ci și să le afișați în stiluri elegante pentru a face site-ul dvs. mai frumos și mai uimitor vizual.
Mai jos este lista cu Cele mai bune pluginuri pentru galerie de imagini jQuery care merită luate în considerare în 2016.
Bootstrap Photo Gallery este un simplu plugin jQuery care va crea o Galerie foto receptivă bazată pe Bootstrap pentru imaginile dvs.
Acest plugin acceptă înălțime variabilă pentru imagini și subtitrări. Este inclusă și o casetă opțională „modală” cu paginarea „următoarea” și „anterioră”.
Demo și descărcare
2. JK Responsive YouTube și galerie de imagini
Este o galerie modernă, în stil lightbox, pentru afișarea de imagini și videoclipuri YouTube pe site-ul dvs. Interfața galeriei este complet receptivă și funcționează frumos pe toate dispozitivele mari sau mici.
Demo și descărcare
3. Faba
FABA este responsive pentru albume și fotografii Facebook galerie jquery plugin care va încărca toate albumele și fotografiile de pe pagina de Facebook selectată.
Există aproximativ 90 de opțiuni pe care le puteți edita și puteți personaliza aproape totul: animații, efecte de hover, fiecare parte a animațiilor de hover, text, comportamente și multe altele. Puteți integra albume frumoase în proiectul sau pagina web.
xGallerify este un plugin de galerie ușor, receptiv, care vă permite să creați galerii de imagini frumoase pentru site-urile dvs. web. Acest plugin este ușor (3 kb dimensiunea fișierului), ușor de utilizat și vine cu o serie de opțiuni și stiluri personalizabile.
Demo și descărcare
Instagram Element este un plugin Instagram premium pentru bloggeri, fotografi, modele și oricine dorește să-și sporească prezența pe Instagram.
Acest plugin este complet receptiv și vă permite să gestionați cu ușurință peste 50 de opțiuni și vă permite să vă afișați frumos fotografiile pe orice dispozitiv.
SnapGallery este un plugin jQuery simplu care transformă o listă urâtă de imagini de dimensiuni diferite într-o galerie frumoasă, personalizabilă, cu o singură linie de JavaScript.
Este complet receptiv, personalizabil și vă permite să selectați distanța dintre imagini, lățimea minimă permisă înainte de stivuire și numărul maxim de coloane, cu mai multe opțiuni pe drum!
Demo și descărcare
Eagle Gallery aceasta este o galerie modernă cu funcționalitate de zoom a imaginii. Pentru a gestiona galeria puteți folosi gesturi sau butoane de control. Aceasta este o galerie complet receptivă care are suport pentru ecran tactil și a fost creată pentru mobil dispozitive, laptopuri și desktop-uri.
Cu această galerie puteți crea cu ușurință o galerie de produse în magazinul dvs. de internet pentru o vizualizare detaliată și o puteți personaliza cu ajutorul opțiunilor.
Galeria Unite este o galerie JavaScript multifuncțională bazată pe biblioteca jQuery. Este construit cu o tehnică modulară, cu mult accent pe ușurința de utilizare și personalizare. Este foarte ușor să personalizați galeria, să-i schimbați skinul prin css și chiar să vă scrieți propria temă. Cu toate acestea, această galerie este foarte puternică, rapidă și are cele mai multe din zilele noastre trebuie să aibă caracteristici precum receptivitatea, activarea atingerii și chiar funcția de zoom, este un efect unic.
Demo și descărcare
jQuery lightGallery este un dispozitiv ușor jQuery lightbox galerie pentru afișarea galeriei de imagini și video.
Lightgallery acceptă navigarea prin atingere și glisare pe dispozitivele cu ecran tactil, precum și tragerea mouse-ului pentru desktopuri. Acest lucru permite utilizatorilor să navigheze între diapozitive fie prin glisare, fie prin glisarea mouse-ului.
Lightgallery vine cu un număr mare de opțiuni, care vă permit să personalizați pluginul foarte ușor. Puteți personaliza cu ușurință aspectul galeriei prin actualizarea variabilelor SASS.
Demo și descărcare
Acesta este un alt plugin excelent pentru galeria de imagini jQuery, care vă permite să creați o galerie de aspect grilă pentru fotografiile și videoclipurile dvs. Acest plugin este complet receptiv și include un număr de funcții precum partajarea socială, derulare infinită, animații css3, filtre și multe altele.
Blueimp Gallery este o galerie de imagini și video, carusel și lightbox activată prin atingere, receptivă și personalizabilă, optimizată atât pentru browsere web mobile, cât și pentru desktop.
Dispune de glisare, navigare prin mouse și tastatură, efecte de tranziție, funcționalitate de prezentare de diapozitive, suport pe ecran complet și încărcare de conținut la cerere și poate fi extins pentru a afișa tipuri de conținut suplimentare.
Demo și descărcare
nanoGALLERY este o galerie de imagini cu atingere activată și receptivă, cu aspect justificat, în cascadă și grilă. Acceptă imagini găzduite de sine stătătoare și trage în albume foto Flickr, Picasa, Google+ și SmugMug.
Dispunând de navigare pe mai multe niveluri în albume, efecte combinabile de trecere cu mouse-ul pe miniaturi, dimensiuni receptive ale miniaturilor, mai multe aspecte, prezentare de diapozitive, ecran complet, paginare, încărcare leneșă a imaginii și multe altele.
Demo și descărcare
flipGallery este o galerie foto gratuită bazată pe jQuery, cu tranziții elegante între miniaturi și măriri ale casetei de lumină. Alte caracteristici includ fluxul dinamic de imagini, paginarea automată, decuparea automată și suprapunerea transparentă a imaginii.
Acest plugin are, de asemenea, o versiune premium care vine cu câteva funcții ingenioase și cu siguranță include receptivitate.
Demo și descărcare
Fancy Gallery este un plugin responsiv pentru galeria de imagini jQuery, care vă permite să vă afișați imaginile și videoclipurile în stil elegant. Acest plugin are o mulțime de opțiuni de personalizare și puteți adăuga albume, videoclipuri, imagini nelimitate și multe altele.
Pluginul vine cu diferite efecte de hover pentru miniaturi și titluri, care pot fi, de asemenea, ajustate. Puteți alege între 7 teme de culoare predefinite sau puteți să vă creați cu ușurință propria temă de culoare.
Balanced Gallery este un plugin jQuery care distribuie uniform fotografiile pe rânduri sau coloane, profitând la maximum de spațiul oferit. Fotografiile sunt scalate în funcție de dimensiunea elementului „container” în mod implicit, făcând din Balanced Gallery o alegere bună pentru site-urile web receptive.
Demo și descărcare
16. Galeria S
S Gallery folosește API-ul Full Screen HTML5 și se bazează în mare măsură pe bunătatea animațiilor CSS3 și transformările CSS3, așa că va funcționa numai în browsere care acceptă aceste funcții.
Demo și descărcare
17. Galeria Ultimate Grid Responsive
Acesta este un HTML | CSS | JQuery Grid cu o casetă luminoasă, puteți specifica miniaturi pentru grilă și când faceți clic pe ea pentru a deschide caseta luminoasă va încărca imaginea normală, puteți specifica textul pentru legendă și pentru caseta luminoasă. De asemenea, nu trebuie să încărcați toate imaginile simultan (pentru scopuri de performanță), astfel încât să puteți specifica numărul de imagini de încărcat atunci când se încarcă prima dată și numărul de imagini de încărcat atunci când faceți clic pe butonul „Încărcați mai multe imagini”.
Responsive Thumbnail Gallery este un plugin jQuery pentru crearea de galerii de imagini care să se adapteze la containerul lor.
Demo și descărcare
SuperBox este un plugin jQuery care duce întreaga „imagine” și „lightbox” cu un pas mai departe, reducând dependența de JavaScript și de încărcare a imaginii pentru a face lightboxing-ul să treacă de domeniul trecutului! Folosind atribute HTML5 data-*, machete receptive și jQuery.
SuperBox face minuni ca o galerie de imagini statice, pe care o puteți face clic pentru a dezvălui o versiune completă a imaginii.
Demo și descărcare
Galeria Ultimate Thumbnail este un plugin de galerie de imagini complet receptiv, disponibil în două tipuri de aspect (grilă și linie, verticală și orizontală), cu derulare (jScrollPane) sau navigare prin butoane. Casetele cu miniaturi acceptă orice element HTML din interiorul lor.
În acest tutorial vă voi arăta cum să creați un minimalist, dar în același timp convenabil și funcțional galerie foto pe jQuery, sau o galerie de imagini, după cum doriți. Galeria are capacitatea de a crea categorii, urmate de filtrare. De asemenea, este posibil să lansați o prezentare de diapozitive. Galeria funcționează în toate browserele, așa că nu vor fi probleme de adaptare.
Două biblioteci gratuite vor fi folosite pentru a crea această galerie JQuery: nisipuri mișcătoareȘi Fotografie draguta. Ele fac crearea unei galerii mult mai ușoară. Ca întotdeauna, puteți vedea rezultatul muncii pe pagina demo și, de asemenea, puteți descărca arhiva din galeria de lucru și gata fișiere sursă. Singurul dezavantaj, ca să spunem așa, este crearea manuală a miniaturilor pentru imagini mari. Și în orice altceva asta Galerie demn de atentie.
SURSE
Marcaj HTML
Mai întâi, să ne uităm la panoul cu o listă de categorii, aceasta este listă cu puncte ul. Mai mult, fiecare element de listă trebuie să aibă un nume de clasă unic.
- Categorii:
- Toate
- Categoria 1
- Categoria 2
- Categoria 3
- Categoria 4
Numele imaginii
După cum am menționat mai sus, elementele din listă sunt imagini din galerie. Fiecare element de listă include componente. Aceasta este imaginea în sine, sau mai degrabă miniatura ei, precum și o descriere. Miniatura este un link către imaginea principală. Atributul rel este necesar pentru a apela javascript și a deschide imaginea principală.
Nu uitați și de 2 lucruri importante: elementul li list trebuie să aibă un atribut unic data-id. Atributul data-type conține clasa categorie, a cărei listă am descris-o mai sus. Totul pare să fie legat de marcaj.
Stiluri CSS
Nu mă voi concentra în mod special pe stiluri, deoarece folosim o bibliotecă gata făcută Fotografie draguta, care este responsabil pentru mărirea imaginii, și cod css suficient. Cu toate acestea, merită remarcat faptul că există 5 opțiuni pentru proiectarea unei imagini mărite, deși în mod ideal doar 3, deoarece în două opțiuni este eliminată doar rotunjirea.
Prin urmare, voi arăta doar Stiluri CSS pentru miniaturi și o listă de categorii.
Portofoliu-categ ( margin-bottom:30px; )
.portfolio-categli (
display:inline;
margine-dreapta:10px;
}
.bloc-imagine(
display:bloc;
poziție: relativă;
}
.image-block img (
chenar: 1px solid #d5d5d5;
chenar-rază: 4px 4px 4px 4px;
fundal:#FFFFFF;
umplutură: 10px;
}
.image-block img:hover (
chenar: 1px solid #A9CF54;
box-shadow:0 0 5px #A9CF54;
}
.portfolio-area li (
plutește la stânga;
marjă: 0 12px 20px 0;
preaplin: ascuns;
latime: 245px;
umplutură: 5px;
}
.home-portfolio-text ( margin-top:10px; )
li.active a ( text-decoration:subliniere; )
În principiu, totul ar trebui să fie clar cu stiluri. Pentru a alinia categoriile, proprietatea de afișare este setată la inline . Pentru a da un efect de contur imaginii, setați culoarea de fundal (albă) și umplutura la 10 pixeli. Dimensiunile articolelor din listă sunt stabilite în .portfolio-area li .
jQuery
Și, în sfârșit, cel mai important lucru este pentru ce este toată lecția. Acesta este codul jQuery. Să începem prin a filtra imaginile după categorie.
// Selectează tot elemente copil portofoliu-area și scrieți-o într-o variabilă
var $date = $(".portfolio-area").clone();
$(".portfolio-categ li").click(function(e) (
$(".filter li").removeClass("activ");
Var filterClass=$(this).attr("clasa").split(" ").slice(-1);
Dacă (filterClass == „toate”) (
var $filteredData = $data.find(".portfolio-item2");
) altfel (
var $filteredData = $data.find(".portfolio-item2");
}
$(".portfolio-area").quicksand($filteredData, (
durata: 600,
reglare înălțime: „auto”
), funcția () (
LightboxPhoto();
});
$(this).addClass(„activ”);
returnează fals;
});
Folosind metoda clone() și un selector, selectăm toate elementele copil din .portfolio-area și le scriem în variabila $data. În continuare, urmărim clicul pe una dintre categorii, elementul li al listei cu clasa .portfolio-categ . Facem inactive toate categoriile eliminând removeClass(„activ”), dacă acest lucru nu se face, atunci în timp toate categoriile vor fi active și filtrarea se va opri.
Din moment ce facem clic pe un element listă, acest selector conține un element list, adică li , din acesta luăm valoarea atributului class și folosind metoda split împărțim numele clasei în mai multe părți, chenarul este un spațiu (adică, dacă clasa a fost „toate active”, atunci după împărțire obținem o matrice de „toate” și „active”). Apoi, folosind metoda slice, selectăm primul element al matricei (în cazul nostru, „toate”) și scriem rezultatul rezultat în variabila filterClass. Dacă nu există spațiu, numele clasei nu se va schimba.
Apoi, verificăm dacă variabila filterClass conține șirul toate, apoi folosind metoda .find selectăm toate elementele cu clasa portfolio-item2 din matricea $data, pe care am considerat-o mai sus. Elementele selectate (și acestea sunt toate elementele listei, adică toate imaginile) sunt plasate în variabila filteredData.
În caz contrar, dacă filterClass nu este egal toate, atunci nu vom plasa toate elementele listei în variabila filterData, ci doar pe acelea al căror atribut data-type se potrivește cu clasa categoriei. Pe scurt, elemente dintr-o singură categorie.
Și în cele din urmă trecem variabila rezultată în bibliotecă jquery nisipuri mișcătoare, care filtrează imaginile. Asta e pentru filtrare.
Acum, în ceea ce privește mărirea imaginii în fereastra pop-up. Totul este mult mai simplu aici.
JQuery(„a”).prettyPhoto((
animationSpeed: „rapid”,
prezentare de diapozitive: 5000,
tema: "facebook",
show_title: fals,
overlay_gallery: false
});
Este urmărit un clic pe un link al cărui atribut rel începe cu prettyPhoto. Apoi intră în joc biblioteca fotografie draguta, iar imaginea se mărește ca prin minune. Apropo, trecem și mai mulți parametri. Cum ar fi viteza de animație este rapidă, întârzierea prezentării de diapozitive este de 5 secunde, tema de design Facebook (sunt 5 teme în total, acestea sunt situate în folderul imagini/prettyPhoto) și interzicem, de asemenea, afișarea numelui imaginii și mărirea imaginii când treceți mouse-ul.