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 ›',
prevPageLinkText: '‹ 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(); ?>
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.
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.
I had planned on releasing this as a plugin but it still needs some work to make us usable for the masses.
Take a look here: Using Galeriffic in NextGen Gallery template.
The article’s about:
Please provide a link to an example page in the future, makes everyone’s job easier. 😀
Try changing:
to:
There’s a space after
$image-and before>description, which could be the issue. I have the feeling that the line:…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:
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,
-Ã.