Terrys Playpen: confusing

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

Saturday, 12 May 2007

Cecilia asked about placing copyright information below a picture, possibly in a different font and colour so that it did not merge with the text of the post. My response was that she should highlight the copyright text and then select to 'center' it after choosing the 'font', its 'color' and its 'size'.

She managed this pretty easily when she elected to have the photograph showing in the middle of the page; the copyright caption just became another line of text, centred under the photograph! But when she tried that with a pic aligned to the left of the text, everything went 'pear-shaped'. And I suspect that exactly the same problem will occur if the pic is aligned to the right of the text.

Hmmmmm! Time to revisit the problem.

---------------------------------------------------------------------------------

an original landscape by Cecilia Mercado

Much research of Blogger Help lines uncovered the fact that the new Blogger engine does NOT support captioning of pictures so, to get the effect, one has to 'fiddle' with the template HTML and the post AFTER you've uploaded the picture and saved the post, as a Draft, so that you can return to it and edit the HTML. No need to throw your hands up in horror. It really is a simple exercise!

In the next post I will walk you through the procedure. However, until I have managed to get comprehensive screenshots of each step I will try not to post anything that ends up confusing the reader. I will also try to add 'plain-text' code that needs to replace what Blogger produces so that you can literally copy/paste the 'edits'.

Stay tuned!

Top Menu

Saturday, 8 August 2009

TIP - MoJoZoom

Saturday, 12 May 2007

TIP - Copyright . . . (for Cecilia's picture © info)