Popup EXIF display with Thesography and jQuery

I received a request to make Thesography display EXIF upon hover over an image instead of just displaying as more text in the post. While I won’t include that kind of function in the plugin at this time (because I’m not sure how best to do it while maintaining a good amount of flexibility), I can show you how to implement it to suit your posting style.

EXIF via the title attribute

A very simple (though arguably non-semantic) way of doing this could be to display a tooltip via the title attribute.

When you insert your image into your WordPress post you can insert the Thesography shortcode into the title attribute via the HTML view.

<img src="http://www.example.com/wp-content/uploads/2009/10/lily.jpg" alt="lily" title="[exif id="18" show="all"]" width="800" height="529" class="aligncenter size-full wp-image-18" />

For this to work you must not have any HTML in the Thesography HTML display options. You should change the HTML options from the default to something like the following screenshot.

Fancy EXIF display with javascript

The first step to making a javascript EXIF display is to use CSS to style the EXIF block the way you want it.

The CSS makes it look cool

Using the following CSS (in your theme’s CSS file or custom.css when using the Thesis theme), along with a black 85% opacity background image, you can get a slightly transparent black sidebar over the left of your page.

You don’t have to use this particular CSS; it’s an example of the sort of thing you can do without having to recode your EXIF HTML. The javascript will apply to a range of different styles.

N.B. IE6 does not support position:fixed;, the list will appear below the image (where it was before) instead of overlayed on the page.

ul.exif {
	position:fixed;
	left:-2em;
	top:0;
	z-index:100;
	height:100%;
	width:16em;
	padding:10em 2em 2em;
	background:url(images/black-85.png) repeat;
	color:#fff;
	list-style-position:inside;
}

The javascript makes it act cool

To start, we need to add display:none; to the CSS so that ul.exif is hidden when the page loads.

The following PHP code can go in functions.php in the main directory of your theme, or in custom_functions.php if you’re using Thesis. If your theme doesn’t have a functions.php you can make one by creating a new file with that name (in a plain text editor, not MS Word or a rich text editor); add <?php at the start and paste this code after that.

if ( !is_admin() ) {
	wp_deregister_script('jquery'); 
	wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"), false, '1.3.2'); 
	wp_enqueue_script('jquery');
}

function exif_popout() {
	if (is_single()) {
?>
<script type="text/javascript">
	$(function() {
		
		var hovered = 0;
		
		var maybeFadeOut = function() {
			if (hovered == 0) {
				$("ul.exif").fadeOut();
			}
		};
		
		var hoverOn = function() {
			$(this).parent().next("ul.exif").fadeIn();
			hovered++;
		};
		var hoverOff = function() {
			hovered--;
			setTimeout(maybeFadeOut, 0);
		};
		
		$(".post img").hover(hoverOn, hoverOff);
		$("ul.exif").hover(hoverOn, hoverOff);
	});
</script>
<?php
	}
}
add_action('wp_head','exif_popout');

The first chunk of code is from Digging into WordPress and it loads the latest (at time of writing) jQuery library, hosted by Google. Using externally hosted libraries can be good because you have easy access to the latest files and because they can load asynchronously (i.e., while something from your server is loading, this can load too because it’s on another server, things from your server only load one at a time).

The second chunk of code inserts javascript into the head of our HTML WordPress page.

exif_popout() step by step

If you need more info about basic PHP syntax try the Tizag PHP tutorial. On Tizag.com you can also find HTML and CSS tutorials.

The function exif_popout() is designed to load only on single post pages (if (is_single()) determines that). It is also designed to be useful when there are multiple images on the page, each with their own EXIF that comes right after the image in the post.

$(function() { ... }); instructs jQuery to run our function when the webpage has completed loading.

var hovered = 0; is a variable that acts as a counter getting increased or decreased as we move our mouse over and off the image or the EXIF block. It helps determine how the movement of the mouse indicates whether the EXIF should be visible or not.

maybeFadeOut is a function that when called says, if hovered is equal to zero all EXIF blocks should be hidden (with a fade out effect).

hoverOn is a function that when called takes the element it acts upon ($(this), in this case it’s the image), then it finds that element’s parent element (using parent(), which in WordPress posts will be a paragraph, because images on their own line get wrapped in a paragraph). It then finds the ul.class that is next to that paragraph (next("ul.exif")) and displays it with a fade in effect. The hovered counter is also increased.

hoverOff is a function that when called decreases the hovered counter and activates the maybeFadeOut function. maybeFadeOut is wrapped with setTimeout, which adds a delay (of zero milliseconds) to the execution of maybeFadeOut and moves it to the end of the current action queue; allowing the rest of the javascript to execute before it. This allows us to move our mouse off the image and onto the EXIF block, or off the block onto the image, without the EXIF fading out and back in again (i.e., the fade out is delayed until we really want it to disappear — when we’re not hovering on the image or the EXIF).

$(".post img").hover(hoverOn, hoverOff);
$("ul.exif").hover(hoverOn, hoverOff);
Those two lines activate hoverOn and hoverOff when you hover your mouse on and off .post img and ul.exif.

.post is a class assigned to the element containing your image. If your theme uses a different class for your posts you need to change that in the javascript. Also, ul.exif is an unordered list with a class of “exif”, which is the default display for Thesography. If you have changed the way that Thesography displays, you will need to change ul.exif to whatever element your EXIF is presented with.

What if I’m using auto-insertion in Thesis

If you’re using Thesography auto-insertion with Thesis and you have some text in between the image and the EXIF the javascript won’t work as written because ul.exif won’t be the next thing after the image paragraph, there will be another paragraph (or more) in between. However, if you’re using auto-insertion it means you’ve only got one lot of EXIF on the page and you can change $(this).parent().next("ul.exif").fadeIn(); to $("ul.exif").fadeIn();.

What if this doesn’t work with my post layout?

There are so many different ways that your images and EXIF could be laid out in a post; it’s impossible for me to predict them all.

If you want to wrap your image and EXIF in a div together, that might simplify things for you and you could look into using the siblings selector instead of parent().next("ul.exif"), or perhaps parent().children("ul.exif").

Alternatively, while writing your post you could wrap each image and its related EXIF in paragraphs or divs with a unique class for each pair, and then use the class attribute as a variable to identify which EXIF should be displayed.

For more info on how to identify and navigate elements with jQuery, check the jQuery documentation; particularly Selectors and Traversing.

If you have trouble making the javascript fit your posting style and ask for help, please be very specific with the way your posts are displayed. A link to a direct example or the source code of an example (perhaps copied into Pastebin) is preferable.