Hi,
I'm using the NextGEN gallery plugin. I am editing gallery.php to show one thumbnail only for each gallery and loading the other images in the background so that when the thumbnail is clicked a lightbox opens.
Take a look at [[LINK href="http://dougalblack.co.uk/new/services/free-standing/"]]this page[[/LINK]]
You'll see two entries for the same gallery. The first is an "extended album" entry, and the second is the single gallery (which opens in the lightbox). I am trying to make the second look like the first. So far I have managed to do this - adding the gallery title, description and border.
However, I'm struggling to make the description sit beside the image, as it does in the first one.... any ideas?
This is the code for gallery.php.....
<?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 if ($gallery->show_slideshow) { ?>
</a>
</div>
<div class="ngg-album">
<?php } ?>
<div class="ngg-albumtitle"><?php echo $gallery->title ?></a></div>
<p><?php echo $gallery->description ?></p>
<?php if ($gallery->show_piclens) { ?>
<!-- Piclense link -->
<div class="piclenselink">
<a class="piclenselink" href="<?php echo $gallery->piclens_link ?>">
<?php _e('[View with PicLens]','nggallery'); ?>
</a>
</div>
<?php } ?>
<!-- Thumbnails -->
<?php foreach ( $images as $image ) : ?>
<div id="ngg-image-<?php echo $image->pid ?>" class="ngg-gallery-thumbnail-box" <?php echo $image->style ?> >
<div class="ngg-gallery-thumbnail" >
<a href="<?php echo $image->imageURL ?>" title="<?php echo $image->description ?>" <?php echo $image->thumbcode ?> >
<?php if ( !$image->hidden ) { ?>
<img title="<?php echo $image->alttext ?>" alt="<?php echo $image->alttext ?>" src="<?php echo $image->thumbnailURL ?>" <?php echo $image->size ?> />
<?php } ?>
</a>
</div>
</div>
<?php if ( $image->hidden ) continue; ?>
<?php if ( $gallery->columns > 0 && ++$i % $gallery->columns == 0 ) { ?>
<br style="clear: both" />
<?php } ?>
<?php endforeach; ?>
</div>
<?php endif; ?>
Peter Michael answers:
Try this (untested):
<?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-albumoverview" id="<?php echo $gallery->anchor ?>">
<div class="ngg-album">
<div class="ngg-albumtitle"><?php echo $gallery->title ?></a></div>
<div class="ngg-albumcontent">
<?php $i = 0; foreach ( $images as $image ) : if($i == 0) : ?>
<div class="ngg-thumbnail">
<a href="<?php echo $image->imageURL ?>" title="<?php echo $image->description ?>" <?php echo $image->thumbcode ?> >
<?php if ( !$image->hidden ) { ?>
<img title="<?php echo $image->alttext ?>" alt="<?php echo $image->alttext ?>" src="<?php echo $image->thumbnailURL ?>" <?php echo $image->size ?> />
<?php } ?>
</a>
</div>
<div class="ngg-description">
<p><?php echo $gallery->description ?></p>
<p><strong><?php echo count($images); ?></strong> Photos</p>
</div>
<?php $i++; endif; endforeach; ?>
</div>
<!-- Pagination -->
<div class="ngg-clear"></div>
</div>
</div>
<?php endif; ?>
FPHT comments:
Fantastic! That worked perfectly. Will select you as winner. Thanks again :)
Peter Michael comments:
You're welcome :)
FPHT comments:
Made a mistake! It's not worked....
The thumbnail no longer links to the gallery as before with the new code. Are you able to help? Sorry, I didn't notice!!
Sébastien | French WordpressDesigner answers:
hey, this is the solution I have advocated (preconized?), yet you have not declared the winner!
[[LINK href="http://wpquestions.com/question/show/id/1821"]]http://wpquestions.com/question/show/id/1821[[/LINK]]
it's not too late ;-)
FPHT comments:
Hi,
This is a different question as I am no longer using the album display.
The other question is still open because I am waiting to hear back from they user who said it is possible.
If you are able to help with this question let me know.
Sébastien | French WordpressDesigner comments:
yes i can help you :-))
Sébastien | French WordpressDesigner comments:
use this code please
<?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 ?>">
<div class="ngg-albumtitle"><?php echo $gallery->title ?></a></div>
<p><?php echo $gallery->description ?></p>
<?php if ($gallery->show_piclens) { ?>
<!-- Piclense link -->
<div class="piclenselink">
<a class="piclenselink" href="<?php echo $gallery->piclens_link ?>">
<?php _e('[View with PicLens]','nggallery'); ?>
</a>
</div>
<?php } ?>
<!-- Thumbnails -->
<?php foreach ( $images as $image ) : ?>
<a href="<?php echo $image->imageURL ?>" title="<?php echo $image->description ?>" <?php echo $image->thumbcode ?> >
<?php if ( !$image->hidden ) { ?>
<img title="<?php echo $image->alttext ?>" alt="<?php echo $image->alttext ?>" src="<?php echo $image->thumbnailURL ?>" <?php echo $image->size ?> />
<?php } ?>
</a>
<?php if ( $image->hidden ) continue; ?>
<?php if ( $gallery->columns > 0 && ++$i % $gallery->columns == 0 ) { ?>
<br style="clear: both" />
<?php } ?>
<?php endforeach; ?>
</div>
<?php endif; ?>
Sébastien | French WordpressDesigner comments:
maybe, after that, we will replace one or two things in the css.
Tell me when the code is in the site and i look at the result and the css
FPHT comments:
Nope, that didn't work. See screenshot of result attached...