A simple jquery effect for animating the display of hidden meta information for thumbnail images. For best results, this script should be ran from the same directory that WordPress is installed in.
<?php
/**
* jQuery Peek-A-Boo Animation for Image Galleries.
* @since 2010-08-07
*/
require_once './wp-blog-header.php';
function mfields_test_print_style() {
?>
<style type="text/css">
.frame {
float: left;
position:relative;
height: 150px;
width: 150px;
overflow: hidden;
}
.frame img {
height: 150px;
width: 150px;
display; block;
}
.frame .slide {
position:relative;
top:0;
left:0;
width: 150px;
height: 300px;
margin: 0;
padding: 0;
background: #eee;
}
.frame .description {
display: block;
padding: 10px;
}
</style>
<?php
}
function mfields_test_print_script() {
?>
<script type="text/javascript">
jQuery(document).ready( function( $ ) {
$( '.frame' ).hover(
function () {
$( this ).find( '.slide' ).stop().animate( { 'top': '-150px' }, 200 );
},
function () {
$( this ).find( '.slide' ).stop().animate( { 'top': '0' }, 400 );
}
);
});
</script>
<?php
}
wp_enqueue_script( 'jquery' );
add_action( 'wp_print_styles', 'mfields_test_print_style' );
add_action( 'wp_head', 'mfields_test_print_script' );
get_header();
?>
<div class="frame">
<p class="slide">
<img src="http://art.mfields.org/wp-content/uploads/2010/04/warrior-of-the-second-sun-150x150.jpg" alt="" />
<span class="description">This is the description</span>
</p>
</div>
<div class="frame">
<p class="slide">
<img src="http://art.mfields.org/wp-content/uploads/2010/04/warrior-of-the-second-sun-150x150.jpg" alt="" />
<span class="description">This is the description</span>
</p>
</div>
<div class="frame">
<p class="slide">
<img src="http://art.mfields.org/wp-content/uploads/2010/04/warrior-of-the-second-sun-150x150.jpg" alt="" />
<span class="description">This is the description</span>
</p>
</div>
<div class="frame">
<p class="slide">
<img src="http://art.mfields.org/wp-content/uploads/2010/04/warrior-of-the-second-sun-150x150.jpg" alt="" />
<span class="description">This is the description</span>
</p>
</div>
<div class="frame">
<p class="slide">
<img src="http://art.mfields.org/wp-content/uploads/2010/04/warrior-of-the-second-sun-150x150.jpg" alt="" />
<span class="description">This is the description</span>
</p>
</div>
<?
get_footer();
?>
