JavaScript / CSS / DOM image magnifier
A new version is here!
TJPzoom 3 is here with some cool new features :).
What is this?
As you may have realized, this is a tool that brings images closer. If you move your mouse over the picture, you can see a little zoom window with a magnified version of a part of the picture in it. But there is more:- If you press the UP key on your keyboard, the zoom ratio increases,
- if you press the DOWN key, the zoom ratio decreases,
- if you press the RIGHT key, the zoom window increases,
- and finally, if you press the LEFT key, the zoom window decreases.
I want this on my homepage!
It's a piece of cake. You just have to put some lines of code in the source code of your blog / website. First of all, you have to find the following line:
</head>
If you got it, change it to:
<script type="text/javascript" src="http://valid.tjp.hu/zoom/tjpzoom.js"></script>
</head>
(If you are tech savvy, you can save the script to your server and refer to it directly: tjpzoom.js, but it may not be the best solution.) If you are done with the changes mentioned above, we can move on to the picture itself. You will need the url address, the width and height of your picture.
<div style="float:left" onmouseover="zoom_on(event,pic width,pic height,'pic url');" onmousemove="zoom_move(event);" onmouseout="zoom_off();"><img src="pic url" alt="tjpzoom picture title" style="padding:0;margin:0;border:0" /></div>
<div style="clear:both;"></div>
For example, if your picture's url is http://tjp.hu/barakk/images/200201152147.jpg, it spans 300 pixels horizontally and 239 pixels vertically, you insert the following code snippet in your code:
<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 picture title" style="padding:0;margin:0;border:0" /></div>
<div style="clear:both;"></div>
You can put this snippet anywhere in your blog. Let's put it at the end of this sentence:
<div style="float:left" onmouseover="zoom_on(event,SMALL pic width,SMALL pic height,'SMALL pic url', 'BIG pic url');" onmousemove="zoom_move(event);" onmouseout="zoom_off();"><img src="SMALL pic url" alt="tjpzoom picture title" style="padding:0;margin:0;border:0" /></div>
<div style="clear:both;"></div>
So in my case:
<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 picture title" style="padding:0;margin:0;border:0" /></div>
<div style="clear:both;"></div>
I don't have to take care about the proportions of the big picture. (Anyway, this is a very big picture, it may take some time to download):
I want options. More options.
If you want to change the default zoom amount or the size of the zoom window, you have to change your code like this:
<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>
You can see more options if you take a look at tjpzoom.js.