Next Gen Gallery Main image needs caption WordPress

• SOLVED

Hello,
I'm using Next Gen Gallery with Galleriffic as the theme. What I want to do is display a caption for the main image. I tried using custom fields, but the caption would only output for the thumbnails.

I'm using the code from http://kaarel.sikk.info/archives/121.

<?php
/**

@description Galleriffic (http://www.twospy.com/galleriffic/) template for Nextgen Gallery Wordpress plugin
@author Kaarel Sikk

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 ?>">

<div id="gallery" class="content">
<div class="slideshow-container">
<div id="loading" class="loader"></div>
<div id="slideshow" class="slideshow"></div>
</div>


<div id="caption" class="caption-container"></div>

</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="78" height="78"/>
</a>
</li>
<?php endforeach; ?>
</ul>
</div>
<div style="clear: both;"></div>
<script type="text/javascript">
jQuery(document).ready(function($) {
// We only want these styles applied when javascript is enabled
$('div.navigation').css({'width' : '200px', 'float' : 'right' });
$('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'
});

// Initialize Advanced Galleriffic Gallery
var gallery = $('#thumbs').galleriffic({
delay: 2500,
numThumbs: 8,
preloadAhead: 10,
enableTopPager: false,
enableBottomPager: true,
maxPagesToShow: 3,
imageContainerSel: '#slideshow',
controlsContainerSel: '#controls',
captionContainerSel: '#caption',
loadingContainerSel: '#loading',
renderSSControls: false,
renderNavControls: false,
playLinkText: 'Play Slideshow',
pauseLinkText: 'Pause Slideshow',
prevLinkText: '&lsaquo; Previous Photo',
nextLinkText: 'Next Photo &rsaquo;',
nextPageLinkText: 'Next &rsaquo;',
prevPageLinkText: '&lsaquo; Prev',
enableHistory: false,
autoStart: false,
syncTransitions: true,
defaultTransitionDuration: 900,
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);
},
onPageTransitionOut: function(callback) {
this.fadeTo('fast', 0.0, callback);
},
onPageTransitionIn: function() {
this.fadeTo('fast', 1.0);
}
});
});
</script>

<!-- Pagination -->
<?php echo $pagination ?>

</div>

<?php endif; ?>



Thanks
Kyle

Answers (1)

2011-07-29

Romel Apuya answers:

have you tried adding the caption

inside the loop li after the anchor tag?


<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="78" height="78"/>
</a>
<div class="caption">
<?php echo $image->description; ?>
</div>
</li>

---

ktp12345 comments:

That worked.. Thanks!

---

Romel Apuya comments:

no problem...