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