Thumb betöltése másik divbe(richi4100)
Cloud Zoom
Galéria normál beállításokkal
Vigye rá a egeret nagy képre, hogy a nagy kép jelölt része jobb oldalon (ezen szöveg fölött), a "zoom ablakban" jelenjen meg!
Ha rákattint az alsó bélyegképek valamelyikére, akkor az "kis kép" ablakban jelenik meg.
A bélyegképek, "kis kép" és "zoom kép" megjelenését a "main.css" fájlban lehet változtatni.
Az eredeti kód ki lett egészítve "bélyegkép" lapozással.
Az következő böngészőkkel tesztelve: Firefox, Chrome, Opera, Safari.
Egyszerű integráció, alapvetően valid HTML, sima zoom mozgás, galéria mód.
Árnyékolás, lágy fókusz és belső zoom funkció.
A kód szabadon hozzáférhető, ingyenes.
Színárnyalatok
Meghatározható a "kis kép"-et lefedő szín. A lefedő szín és átlátszósága teljes mértékben testre szabható. A példa esetében piros, 50%-os.
Ebben a példában a mozgás késleltetése is be van beállítva, így a "zoom kép" késletetett mozgást végez.
Belső zoom
A "zoom kép" elhelyezhető a "kis kép"-ben is, mely akkor hasznos, ha a zoommolt kép nem fedhet más tartalmat.
Lágy fókusz
Itt egy finomabb, lágy fókusz hatás van beállítva a "kis kép"-re.
Ebben a példában, a "zoom kép" helye egy DIV elemben van megadva, amelyet bárhova lehet pozícionálni. A mozgás késleltetése úgy van beállítva, hogy egy alacsonyabb érték egy pattanósabb, élénkebb hatást eredményezzen.
Beállítható paraméterek, melyek a rel attribútumként adhatóak meg az id="zoom01" elemnek.
| Attribútum | Mértékegység | Magyarázat |
|---|---|---|
| zoomWidth | pixel |
A "zoom ablak" szélessége, pixelben. Amennyiben ez hiányzik, a szélessége ugyanaz lesz, mint a "kis kép"-nek. |
| zoomHeight | pixel |
A "zoom ablak" magassága, pixelben. Amennyiben ez hiányzik, a magassága ugyanaz lesz, mint a "kis kép"-nek. |
| position |
Alapértelmezett érték "right" . Meghatározza a "zoom ablak" helyzetét a kis képhez képest. Megengedett értékek "left", "right", "top", "bottom", "inside", vagy megadható egy html elem id-je, hogy abba helyezze a "zoom ablak"-ot. |
|
| adjustX | pixel |
Alapértelmezett érték 0. Segítségével pixelre pontosan meghatározható a "zoom ablak" X-helyzete. |
| adjustY | pixel |
Alapértelmezett érték 0. Segítségével pixelre pontosan meghatározható a "zoom ablak" Y-helyzete. |
| tint | #aa00aa |
Meghatározza azt a színt, amely lefedi a "kis kép"-et. A színt hexadecimális formában szükséges megadni, például "#aa00aa". Ha a softFocus true, akkor ez a beállítás korlátozottan fog működni. |
| tintOpacity |
Átlátszóság. Alapértelmezett érték 0.5. A "0" teljesen átlátszó, az "1" nem átlátszó. |
|
| softFocus | true/false |
Egy lágy "elmosás effektet" alkalmaz a "kis kép"-re. Ha true értéket adunk, akkor a tint beállítás korlátozottan fog működni. |
| smoothMove |
Alapértelmezett érték 3. A megadott értéktől függően változik a mozgás késleltetése a "zoom ablak"-ban. Minél nagyobb az érték, annál nagyobb a késleltetés. Ha az érték 1, nincs késleltetés. |
|
| lensOpacity |
Lencse területének átlátszósága. Alapértelmezett érték 0,5. A "0" teljesen átlátszó, az "1" nem átlátszó. |
|
| showTitle | true/false |
Megmutatja a kép címét a "zoom ablak"-ban. |
| titleOpacity |
Alapértelmezett érték 0.5. Megadja az átlátszóságát a címnek, ha engedélyezve van. A "0" teljesen átlátszó, az "1" nem átlátszó. |