Hozzon létre egy képgalériát egy diavetítés effektussal a jquery könyvtár használatával

Hozzon létre egy képgalériát diavetítés effektussal a jQuery könyvtár használatával

Élő példa a képgaléria (script gallery.js) munkájáról, amelyet alább talál. Jelenleg 10 különböző fotó van, de tetszőleges számú fényképet készíthet, ez rajtad áll. A Smolensk szülővárosában készítettem képeket. Nézzük tehát a képgaléria munkáját:

Mind a főablakban, mind a miniatűrök panelben vannak gombok a fényképek elforgatásához. Ezenkívül a bal oldali vagy jobb oldali navigációs gombokkal vezérelheti a személyi keresést a számítógép billentyűzetén. A diabemutatót a billentyűzet S gombjával lehet elindítani vagy leállítani.

A galéria telepítéséhez be kell töltenie a jQuery bővítményeket. Ehhez töltse le az archívumot. Az archívumban van egy példa a könyvtárfájl munkájáról: index.html. ha valami nem érti ezt a leckét, akkor mindig láthatja a forrás forráskódját.

Szóval, csomagolja ki a letöltött archívumot. Hisszük, hogy az összes fájl van a gyökér mappában, de tegye az összes fájlt akkor egy tetszőleges mappába a helyén, de ne felejtsük el, hogy regisztrálja a helyes utat, hogy a fájlokat.

Fájlok: jquery-1.6.2.min.js. gallery.js. gallery.css a jQuery könyvtár. plug-in galéria és stíluslap. Helyezze ezeket a fájlokat a webhely gyökérmappájába. Az archívum összes képfájljait is helyezze a gyökérkönyvtárba. A képfájlok természetesen sajátak.

Ez egy szabványos kapcsolódás a szkriptekhez és a CSS-stíluslapokhoz, ugyanakkor itt aktiváljuk a képgaléria elindításának funkcióját.

Galéria megjelenítése egy weboldalon (címkék között és ), illessze be a 2. jegyzék kódját a megfelelő helyen.

Itt érkezik először a galéria kimeneti blokkjának díszítésének szokásos stílusa, majd felsorolja a diavetítésben használt összes fotót. A 2. listában szereplő kódméret csökkentéséhez csak az első 3 kép jelenik meg. Amint láthatja, a lista a megszokott rendezetlen listán megy. A számozás nulláról indul: class = "image0"

További fotók és miniatűrök hozzáadásával egyszerűen hozzáadjuk a fogvatartottak blokkját a címkékhez

a 2. listában szereplő kódban. Ennek megfelelően az új fájlok nevének megváltoztatásával: (Teljes kép), és a img src = "dnepr_mini.jpg" (miniatűr) és az azt követő számozás: class = "Kép0".

Megjegyzés: Az összes indexképnek ugyanolyan magasságúnak és lehetőleg egy szélességnek kell lennie, a "nagyméretű" képek nem haladhatják meg a weblap főablakának méretét.

A galéria további beállítása a plugin kódban (file gallery.js) végezhető el. Itt a következő beállítások állnak rendelkezésre:

Szeretem mindent a plug-in és a galéria munkájában, de van egy kellemetlen mínusz. Észrevette, hogy a felirat Start. Állj. sek. A fotók angolul készültek. Ha webhelye használja a charset = UTF-8 kódolást. akkor ezeket a feliratokat oroszul írhatod (írd Start, Stop, másodperc PHOTO). Ez a gallery.js fájlban történik.

De ha a webhely használja a kódolás charset = windows-1251 (mint én), akkor a legjobb játszani a biztonságos és ezeket a szavakat angol karaktereket, vagy néha hibák léphetnek fel formájában „halandzsa”, hogy egyet fog érteni a nem túl szép.

Ez tényleg minden. Amint láthatja, minden nagyon egyszerű és minden közönséges böngészőben működik.

Töltse le a forrás archívumot.

Olvassa el a többi anyagot is.

Hogyan módosíthatom a DNS-kiszolgálót a tartományból?

Hogyan lehet valódi üzleti modellt létrehozni?

Nagyítás és kicsinyítés a jQuery segítségével.

A domain név gyakorlatilag regisztrálása.

HTML leckék

CSS leckék

Cikkek

műszerek

Webhelysablonok

könyvek

díszítés

Weboldal az A-tól Z-ig

Keressen pénzt online

Csalás az interneten

Munkavédelem

MODULÁRIS FESTÉSEK

PHP TANULMÁNYOK

A szolgáltatások

szkriptek

SEO

jQuery

A munkakörülmények különleges értékelése (SOT) - AWP

Internetes fizetési rendszerek

A PHOTOSHOP LEHETŐSÉGEI

Titkos rész

Velünk készítsünk egy weboldalt
még egy gyerek is!
"Weboldal az A-tól Z-ig"
További információ >>>

Szeretne pénzt keresni?
2 Urovnevaja
Partnerprogram!
Csatlakozz most.

Moduláris kép: A vörösbársony luxusja

Moduláris absztrakció: a nap energiája

Moduláris kép: kék rózsák

Moduláris kép: Vízesés

Moduláris kép: Orchideák

Domainregisztráció

LLC "PC" LuxStroy "

Ha tetszik
webhelyünk telepítése
Linkünk. és
Ajándékokat kap.