Integrating Nextgen Gallery with Gallerific

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.

Read More

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(); ?>

Related posts

Leave a Reply

3 comments

  1. 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 .= "nttttt<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 .= "nttttt</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.

  2. Please provide a link to an example page in the future, makes everyone’s job easier. 😀

    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,
    -Æ.