Sorry, this entry is only available in Deutsch.

Using jQuery Tooltip as Image-Zoom

Some days ago, I’ve created a new theme for my little family-blog. I’m using the post_thumbnail function in this theme, because this is my favorite WP-function and I like it so much. But there is only a small area to display the thumbnails and I was looking for a function to zoom the images by mouseover.

jQuery was already running for other effects in my theme and I found the jQuery Tooltip to realize the Mouseover-Zoom. It’s not difficult to realize the hover with an image instead the title-tag, and we only have to change few lines of code in the WP-Loop. And that’s the way to do this…

1. Install the jQuery Tooltip in our theme

There are two ways to load the Tooltip-Script in our theme. You can load the JavaScript Code from your theme folder or you can include it directly from the project-page. It doesn’t matter which version you prefer, the way is similar.

Open your themes functions.php and place this little function inside;

This function loads the Tooltip-Script from your theme directory directly in your Themes Footer. Here I’m using a subfolder /js where my Script is placed. You can download the Script from the Tooltip Project Page.

Otherwise you can directly include the Script from the Project-Page. You only have to replace this line

wp_register_script( 'tooltip', get_bloginfo('template_directory').'/js/jquery.tools.min.js', false, '', true);

with

wp_register_script( 'tooltip', 'http://cdn.jquerytools.org/1.2.5/jquery.tools.min.js', false, '', true);

So now we have installed the Tooltip-Script in our theme.
Let’s go to the next step – call the Tooltip-Function. Open your themes footer.php and place this lines inside:

We activate the Tooltip with a nice Fade-Effect for all elements with class ‘zoomer’ (I’ll describe this later). The relative-attribute is not required for this function, but it’s helpfull when you have display-issues with the effect. So, try it out…

Note: You have to place the JavaScript-Function after the wp_footer(), because we are including the Tooltip-Script within this tag, and this must be done before the Javascript-Function starts working!

Let’s start filling the Tooltip to use as Image-Zoom.

2. Suit “the_post_thumbnail” and use it as Zoom

First we should know, that a Tooltip can display any kind of content instead the basic Image-Title-Tag. We’ll find a nice demo here in the Script-Doc. The only different is, that we want to show an image instead the table. Look at the documentation source code to see, how it works.

Finaly, if you want to use the Tooltip at the Home Page, open your themes index.php and look for the post_thumnbail function within the WordPress Loop. Here we have to place this lines of code:

What does this code do? First, check if there is a post thumbnail. If so, load it and remove the basic Title-Tag. This is not required, but it makes sure, that your Tooltip shows the content behind it and not the Title-Tag.

The thumbnail is loaded in the div with class “zoomer” and the same image again with the “medium size” in the div with class “tooltip”. The “zoomer” class is here my trigger and showing the bigger image when you hover the thumbnail.

Of course you can play with the image dimensions as you want. There are a lot of examples at the WordPress documentation or read this article. I’ve descriped the “add_image_size” function in another post.

Last but not least: CSS Styling
We need some CSS classes to show the Tooltip-Image only when a user moves over the thumbnail. So we have to set the CSS class .tooltip to display: none. And this are the basic requirements:

This are the basic requirements – do more to style the boxes however you want.

And that’s all. Now we have a nice effect to zoom our thumbnails. Easy, isn’t it?

You’ll find a Live-Demo here on my family-blog. I’m using the effect on my home page and in my archives. And I’ve included the post title and a post link to this box. Be creative and have fun with this script.

Sorry, this entry is only available in Deutsch.

Sorry, this entry is only available in Deutsch.

Sorry, this entry is only available in Deutsch.

Sorry, this entry is only available in Deutsch.

My “A little Touch of Purple”-Theme startet in April on WordPress.org. Since this time it was downloaded more than 10.000 times. That´s not a lot, compared with some other themes, but it´s much more than I ever expected. And THIS makes me a little bit proud.

I want to say: Thank You sooo much and I hope, that you have fun with my theme!

P.S. If you like my theme, please give me a star at WordPress.org – that would make my happy!

A little Touch of Purple

With version 2.9 came a new function to WordPress: the_post_thumbnail. Those function allows to add a little image to the posts. But not everybody loves this feature, because it needs a lot of ressources on the webspace and produced much more database-queries. But nevertheless it´s a usefull feature and very easy to handle.

We can use the “add_image_size”-Function to customize the thumbnails in our theme. Maybe you need images in 150×150 pixel at your index page and images in 90×90 pixel in the archives or 200×75 pixel… Or whatever…

You only have to write a small function in the functions.php to customize the image-size.

Our theme is ready for different image-sizes, and it “knows”, that we want to use different sizes on different places.

Now we have to call the thumbnails in our theme. Place this code in your template;

That´s all. Easy – isn´t it? But now we have a little problem. If you placed all code lines in your theme, and you take a look at your site, you might be shocked. Nothing changed.

The reason is simple. This function works fine with new uploaded images – not for those that are placed to this moment.

Use this little plugin to fix this issue; Regenerate Thumbnails – activate it and regenerate the thumbnails. Ready.

Sorry, this entry is only available in Deutsch.