Animated image caption with jQuery in WordPress

Home Image EffectsAnimated image caption with jQuery in WordPress

12 years ago Views

17863

2301

emanuel-kluge

Animated image caption with jQuery in WordPress

Google loves it so, if in addition to pictures or descriptive text still stands. Why WordPress has introduced some time ago, the image caption. This can - if you're not a friend of captions - manipulate using jQuery but so that they appear only in a mouseover. How does it work, I explain in this tutorial.

As usual, the first part of the HTML:

<div class="wp-caption" style="width: ???px">
	<img src="/path/to/img.jpg" alt="Dies ist eine Beschreibung" title="Dies ist eine Beschreibung" width="???" height="???" class="size-full wp-image-3402" />
	<p class="wp-caption-text">Dies ist eine Beschreibung</p>
</div>

This is the caption code that is output by WordPress. Instead of question marks there will be the right height and width specifications, as well as the correct path to the image.

Next, a bit of CSS for that appearance:

CSS

.wp-caption {
	position: relative;
	margin-bottom: 20px;
	border: 3px solid #999;
	overflow: hidden;
	-moz-border-radius: 2px;
	-khtml-border-radius: 2px;
	-webkit-border-radius: 2px;
	border-radius: 2px;
}

.wp-caption-text {
	padding: 5px 10px;
	background-color: #333;
	color: #EEE;
	border-top: 1px solid #666;
}

Important here is the indication "position: relative", because we work when you move the image with a negative margin and the rumzickt IE6 without this addition. Furthermore, the information is "overflow: hidden" is important because the caption text would otherwise disappear.

All other information on colors, interior and exterior intervals can be readily adapted.

Finally, the necessary JavaScript and jQuery part, without the nothing here goes:

HTML

<head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>

In the head region, we integrate the jQuery Library.

JavaScript

jQuery(document).ready(function($) {
	$('div.wp-caption').each(function(i) {
		var img_ = $('img', this);
		var img_height = img_.attr('height');
		var p_height = $('p', this).outerHeight();

		$(this).height(img_height);
		$(this).hover(function() {
			img_.animate({marginTop : -p_height}, 500);
		}, function() {
			img_.animate({marginTop : '0'}, 500);
		});
	});
});

With the each () function each image caption on the page is accessed. Then the height of the corresponding image and the description is stored. Next, the height of the caption div set equal to the height of the image so that the description is truncated and is not visible.

Then a hover () function is opened. If you move your cursor over an image caption, the accompanying picture gets a negative margin-top, which corresponds to the level of description, so that it runs in the visible range. Leaving the image caption again with the cursor, the background-the image is reset to zero. The whole is animated with animate () function of jQuery.

That was already done, the animated image Caption under WordPress.