Képgalériában webhelyén (jquery)
Képgalériában webhelyén (jQuery)
Ebben a leírásban megmutatom, hogyan lehet létrehozni egy online galéria a képek a webhely látogatói kattintva az áttekintő kép látható, minden kép kinagyított képe. És nem az oldal újratöltődik! Képek jelennek meg automatikusan a Fade!
Mi lesz az oldalon területe az áttekintő képgalériák és olyan terület, ahol megjelenik a kép kinagyított. Bármelyikére kattintva a képekre, a látogató fogja látni a megfelelő nagy kép ezen a területen. A kép jelenik meg egy ideig, ami az animációs hatást, és az előző kép lesz ebben az időben, hogy feloldódjon.
Megbirkózni egy ilyen feladat elég egyszerű, ha alkalmazzuk a jQuery könyvtár jellemzői. Ily módon fogunk tenni veled.
De mielőtt írsz Java Script kódot kell menni valamilyen előkészítő lépéseket.
Először is, el kell készíteni a képet. Mi lesz kétféle képek: miniatűrök és a nagy képek. Csináltam egy mappát «img», amely létrehozta a másik 2 mappa: «nagy» és «kis». A «nagy» mappát mentettem nagy képeket (I mindet közel azonos méretű szélessége és magassága, valahol 500px, hogy 500px). A mappában «kis» vannak miniatúrák ugyanazon képek (méretük is közel azonos. Ha beszélek, az azt jelenti, hogy az 2-3 pixel különbség nem játszik nagy jelentőséget).
Használhatja a képemet hogy letölt egy fájlt a forrásból, vagy hozzon létre ugyanazt a mappaszerkezetet, és tegye vissza a kép, ami már saját galériában.
Másodszor, létre kell hoznunk a html-fájl, hozzon létre benne oldal elrendezése a galériánkban, és csatlakozzon a fájl css-fájl (style sheet).
Nézzük most ezt.
Most mi írjuk a fájl tartalmát.
Két tag «testet» tárolja a div «wrapper» azonosítót. Ez tartalmazza majd két fő eleme: fejléccímkét, amelyet található fejléc és div id «tartalom», amelyet található összes galéria.
Div «tartalom» div tartalmazza az azonosítót «fő», amelyet pont a kép; div id «galéria», ahol a miniatűr kép a mi és a másik div id «kép». Div id «kép» amíg ki nem ürül, de a galéria az ő nagy képeket megfelelő miniatűrök jelenik meg.
Itt általában minden. a fenti kód a következőképpen néz ki:
Galéria jQuery