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ó.