Galerie de imagini pe site-ul dvs. (jQuery)
În această lecție vă voi arăta cum să creați o galerie de imagini interactivă pentru site-ul dvs., astfel încât vizitatorii, făcând clic pe miniaturile imaginilor, să poată vedea fiecare imagine într-o vizualizare mărită. Și nu reîncărcați pagina! Imaginile apar automat cu efect de manifestare treptată!
Vom avea o zonă cu miniaturi ale imaginilor galeriei și o zonă în care vom arăta imaginea la scară mărită. Dând clic pe oricare dintre miniaturi, vizitatorul va vedea imaginea mare corespunzătoare din această zonă. Imaginea va apărea de ceva timp, creând un efect de animație, iar imaginea anterioară se va dizolva în acest moment.
A face față unei astfel de sarcini este destul de ușoară, dacă utilizați capacitățile bibliotecii jQuery. Asta vom face cu tine.
Dar, înainte de a scrie Java Script, trebuie să facem niște pași pregătitori.
În primul rând, trebuie să pregătiți imagini. Vom avea două tipuri de imagini: miniaturi și imagini mari. Am creat dosarul "img", în care am creat încă două dosare: "mare" și "mic". În dosarul "mare" am salvat imagini mari (le am pe toate cu aceeași dimensiune în lățime și înălțime, undeva 500px la 500px). În dosarul "mic" există miniaturi ale acelorași imagini (dimensiunile lor ar trebui să fie, de asemenea, aproximativ aceleași.) Când spun, înseamnă că diferența de 2-3 pixeli nu contează prea mult).
Puteți utiliza imaginile mele descărcând fișiere din surse sau creând aceeași structură de directoare și plasându-vă imaginile acolo, creând propria dvs. galerie.
În al doilea rând, trebuie să creați un fișier html, să creați un marcaj de pagină în el cu galeria noastră și să atașați un fișier css (foaie de stil) acestui fișier.
Să o facem acum.
Acum scrieți conținutul acestui fișier.
Între etichetele "corp" va exista un div cu identificatorul "wrapper". Acesta va conține 2 elemente principale: eticheta antetului, în care va fi un titlu și un div cu identificatorul "conținut", în care va fi localizată întreaga noastră galerie.
Div "conținutul" va conține o div cu identificatorul "principal", care va conține titlul pentru galerie; div cu identificatorul "galerie", unde sunt localizate miniaturile imaginilor noastre și un alt div cu identificatorul "fotografie". Div cu id "foto" va fi gol până acum, dar când galeria este difuzată, vor fi afișate imagini mari ale miniaturilor corespunzătoare.
Asta-i totul. Codul pentru toate cele de mai sus va arata astfel:
Galerie pe jQuery
Articole similare
Trimiteți-le prietenilor: