Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

First time posting in the Wordpress area of Stack Exchange. Hopefully someone will be able to help me with an issue.

I have successfully integrated Gallerific with the NextGen plugin.The one issue that I am having is that I simply cannot figure out how to rotate the image description with the image. I can only get the image description to appear under the thumbnails.

I'm sure it's something simple, but I have been staring at it for so long that I am probably missing the obvious.

Any help is greatly appreciated!

Here is my code:

The NextGen custom template:

<?php 


/**
 Template Page for the gallery overview

Follow variables are useable :

$gallery     : Contain all about the gallery
$images      : Contain all images, path, title
$pagination  : Contain the pagination content

 You can check the content when you insert the tag <?php var_dump($variable) ?>
 If you would like to show the timestamp of the image ,you can use <?php echo      $exif['created_timestamp'] ?>**/
?>

<?php if (!defined ('ABSPATH')) die ('No direct access allowed'); ?><?php if (!empty ($gallery)) : ?>

<div class="ngg-galleryoverview" id="<?php echo $gallery->anchor ?>">

<?php
/**
*GALLERIFFIC
*/
?>
<div id="loading"></div>
<div id="slideshow">
</div>
<div id="thumbs" class="navigation">
<ul class="thumbs noscript">
<!-- Thumbnails -->
<?php foreach ($images as $image) : ?>
<li>
<a class="thumb" href="<?php echo $image->imageURL ?>" title="<?php echo $image- >description ?>" <?php echo $image->thumbcode ?> >
<img title="<?php echo $image->alttext ?>" alt="<?php echo $image->alttext ?>" src="<?php echo $image->thumbnailURL ?>" width="125" height="100"<?php // echo $image->size ?> />
<!-- thumbnail -->
</a>
</li>
<div class="caption">
<div class="image-desc"><?php echo $image->description ?></div>
</div>
<?php endforeach; ?>
</ul>
<!-- Pagination -->
<?php echo $pagination ?>
</div>
<?php endif; ?>

And here is the custom Wordpress page template with the Gallerific javascript:

<?php
/*
Template Name: Photo Gallery 2
*/
get_header();
?>

<div id="container">
<div id="thin-red">

</div><!-- #thin-red -->
<div id="content" role="main">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
<div class="entry">
<?php the_content(); ?>
</div>
</div>
<?php endwhile; else: ?>
<?php endif; ?>
</div>
<div id="slideshow">
<div id="caption">
<div class="image-desc"></div>
</div>
</div>
<div id="thumbs">
</div><!--end container-->
    <script type="text/javascript">
jQuery(document).ready(function($) {
 var gallery = $('#thumbs').galleriffic({
     delay:                     3000, // in milliseconds
     numThumbs:                 8, // The number of thumbnails to show page
     preloadAhead:              40, // Set to -1 to preload all images
     enableTopPager:            false,
     enableBottomPager:         true,
     maxPagesToShow:            7,  // The maximum number of pages to display in either the top or bottom pager
     imageContainerSel:         '#slideshow', // The CSS selector for the element within which the main slideshow image should be rendered
     controlsContainerSel:      '#controls', // The CSS selector for the element within which the slideshow controls should be rendered
     captionContainerSel:       '#caption', // The CSS selector for the element within which the captions should be rendered
     loadingContainerSel:       '', // The CSS selector for the element within which should be shown when an image is loading
     renderSSControls:          true, // Specifies whether the slideshow's Play and Pause links should be rendered
     renderNavControls:         true, // Specifies whether the slideshow's Next and Previous links should be rendered
     playLinkText:              'Play',
     pauseLinkText:             'Pause',
     prevLinkText:              'Previous',
     nextLinkText:              'Next',
     nextPageLinkText:          'Next &rsaquo;',
     prevPageLinkText:          '&lsaquo; Prev',
     enableHistory:             false, // Specifies whether the url's hash and the browser's history cache should update when the current slideshow image changes
     enableKeyboardNavigation:  true, // Specifies whether keyboard navigation is enabled
     autoStart:                 false, // Specifies whether the slideshow should be playing or paused when the page first loads
     syncTransitions:           false, // Specifies whether the out and in transitions occur simultaneously or distinctly
     defaultTransitionDuration: 0, // If using the default transitions, specifies the duration of the transitions
     onSlideChange:             undefined, // accepts a delegate like such: function(prevIndex, nextIndex) { ... }
     onTransitionOut:           undefined, // accepts a delegate like such: function(slide, caption, isSync, callback) { ... }
     onTransitionIn:            undefined, // accepts a delegate like such: function(slide, caption, isSync) { ... }
     onPageTransitionOut:       undefined, // accepts a delegate like such: function(callback) { ... }
     onPageTransitionIn:        undefined, // accepts a delegate like such: function() { ... }
     onImageAdded:              undefined, // accepts a delegate like such: function(imageData, $li) { ... }
     onImageRemoved:            undefined  // accepts a delegate like such: function(imageData, $li) { ... }
 });
 });
</script>
<?php get_footer(); ?>
share|improve this question
add comment

3 Answers

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:           '&lsaquo;  &lsaquo;  Previous Photo',
        nextLinkText:           'Next Photo  &rsaquo; &rsaquo;' ,
        nextPageLinkText:       'Next &rsaquo;',
        prevPageLinkText:       '&lsaquo; 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.

share|improve this answer
add comment

Take a look here: Using Galeriffic in NextGen Gallery template.

The article's about:

Let’s check out the possibilities of NextGen gallerys templating system and create a template to use with nice Galleriffic jQuery plugin.

share|improve this answer
add comment

Please provide a link to an example page in the future, makes everyone's job easier. :D

Try changing:

<a class="thumb" href="<?php echo $image->imageURL ?>" title="<?php echo $image- >description ?>" <?php echo $image->thumbcode ?> >

to:

<a class="thumb" href="<?php echo $image->imageURL ?>" title="<?php echo $image->description ?>" <?php echo $image->thumbcode ?> >

There's a space after $image- and before >description, which could be the issue. I have the feeling that the line:

<div class="image-desc"><?php echo $image->description ?></div>

...Doesn't actually do anything, and that Gallerific takes the image title and uses that as the caption in the div with ID #caption. Note the comment on the line:

 captionContainerSel:       '#caption', // The CSS selector for the element within which the captions should be rendered

It says "where it should be rendered", not "where it gets caption info from."

Let me know if this doesn't do it and I'll suggest some other changes.

Cheers, -Æ.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.