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;
1 2 3 4 5 6 7 8 9 | // load jQuery-Tooltip function my_tooltip(){ if (!is_admin()) { wp_register_script( 'tooltip', get_bloginfo('template_directory').'/js/jquery.tools.min.js', false, '', true); wp_enqueue_script('jquery'); wp_enqueue_script('tooltip'); } } add_action('init', 'my_tooltip'); |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 | <script type="text/javascript"> //<![CDATA[ jQuery.noConflict(); jQuery(document).ready(function(){ jQuery(".zoomer").tooltip({ effect: 'fade', fadeInSpeed: 300, relative: true }); }); //]]> </script> |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> ... <?php if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it. $thumb = preg_replace('|title="[^"]*"|U', '', get_the_post_thumbnail($post->ID, 'thumbnail')); echo '<div class="zoomer">'; echo $thumb; echo '</div> <div class="tooltip">' . get_the_post_thumbnail($post->ID, 'medium') '</div>'; } ?> ... <?php the_content(); ?> ... |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | .tooltip { display:none; height:auto; width:auto; padding:40px 30px 10px 30px; } /* mouseover state */ .zoomer:hover { background-position: 0px -80px ; } /* clicked state */ .zoomer:focus { background-position: 10px -80px; } |
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.
