Terrys Playpen: TIP

Saturday, 8 August 2009

TIP - MoJoZoom

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 ...

4 comments:

Thumbelina said...: Plenty of '80's in there Terry not to mention one or two of your naughty snaps!
Very handy little tool. Still pointing people to your blog, especially re the WLW.

Not finding much time to myself right now so will prob take a long loooong break, but please do pass on to Maria too that I am still eternally grateful for the help you both gave with that holiday, and for the journey you made to meet us. We will meet up again someday. Next visit to Portugal is via Lisboa. :); 18 August 2009 at 10:11
Fletch said...: Sheeeesh, you must have spent a bit of time looking at that cover, Cath. But it is fun to do.

Give us a bit of notice before you descend on us for your next trip to Portugal. A day or two will do! Both, Maria and I, will look forward to hosting you.

Don't stay away from Blogland for too long. Your audience awaits - impatiently!; 18 August 2009 at 12:34
aims said...: I like this one better - especially with Mr. McMahon in there - waving!

Lovely - I think I recognize Thumbelina as well?; 15 November 2009 at 06:41
Fletch said...: Well spotted Aims. I think you are the first to spot the bloggers I've inserted.

Yes, David is in the back row. Shrinky, Cath and Janine appear below him. Shrinky's 'Sweet Sam' appears lower down, and I've even been bold enough to put me in there with my birds.

All good fun - and it keeps me off the streets!; 15 November 2009 at 17:07

Top Menu

Saturday, 8 August 2009

TIP - MoJoZoom

4 comments: