MoshuBlog.com

Welcome back! I hope you enjoyed your previous visits. Let me know how can I help you to find what you were looking for. Don't forget to download the Best 7 WP Tutorials in this ebook.

A while ago there was a thread in the WP forum about something called CSS Zoom and how to apply it to WordPress blogs. It works like you can see on my demo blog.

I have to admit I have never heard about the CSS Zoom before and don’t remember ever visiting that site of a fellow Canadian, Scott Kimler. You can go directly to the description of the technique PZ3 (PhotoZoom v. 3) and you will find there all you need to copy/paste into your style.css. Of course, you can adapt the colours to fit in the colour scheme of your own theme.

You can also just copy and paste the HTML code from the site above into your posts or Pages. Warning: read further only if you don’t use the wysiwyg/visual editor monster of WP. It is not installed on my blogs and I don’t know if it works with that terrible thing…

As you can easily see the HTML code has 3 parts:
- before the image code

<div class="PZ3zoom PZ3-r Bdr Cap Lnk" style="width:210px; height:137px;"><a href="http://randsco.com/blank.html" onclick="return false">

In this one you set the size of the thumbs you want to show.

- the image code itself (as img src etc.)
This one you should insert simply using the Upload > Browse > Send to editor routin in your Write subpanel. Note: Use the “not linked” and “using original” options!

- after the image code

<span class="PZ31cap" style="width:479px;"><span class="PZ3inr"><strong>Afternoon Light: </strong>The same Pioneer Basin view, looking toward 3<sup>rd</sup> &amp; 4<sup>th</sup> Recess, later in the day.  <em><span style="color:#ccf; background:inherit;">Photo by Brian Ernst</span></em></span></span></a></div>

In this code snippet the only important part is the 479px in this example taken from Scott’s code. That should be exactly the width of your picture(s).

This is all fine till now but if you are as lazy to type code as I am… then you start thinking whether you want this or not. Well, I am lazy and don’t like to type long code lines, so here is what I did. As I mentioned above I never use the wysiwyg thing, so all I see in my Write panel is Quicktags. And you can always add new quicktags to that JS file. The quicktags.js file is located in your wp-includes/js/ directory.

Open the file and add the following between any two buttons you want to place your PZ3 quicktags:

edButtons[edButtons.length] =
new edButton('ed_pzr'
,'PZ3'
,'<div class="PZ3zoom PZ3-l Bdr Cap Lnk clearer" style="width:145px; height:100px"><a href="http://www.transycan.net/blog/blank.html" onclick="return false">'
,'<span class="PZ31cap" style="width:640px;"><span class="PZ3inr"><strong>TITLE</strong> - DESCRIPTION - <em><span style="color:#4d5663; background:inherit;"> (photo &amp;copy;Moshu)</span></em></span></span></a></div>'
,'PZ3'
);

I have put it at the very beginning of my Quicktags. What it does: on the first click it inserts the HTML code needed before the image. Then you go and insert the image code with the “send to editor”. (If needed, edit the alt text and such.)
Then click again on your PZ3 quicktag to “close” the whole thing. It will add the second part of the code. Done. Write or finish your post.

Some notes about the usage of the quicktag. As you can see my width for images and the caption width is set to 640px. That’s because it fits in my blog where I am using it and also because for me it is easy to get that size: my camera takes pictures of 1280px and in my image editor I just re-size it to 50%, so all my images will be of the same size. You should set your own width in your quicktag. Next, I remind myself to write a TITLE and a DESCRIPTION to appear in the caption part of the full-size view.

That’s it, folks. All the credits for the PhotoZoom code should go to Scott! I just tried to make my life easy using this really light script because I didn’t like the options offered by WP. I didn’t want to make the images as attachments (no need for comments); I didn’t like the thumb linked to the image option either because you have to click back and forth… and I found all the “light” box solutions slow and complicated.

This one works excellent. Check out the demo blog.