Gauge Interactive Blog Read to understand
Find out what is on our minds and what corners of the industry we explore. Read about the latest news at Gauge Interactive and feel free to comment on our posts.
Wordpress Powered Custom JQuery Rollover Gallery
March 14, 2009
A look inside the Gauge Interactive Rollover Gallery powered by Wordpress. Built into the Wordpress Content Management System is a tight little media manager. One of the nicest features of the recent Wordpress developments is the automatic resizing of images. As well, there are now three custom sizes for your images: Thumbnail, Medium, Large. The great thing about this is with a little PHP action you can create custom galleries from posts or pages that have image attachments. Talk about ultimate control over your content these methods can offer much more power than the Wordpress Gallery Shortcode. You can even take advantage of the fact that Wordpress offers drag and drop re-ordering and meta tag editing on all the image attachments in the media manager. Get ready to ride down the SEO highway with these types of features.
View the gallery in action here on a project page or on any of our work pages.
Here is a sample of the code. Basically you can put this anywhere inside the Wordpress Loop, or a custom query. The first two parts will look for attachments, then setup the numbered buttons, then thumbnails, and attach a java script for rollover functions. There are two sets of controls to demonstrate flexibility. (Don’t miss the preload function there also!)
The last part sets up the first gallery image and preps it to receive the java rollover function to swap the source.
<?php if ( $images = get_children(array(
'post_parent' => get_the_ID(),
'post_type' => 'attachment',
'numberposts' => -1,
'post_mime_type' => 'image',
))) : ?>
<?php foreach( $images as $image ) : ?> // setup array of images
<?php $attributes_image = wp_get_attachment_image_src( $image->ID, "large"); ?> //get the source for the large image
<?php $numero++;?>
<div style="height:40px;float:left;display:inline;" ><div><img onmouseover="document.getElementById('rolloverimage').src='<?php echo $attributes_image[0];?>'" alt="Gallery Rollover" src="<?php bloginfo('stylesheet_directory');?>/images/<?php echo $numero;?>_button.png" /><img src="<?php echo $attributes_image[0];?>" alt="Projects" class="preload"/></div></div> //displays the numbered rollover graphic with java rollover attribute
<?php endforeach; ?>
<?php endif; ?>
</div>
<div style="height:160px;width:100%;float:left;display:inline;">
<?php if ( $images = get_children(array(
'post_parent' => get_the_ID(),
'post_type' => 'attachment',
'numberposts' => -1,
'post_mime_type' => 'image',
))) : ?>
<?php foreach( $images as $image ) : ?>
<?php $attributes_image = wp_get_attachment_image_src( $image->ID, "large"); ?>
<?php $attributes_image1 = wp_get_attachment_image_src( $image->ID, "thumbnail"); ?>
<?php $numero++;?>
<div style="height:100px;float:left;display:inline;" ><div><img onmouseover="document.getElementById('rolloverimage').src='<?php echo $attributes_image[0];?>'" alt="Gallery Rollover" src="<?php echo $attributes_image1[0];?>" /><img src="<?php echo $attributes_image[0];?>" alt="Projects" class="preload"/></div></div> //displays thumbnail rollover images, alternate method
<?php endforeach; ?>
<?php endif; ?>
</div>
<?php if ( $images = get_children(array(
'post_parent' => get_the_ID(),
'post_type' => 'attachment',
'numberposts' => -1,
'post_mime_type' => 'image',
))) : ?>
<?php foreach( $images as $image ) : ?>
<?php $attributes_image = wp_get_attachment_image_src( $image->ID, "large"); $tester = $attributes_image[1];?>
<div style="float:left;display:inline;width:100%;height:500px;">
<img src="<?php echo $attributes_image[0];?>" id="rolloverimage" alt="image" /> //displays first image in set
</div>
<?php break; ?>
<?php endforeach; ?>
<?php endif; ?>
That was quite excellent, thanks a bunch! I’ll have to look at some of the other posts too…
this is what I looking for, thanks.
Hey. Great code.
Is there any way to get the meta data stored for each image.
I’m writing a Jquery portfolio sideshow and need to get the image url (which i can now do thanks to you) and the caption or description for that image.
thanks in advance, please email me.
This is just perfect and is exactly what I needed for my blog. I guess all those hours of searching for it weren’t in vain.
fantastic blog this is what ive been looking for cheers!
Thanks for useful guidelines. Excellent article - looking forward to hear more from you!
I am using wordpress as a cms for a flash site. I spent hours looking for a way to get a simple list of urls from the built-in gallery function. This helped me allot! Thanks for sharing!