Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

Next Gen Gallery Main image needs caption WordPress


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


@description 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 id="caption" class="caption-container"></div>

<div id="thumbs" class="navigation">
<ul class="thumbs noscript">
<!-- Thumbnails -->
<?php foreach ($images as $image) : ?>
<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"/>
<?php endforeach; ?>
<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')
.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);

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


<?php endif; ?>


Answers (1)


Romel Apuya answers:

have you tried adding the caption

inside the loop li after the anchor tag?

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

ktp12345 comments:

That worked.. Thanks!

Romel Apuya comments:

no problem...