Installing TJPzoom on your site

The basics, your hello world magnifier, low res pic + high res pic, aligning your picture (this file)
Changing the look / behavior of your zoom script (behavior.html)
Turning your zoom script on / off (onoff.html)

The basics

First, you'll need to upload a few files to your site.

The script itself: tjpzoom.js
The drop shadow files: the dropshadow/ directory
If you need it, a test picture. I've attached one, test.jpg

By default, the dropshadow/ directory is in the same directory as your html file. (Like in this tutorial.)

Your hello world magnifier

First, you have to put the following line just before your </head> tag:


<script type="text/javascript" src="tjpzoom.js"></script>

Next, you put in your magnifier tag into your body tag where it belongs:


<div>

<img src="test.jpg" style="width:640px; height: 480px;" onmouseover="TJPzoom(this);">

</div>

It's important that you have to put your image tag into a <div> tag.

Okay, let's copy that code here - I've already included the script before the <head> tag.

Amazing, isn't it? (DRAG UP to zoom in, DRAG RIGHT to increase zoom window!)

Low res pic + high res pic

You may also find the TJPzoom tool useful if you you have a low resolution and a high resolution version of the same picture and it's only the lowres one that fits in your page but you want to show the little details of the highres one. In fact, that's the case with me too, I've got this http://valid.tjp.hu/zoom/collage.jpg, thats 580x580px, but I have a bigger one http://valid.tjp.hu/zoom/collage_2.jpg (with the same proportions). Don't worry, there is a solution for this:


<div>

<img src="http://valid.tjp.hu/zoom/collage.jpg" style="width:640px; height: 480px;" onmouseover="TJPzoom(this, 'http://valid.tjp.hu/zoom/collage_2.jpg');">

</div>

Aligning your picture

Since it's just a picture - only a bit twisted up - you can easily align it to left or right, even to the center! The trick is to align the container div, not the image.


<div style="float:right">

<img src="test.jpg" style="width:640px; height: 480px;" onmouseover="TJPzoom(this);">

</div>

<div style="clear:both"></div>


<div style="float:left">

<img src="test.jpg" style="width:640px; height: 480px;" onmouseover="TJPzoom(this);">

</div>

<div style="clear:both"></div>

Centering is bit trickier. Since one of the major browsers (IE6) doesn't support margin:auto correctly, I advise you to use this workaround. It's nasty, but browsers like it:


<table cellspacing="0" cellpadding="0" border="0"><tr><td width="50%"></td><td>

<img src="<em>test.jpg</em>" style="width:640px; height: 480px;" onmouseover="TJPzoom(this);">

</td><td width="50%"></td></tr></table>

I want to change the behavior / look of the magnifier!

That's the best part. So we opened a new page for it. Continue...