JavaScript / CSS / DOM image zoomer - tjpzoom 2.0
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. This is the new version of my script, tjpzoom. 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.
- Now your zoom window comes with a nice border. (And yes, you can also customize it!)
- Load status indicator (for high resolution pictures)
- Hotspots. Scroll up to the picture above and find the little dog... It won't be that hard I think :)
- Some support for the Opera browser.
- Several bugfixes.
It works with Internet Explorer 6, but sometimes a bit slower than on Firefox.
It works with older Firefox browsers, but without the new border feature. (Did I mention you should get the new Firefox?)
Opera support is better than in the previous version - however, I still don't like the Opera browser.
If you've tried out the script on a new browser, please drop me a mail at valid@tjp.hu and share your experience!
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/zoom2/tjpzoom.js"></script>
</head>
(Or you can save the script to your server and refer to it directly: tjpzoom.js, but check back often to this page for the bugfixes!) 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 - NEW! Until the high resolution picture downloads, you can see a 'Loading...' tooltip at the top left corner.):
I want options. More options.
If you want to change the default zoom amount or the size of the zoom window (or the border size and color), you have to change your code like this:
<script type="text/javascript" src="http://valid.tjp.hu/zoom2/tjpzoom.js"></script>
<script type="text/javascript"><--
var zoomw=160;
var zoomh=120;
var defzoomamount=4;
var zoomborder=3;
var zoomborderoricolor='#000000';
//--></script>
</head>
You can see more options if you take a look at tjpzoom.js.
What is this new hotspot thing? (for advanced users)
On the first picture, you may have noticed that if you move over the little dog, a tooltip appears in the top left corner - and if you click the dog, an alert box appears. You can have the same effect on your page too.You will need the coordinates for the hotspots, the text you want to show when the user hovers and the action when she clicks on the hotspot. You need to put this data to an associative array named hotspots:
hotspots={
'tooltip1': Array(topleft1_x,topleft1_y,bottomright1_x,bottomright1_y,'alert(1)'),
'tooltip2': Array(topleft2_x,topleft2_y,bottomright2_x,bottomright2_y,'http://landingpage.com')
};
For example, in my case, here is my hotspots array:
hotspots={
'little dog - click now!': Array(274,199,306,256,'alert(\'Wondeful, you\\\'ve just found the little dog!\')'),
'Lights': Array(186,12,214,30,'alert(\'You\\\'ve found the lights!\')')
};
WARNING! You will need to correctly escape the apostrophes like above. It's not an easy task. And if you're done with your hotspots array, you just remove the newline characters and modify your code like this:
<div style="float:left" onmouseover="hotspots={'little dog - click now!': Array(274,199,306,256,'alert(\'Wondeful, you\\\'ve just found the little dog!\')'),'Lights': Array(186,12,214,30,'alert(\'You\\\'ve found the lights!\')')}; zoom_on(event,580,435,'http://valid.tjp.hu/zoom2/find_the_dog.jpg');" onmousemove="zoom_move(event);" onmouseout="zoom_off();" onclick="zoom_click();"><img src="http://valid.tjp.hu/zoom2/find_the_dog.jpg" alt="" style="padding:0;margin:0;border:0" /></div>
Naturally you can have as many tooltips on an image as you want. But hey, if it proves to be difficult, start by changing the first example until you get the hang of it! Anyway, if you are an expert and made a great example which shows the capabilities of the script, please drop me a mail! For example it would be a neat tool to make a version of those exit the room games...