Terrys Playpen: Saturday, 8 August 2009

Here we go. I've collected all the bits of code, and the explanations, so it shouldn't cause you any headaches incorporating this stuff on your site.

Please remember that there are other 'zoomer' scripts available, but I've chosen 'MojoZoom' over the others for a variety of reasons:

Easier to install
Easy to configure
Fits limited Blogger window space
JavaScript and CSS files hosted by me

You are going to add stuff to your template, so ...

BACKUP ... BACKUP ... BACKUP!

1. Find ...

<b:skin><![CDATA[/*

Add the following (copy/paste) just above it ...

<link href='http://www.tapmal.com/playpen/mojozoom/mojozoom.css' 
rel='stylesheet' type='text/css'/>

2. Find ...

</head>

<body>

Add the following (copy/paste) just above it ...

<script src='http://www.tapmal.com/playpen/mojozoom/mojozoom.js' 
type='text/javascript'/>

These two bits of information will let your HTML know where to go to fetch the JS and CSS information when you include it in your post. Please note that both point to a folder on which I host the Playpen so, as long as the Playpen exists, you will always be able to call up the information. I am not planning to go anywhere soon!

3. Select the image you want to display. Make sure it is of a reasonable size, preferably no less than 800 x 600 pixels. This will ensure that the zoomed image, when you mouse-over the smaller image, will be instantly viewable as an enlarged replica.

4. Open your image in IrfanView or a similar photo-editing programme and reduce the image size to approximately 200 pixels in width. Let the programme automatically adjust the height. Now save the smaller version as a 'new' (renamed) image.

5. Upload your images to Blogger or via 'Windows Live Writer' (I've used the former for this example). Here is the code returned by Blogger for the large image:

And here is the code returned for the smaller one:

 

The bits you are interested in are the bits in RED, completely ignoring the rest of the blogger code, but DO NOT forget to delete the bit that says ...

s1600-h/

... which I have demonstrated by striking it out in the example.

Nearly done.

6. Now for the post itself. Not difficult if you copy/paste all the code and substitute your own image 'links' for the ones I've used for my pic!

 

Some points to note about the code above:

As mentioned, my pic links are highlighted in red and will need to be substituted with your own pic links. Just ensure that you insert the SMALL pic FIRST and the LARGE pic SECOND.
I have set the width and height parameters (picked out in blue) to 175 to accommodate the width of this particular template's post window. Your mileage may vary, so try slightly larger or smaller sizes if things don't work out from the get-go.
You have to give the pics an ID (purple). Use a short name that is meaningful to you.
I have set the parameter zoomalwaysshow to "false" (in brown) so that a window isn't displayed until the small image is moused-over. You can set this to "true" if you prefer to have the zoom window displayed at all times.

Now I shall demonstrate what a brave little hacker I am (drum roll, please) by copy/pasting that code above into the 'Source' window of WLW to make 100% sure that if you do the same thing the sky won't fall in on you ...

"By Jove, I think he's got it!"

BTW, if you think this album cover is the same as the one in the previous post, take a CLOSER look. You should at least be able to spot Bill Clinton and Osama amongst quite a few other surprise 'faces', including one or two blogger friends!

That's it.

If it doesn't work first time, don't despair. Compare the various bits of code carefully to make sure that you got everything as you should have. If you still have problems, come back and ask. I am always ready to help!

Can't say fairer than that ...

Top Menu

Saturday, 8 August 2009

TIP - MoJoZoom