JavaScript / CSS / DOM képnövesztő
Van ám már újabb!
TJPzoom 3
Mi ez?
Amint az talán az ábráról is látszik, egy olyan segédeszköz, ami közelebb hozza a képeket. Ha az egeredet a kép fölött mozgatod, akkor megmutatja a kép megfelelő részletét. De még tud ilyet is:
- Ha megnyomod a FEL gombot a billentyűzeteden, akkor növekedik a nagyítás mértéke,
- ha megnyomod a LE gombot, akkor csökken a nagyítás mértéke,
- ha megnyomod a JOBBRA gombot, akkor nagyobb ablakban nézheted a nagyítást,
- végül ha megnyomod a BALRA gombot, akkor kisebb ablakban nézheted a nagyítást.
Internet Explorer 6, Firefox és Opera 8 böngészőkön láttam működni.
Új! A visszajelzések alapján Safari böngészővel sincsen gond.
Ilyet én is akarok!
Mi sem egyszerűbb, csak egy pár sort kell elhelyezned a honlapodban / blogodban. Először is, meg kell keresned a következő sort:
</head>
Ha megvan, egészítsd ki a következőre:
<script type="text/javascript" src="http://valid.tjp.hu/zoom/tjpzoom.js"></script>
</head>
(Ha értesz hozzá, elmentheted a scriptet és hivatkozhatsz rá közvetlenül:
tjpzoom.js, de nem biztos, hogy ezzel jársz a legjobban.) Ha megvan a fenti módosítás, akkor jöhet a kép! Szükséged lesz a képed helyére, valamint a kép szélességére és magasságára.
<div style="float:left" onmouseover="zoom_on(event,kép szélessége,kép magassága,'kép helye');" onmousemove="zoom_move(event);" onmouseout="zoom_off();"><img src="kép helye" alt="tjpzoom kep cime" style="padding:0;margin:0;border:0" /></div>
<div style="clear:both;"></div>
Például, ha a képed helye
http://tjp.hu/barakk/images/200201152147.jpg,
300 képpont széles és
239 képpont magas, akkor ezt rakod bele a kódodba:
<div style="float:left" onmouseover="zoom_on(event,300,239,'http://tjp.hu/barakk/images/200201152147.jpg');" onmousemove="zoom_move(event);" onmouseout="zoom_off();"><img src="http://tjp.hu/barakk/images/200201152147.jpg" alt="tjpzoom kep cime" style="padding:0;margin:0;border:0" /></div>
<div style="clear:both;"></div>
Ezt bárhova berakhatod, én például ennek a mondatnak a végére teszem:
Az is előfordulhat, hogy egy képből van egy kicsi és egy nagy változatod. A nagy nem férne el a blogodban, a kicsi meg nem elég részletes. Mondjuk ilyen nekem is van: a kicsi ez: http://valid.tjp.hu/zoom/collage.jpg, ez 580x580 képpont méretű, de még van egy http://valid.tjp.hu/zoom/collage_2.jpg nevű képem is, ami ugyanez a kép (ugyanolyan képarányokkal), nagyobb változatban. Erre is van megoldás:
<div style="float:left" onmouseover="zoom_on(event,KIS kép szélessége,KIS kép magassága,'KIS kép helye', 'NAGY kép helye');" onmousemove="zoom_move(event);" onmouseout="zoom_off();"><img src="KIS kép helye" alt="tjpzoom kep cime" style="padding:0;margin:0;border:0" /></div>
<div style="clear:both;"></div>
Tehát az én esetemben:
<div style="float:left" onmouseover="zoom_on(event,580,580,'http://valid.tjp.hu/zoom/collage.jpg', 'http://valid.tjp.hu/zoom/collage_2.jpg');" onmousemove="zoom_move(event);" onmouseout="zoom_off();"><img src="http://valid.tjp.hu/zoom/collage.jpg" alt="tjpzoom kep cime" style="padding:0;margin:0;border:0" /></div>
<div style="clear:both;"></div>
A nagy kép méretével nem kell törődnöm. Hát, be is másolom (Azért ez egy nagyon nagy kép, lehet, hogy várni kell egy kicsit rá):
Még! Lehetőségeket!
Ha az alap zoom mértékét vagy a néző ablakocska kezdőmértetét szeretnéd megváltoztatni, így egészítsd ki a kódodat:
<script type="text/javascript" src="http://valid.tjp.hu/zoom/tjpzoom.js"></script>
<script type="text/javascript"><--
var zoomw=160;
var zoomh=120;
var defzoomamount=4;
//--></script>
</head>
További lehetőségeket találsz, ha értesz hozzá és felütöd a tjpzoom.js-t.
Valami nem működik!
Elképzelhető. Ha valami nem úgy működik, ahogy itt le van írva, akkor küldd el a problémás oldal címét a
valid@tjp.hu címre, hátha meg lehet javítani.
És akkor ezt így vihetem?
Persze. Viszont ha jófej vagy, és valószínűleg az vagy, akkor hivatkozol a blogodon / honlapodon a forrásodra, ami a
http://valid.tjp.hu/zoom. Ha módosítod vagy bővíted a kódot, akkor bennehagyod, hogy ki csinálta az eredetit. Sok órát dolgoztam ezzel az izével, úgyhogy biztosan megérted, miért kérem ezeket. (Pénz! Paripa!)
