Creați o galerie de imagini cu efect de diapozitive utilizând biblioteca jQuery
Un exemplu live al lucrării din galeria de imagini (script gallery.js) pe care o vedeți mai jos. Există 10 fotografii diferite aici, dar poți face orice număr de fotografii, depinde de tine. Am folosit fotografii din orașul meu natal din Smolensk. Deci, haideți să ne uităm la lucrările galeriei de imagini:
Atât în fereastra principală, cât și în panoul miniatural există butoane pentru transformarea fotografiilor. În plus, puteți controla paginarea prin tastatura computerului utilizând butoanele de navigare Stânga sau Dreapta. Puteți porni sau opri prezentarea prin apăsarea butonului S de pe tastatură.
Pentru a instala galeria, trebuie să încărcați pluginurile jQuery. Pentru a face acest lucru, descărcați arhiva. În arhivă există un exemplu de lucru al fișierului bibliotecii: index.html. dacă ceva nu înțelege în această lecție, puteți vedea întotdeauna codul sursă al scriptului.
Deci, despachetați arhiva descărcată. Noi credem că toate fișierele vă aflați în folderul rădăcină, dar a pus toate fișierele pe care le puteți în orice dosar al site-ului, dar nu uitați să înregistreze calea corectă a fișierelor.
Fișiere: jquery-1.6.2.min.js. gallery.js. gallery.css este biblioteca jQuery. galeria plug-in și foaia de stil. Puneți aceste fișiere în dosarul rădăcină al site-ului dvs. De asemenea, puneți toate fișierele de imagini din arhivă în dosarul rădăcină. Fișierele de fotografii pe care le veți avea, bineînțeles, au propriile lor.
Aceasta este o conexiune standard a scripturilor și a foilor de stil CSS în cascadă, în același timp activând funcția de lansare a galeriei de imagini.
Pentru a afișa o galerie pe o pagină Web (între etichete
și ), introduceți codul listei 2 în locul potrivit.
Aici vine mai întâi stilul obișnuit de decorare a blocului de ieșire al galeriei și apoi listarea tuturor fotografiilor utilizate în prezentarea de diapozitive. Pentru a reduce dimensiunea codului din listare 2, sunt afișate numai primele 3 fotografii. După cum vedeți, listele se înscriu în lista obișnuită neordonată. Numerotarea începe de la zero: class = "image0"
Adăugarea de fotografii și miniaturi suplimentare se face prin simpla adăugare a unui bloc de prizonieri la etichete
în codul listei 2. În consecință, odată cu schimbarea numelui fișierelor noi: (Imagine completă), și img src = "dnepr_mini.jpg" (în miniatură) și numerotarea ulterioară: class = "image0".
Notă: Toate imaginile miniatură trebuie să aibă aceeași înălțime și, de preferință, o lățime, iar imaginile "mari" să nu depășească dimensiunea ferestrei principale a paginii Web.
Setarea suplimentară a galeriei poate fi făcută în codul pluginului (file gallery.js). Aici avem următoarele setări:
Îmi place totul în activitatea acestui plug-in și galeria de alegeri, dar există un minus neplăcut. Ai observat că inscripția Start. Stop. sek. Fotografiile sunt făcute în limba engleză. Dacă site-ul dvs. utilizează codarea charset = UTF-8. atunci puteți scrie aceste inscripții în limba rusă (scrie Start, Stop, secțiunea PHOTO). Acest lucru se face în fișierul gallery.js.
Dar, dacă site-ul dvs. utilizează codificarea charset = Windows 1251 (ca mine), cel mai bine este să-l joace în condiții de siguranță și a scrie aceste cuvinte caractere englezești sau erori, uneori, pot apărea sub formă de „păsărească“, care va fi de acord, nu este foarte frumos.
Asta-i totul. După cum puteți vedea, totul este simplu și funcționează în toate browserele obișnuite.
Descărcați arhiva sursă.
Citiți și alte materiale.
Cum schimb serverul DNS din Domeniu?
Cum de a crea un model real de afaceri?
Măriți și micșorați cu jQuery.
Cum să înregistrați practic un nume de domeniu.
Lecții HTML
CSS lecții
Articole
instrumente
Șabloane de site web
cărți
ornamentare
Site web de la A la Z
Câștigați bani online
Înșelăciune pe Internet
Protecția muncii
MARIURI MODULARE
PHP LECTII
Serviciile
script-uri
SEO
jQuery
Evaluarea specială a condițiilor de muncă (SOT) - AWP
Sisteme de plăți pe internet
ÎNVĂȚĂMÂNTUL FOTOSHOPULUI
Secțiunea secretă
Cu noi facem un site web
chiar și un copil poate!
"Website de la A la Z"
Aflați mai multe >>>
Vrei să câștigi bani?
2 Urovnevaja
Program de afiliere!
Alăturați-vă acum.
Imagine modulară: luxul roșu de catifea
Modular Abstraction: Energia soarelui
Imagine modulară: Trandafiri albi
Imagine modulară: Cascadă
Imagine modulară: Orhideele
Inregistrare domeniu
OOO "PC" LuxStroy "
Dacă doriți
site-ul nostru, instalați
Linkul nostru. și
Primiți cadouri.
Trimiteți-le prietenilor: