I struggled with the same issue but instead of using Nextgen (which goes way overboard in my opinion), I integrated Gallerific as a WordPress gallery shortcode replacement. It works really well and is very easy for the end user because they just have to add the images to the post and click insert gallery.
I’ll provide the code I used as a reference below:
I ended up using the caption instead of the description on the images.
The plugin:
Note: This uses some of the logic and code from Just Tadlock’s Cleaner Gallery plugin.
add_filter( 'post_gallery', 'galleriffic_gallery', 10, 2 );
function galleriffic_gallery() {
global $post;
/* Orderby */
if ( isset( $attr['orderby'] ) ) :
$attr['orderby'] = sanitize_sql_orderby( $attr['orderby'] );
if ( !$attr['orderby'] )
unset( $attr['orderby'] );
endif;
/*
* Extract default gallery settings
*/
extract(shortcode_atts(array(
'order' => 'ASC',
'orderby' => 'menu_order ID',
'id' => $post->ID,
'itemtag' => 'dl',
'icontag' => 'dt',
'captiontag' => 'dd',
'columns' => 3,
'size' => 'thumbnail',
), $attr));
/*
* Make sure $id is an integer
*/
$id = intval( $id );
/*
* Get image attachments
* If none, return
*/
$attachments = get_children( array('post_parent' => $id, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) );
if ( empty( $attachments ) )
return '';
/*
* If is feed, leave the default WP settings
* We're only worried about on-site presentation
*/
if ( is_feed() ) {
$output = "\n";
foreach ( $attachments as $id => $attachment )
$output .= wp_get_attachment_link( $id, $size, true ) . "\n";
return $output;
}
$i = 0;
/*
* Remove the style output in the middle of the freakin' page.
* This needs to be added to the header.
* The width applied through CSS but limits it a bit.
*/
/*
* Open the gallery <div>
*/
$output .= '<div id="gallery-wrap" class="gallery-wrap">'."\n";
$output .= '<div id="gallery-'.$id.'" class="content gallery gallery-'.$id.'">'."\n";
$output .= '<div id="loading" class="loader"></div>'."\n";
$output .= '<div id="slideshow" class="slideshow"></div>'."\n";
$output .= '<div id="controls" class="controls"></div>'."\n";
$output .= '<div id="caption" class="embox"></div>'."\n";
$output .= '</div><!--#gallery-'.$id.'-->'."\n";
$output .= '<div id="thumbs" class="navigation">'."\n";
$output .= '<ul class="thumbs noscript">'."\n";
/*
* Loop through each attachment
*/
foreach ( $attachments as $id => $attachment ) :
/*
* Get the caption and title
*/
$caption = wp_specialchars( $attachment->post_excerpt, 1 );
$title = wp_specialchars( $attachment->post_title, 1 );
$link = wp_get_attachment_image_src( $id, 'large' );
$img = wp_get_attachment_image_src( $id, $size );
/*
* Open each gallery item
*/
$output .= "\n\t\t\t\t\t<li class="gallery-item">";
$output .= '<a class="thumb" href="' . wp_get_attachment_url( $id ) . '" title="' . $title . '">';
$output .= '<img src="' . $img[0] . '" alt="' . $title . '" title="' . $title . '" />';
$output .= '</a>';
$output .= "\n\t\t\t\t\t</li>";
endforeach;
/*
* Close gallery and return it
*/
$output .= '</ul><!--.thumbs-->'."\n";
$output .= '</div><!--#thumbs-->'."\n";
$output .= '</div><!--#gallery-wrap-->'."\n";
$output .= '<div class="cb"></div>'."\n";
/*
* Return out very nice, valid XHTML gallery.
*/
return $output;
}
?>
The Galleric Settings
Note: It would make your template cleaner if you put your settings in a separate file and called it using wp_enqueue_script.
jQuery(document).ready(function($) {
// We only want these styles applied when javascript is enabled
$('div.navigation').css({'width' : '710px', 'float' : 'left'});
$('div.content').css('display', 'block');
// Initially set opacity on thumbs and add
// additional styling for hover effect on thumbs
var onMouseOutOpacity = 0.67;
$('#thumbs ul.thumbs li').opacityrollover({
mouseOutOpacity: onMouseOutOpacity,
mouseOverOpacity: 1.0,
fadeSpeed: 'fast',
exemptionSelector: '.selected'
});
var gallery = $('#thumbs').galleriffic({
delay: 3000,
numThumbs: 12,
preloadAhead: 10,
enableTopPager: false,
enableBottomPager: true,
imageContainerSel: '#slideshow',
controlsContainerSel: '#controls',
captionContainerSel: '#caption',
loadingContainerSel: '#loading',
renderSSControls: true,
renderNavControls: true,
playLinkText: 'Play Slideshow',
pauseLinkText: 'Pause Slideshow',
prevLinkText: '‹ ‹ Previous Photo',
nextLinkText: 'Next Photo › ›' ,
nextPageLinkText: 'Next ›',
prevPageLinkText: '‹ Prev',
enableHistory: true,
autoStart: false,
syncTransitions: true,
defaultTransitionDuration: 200,
onSlideChange: function(prevIndex, nextIndex) {
// 'this' refers to the gallery, which is an extension of $('#thumbs')
this.find('ul.thumbs').children()
.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
.eq(nextIndex).fadeTo('fast', 1.0);
},
onTransitionOut: function(slide, caption, isSync, callback) {
slide.fadeTo(this.getDefaultTransitionDuration(isSync), 0.0, callback);
caption.fadeTo(this.getDefaultTransitionDuration(isSync), 0.0);
},
onTransitionIn: function(slide, caption, isSync) {
var duration = this.getDefaultTransitionDuration(isSync);
slide.fadeTo(duration, 1.0);
},
onPageTransitionOut: function(callback) {
this.fadeTo('fast', 0.0, callback);
},
onPageTransitionIn: function() {
this.fadeTo('fast', 1.0);
},
onImageAdded: function(imageData, $li) {
$li.opacityrollover({
mouseOutOpacity: onMouseOutOpacity,
mouseOverOpacity: 1.0,
fadeSpeed: 'fast',
exemptionSelector: '.selected'
});
}
});
function pageload(hash) {
// alert("pageload: " + hash);
// hash doesn't contain the first # character.
if(hash) {
$.galleriffic.gotoImage(hash);
} else {
gallery.gotoIndex(0);
}
}
gallery.find('a.prev').click(function(e) {
gallery.previousPage();
e.preventDefault();
});
gallery.find('a.next').click(function(e) {
gallery.nextPage();
e.preventDefault();
});
// Initialize history plugin.
// The callback is called at once by present location.hash.
$.historyInit(pageload, "advanced.html");
});
I had planned on releasing this as a plugin but it still needs some work to make us usable for the masses.