NextGen Optimizer: Doubles Images with Fancybox

(@mark-jeldi)

Hi thirdpotato,

Thanks for using NextGEN Gallery Optimizer!

I’ve been looking at your source code, and I believe the reason you’re seeing a doubling of your images and counts is because of the PushPin Gallery Template you’re using. If you look at the code snippet below for your first thumbnail, you’ll see both the thumb and main image link are inserted twice…

<div id="ngg-image-4" class="ngg-gallery-thumbnail-box"  >
<div class="nextgen-overlay-pushpin-container">
<div class="ngg-gallery-thumbnail-pushpin" >
			<a href="https://tobylotak.com/wp-content/gallery/tobylotak/marszypan-racer3.jpg" title=" " class="thickbox" rel="set_1" ><br />
			<!-- Use this line below and comment out the one above to use your image title/alt as the link title (hover tooltip) instead of the description --><br />
			<!-- <a href="https://tobylotak.com/wp-content/gallery/tobylotak/marszypan-racer3.jpg" title="marszypan-racer3" class="thickbox" rel="set_1" > --></p>
<p>								<span class="nextgen-overlay-pushpin"><br />
					<img title="marszypan-racer3" alt="marszypan-racer3" src="https://tobylotak.com/wp-content/gallery/tobylotak/thumbs/thumbs_marszypan-racer3.jpg" width="100" height="75" /><br />
				</span><br />
				<img title="marszypan-racer3" alt="marszypan-racer3" src="https://tobylotak.com/wp-content/gallery/tobylotak/thumbs/thumbs_marszypan-racer3.jpg" width="100" height="75" /></p>
<p>			</a>
		</div>
</p></div>
</p></div>

Lightbox scripts generally scrape the page source code for ANY image links they find with a particular class name, be it Thickbox, Shutter or Fancybox. Since you’ve got two links for each image loading on the page, there’s bound to be duplication and unexpected behavior.

I would suggest editing this template, which is most likely at either…

1. wp-content/plugins/nextgen-gallery/view/gallery.php or
2. wp-content/themes/your_theme_name/nggallery/gallery.php.

Once you remove the duplicate links to your full-size images, your lightboxes should function as intended. You may also want to delete the duplicate thumbnails, though I suspect they’re required for the gallery hover effect.

Hope this helps!

Cheers,
Mark.

Thread Starter

(@thirdpotato)

THank you so much for your reply! I’m a bit ignorant as to coding (terribly sorry!) What line should I take out exactly? Would this be taken out of the page itself, or in the CSS somewhere? Thank you again for taking the time to look into it!

Plugin Author

(@mark-jeldi)

Hi thirdpotato,

You’ll want to edit your PushPin Gallery Template…

I would suggest editing this template, which is most likely at either…

1. wp-content/plugins/nextgen-gallery/view/gallery.php or
2. wp-content/themes/your_theme_name/nggallery/gallery.php.

The author’s site doesn’t appear to be around anymore, but if you can post the template here (remember to select it and click “code” in the reply editor), I’d be happy to edit it for you.

Cheers,
Mark.

Thread Starter

(@thirdpotato)

THank you so much for all your help, Mark! I really appreciate it.

/*
CSS Name: PushPin Grunge
Description: Pushpin Grunge Gallery Stylesheet
Author: Matt Bunch
Version: 1.2

This is a gallery template stylesheet that can be used with NextGEN Gallery. 

*/

/* Nextgen Custom Gallery Template Pushpin */
.nextgen-overlay-pushpin-container {
    margin:10px 10px 10px 0;
}
.nextgen-overlay-pushpin {
    display:block;
	height:auto;
	width:auto;
	position:absolute;
	margin:0 0 0 0;
	z-index:10;
	background:url('../images/pushpin-overlay-4.png');
	background-size:100% 100%;
}

.nextgen-overlay-pushpin:hover{
	background:url('../images/pushpin-overlay-4-hover.png');
	background-size:100% 100%;
}

.nextgen-overlay-pushpin img{
    visibility:hidden;
	position:relative;
}

.ngg-thumbnail-pushpin {
	float: left;
}

.ngg-thumbnail-pushpin img {
	position:relative;
}

.ngg-thumbnail-pushpin img:hover {

}

.ngg-description-pushpin {
	text-align: left;
}

.ngg-gallery-thumbnail-pushpin img {
	display:block;
	position:relative;
}

.ngg-gallery-thumbnail-pushpin img:hover {
	background-color: #A9A9A9;
} 

.mbtk-credits {
    text-align:center;
	font-size:.8em;
}

/* END Nextgen Custom Template Images */

Thread Starter

(@thirdpotato)

Oops sorry I don’t tink that’s the right file XD here’s the php:

<?php
/**
Template Page for the gallery overview with pushpin borders
Courtesy of https://MattBunch.tk

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'] ?>

**/
?>
<link type="text/css" href="<?php bloginfo('stylesheet_directory'); ?>/nggallery/css/ngg-gallery-pushpin.css" rel="stylesheet" media="all" />
<?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) { ?>
	<!-- Slideshow link -->
	<div class="slideshowlink">
		<a class="slideshowlink" href="<?php echo $gallery->slideshow_link ?>">
			<?php echo $gallery->slideshow_link_text ?>
		</a>
	</div>
<?php } ?>

<?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="nextgen-overlay-pushpin-container">
		<div class="ngg-gallery-thumbnail-pushpin" >
			<a href="<?php echo $image->imageURL ?>" title="<?php echo $image->description ?>" <?php echo $image->thumbcode ?> >
			<!-- Use this line below and comment out the one above to use your image title/alt as the link title (hover tooltip) instead of the description -->
			<!-- <a href="<?php echo $image->imageURL ?>" title="<?php echo $image->alttext ?>" <?php echo $image->thumbcode ?> > -->

				<?php if ( !$image->hidden ) { ?>
				<span class="nextgen-overlay-pushpin">
					<img title="<?php echo $image->alttext ?>" alt="<?php echo $image->alttext ?>" src="<?php echo $image->thumbnailURL ?>" <?php echo $image->size ?> />
				</span>
				<img title="<?php echo $image->alttext ?>" alt="<?php echo $image->alttext ?>" src="<?php echo $image->thumbnailURL ?>" <?php echo $image->size ?> />
				<?php } ?>

			</a>
		</div>
		</div>
	</div>

	<?php if ( $image->hidden ) continue; ?>
	<?php if ( $gallery->columns > 0 && ++$i % $gallery->columns == 0 ) { ?>
		<br style="clear: both" />
	<?php } ?>

 	<?php endforeach; ?>

	<!-- Pagination -->
 	<?php echo $pagination ?>
	<!-- Leave this line intact if you believe in karma ;-)  -->
 	<div class="mbtk-credits">PushPin Gallery Template for Nextgen Courtesy of <a href="https://MattBunch.tk">MattBunch.tk</a></div>
</div>

<?php endif; ?>

Plugin Author

(@mark-jeldi)

Hi thirdpotato,

Here we go…

<?php
/**
Template Page for the gallery overview with pushpin borders
Courtesy of https://MattBunch.tk

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'] ?>

**/
?>
<link type="text/css" href="<?php bloginfo('stylesheet_directory'); ?>/nggallery/css/ngg-gallery-pushpin.css" rel="stylesheet" media="all" />
<?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) { ?>
	<!-- Slideshow link -->
	<div class="slideshowlink">
		<a class="slideshowlink" href="<?php echo $gallery->slideshow_link ?>">
			<?php echo $gallery->slideshow_link_text ?>
		</a>
	</div>
<?php } ?>

<?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="nextgen-overlay-pushpin-container">
		<div class="ngg-gallery-thumbnail-pushpin" >
			<a href="<?php echo $image->imageURL ?>" title="<?php echo $image->description ?>" <?php echo $image->thumbcode ?> >

				<?php if ( !$image->hidden ) { ?>
				<span class="nextgen-overlay-pushpin">
					<img title="<?php echo $image->alttext ?>" alt="<?php echo $image->alttext ?>" src="<?php echo $image->thumbnailURL ?>" <?php echo $image->size ?> />
				</span>
				<img title="<?php echo $image->alttext ?>" alt="<?php echo $image->alttext ?>" src="<?php echo $image->thumbnailURL ?>" <?php echo $image->size ?> />
				<?php } ?>

			</a>
		</div>
		</div>
	</div>

	<?php if ( $image->hidden ) continue; ?>
	<?php if ( $gallery->columns > 0 && ++$i % $gallery->columns == 0 ) { ?>
		<br style="clear: both" />
	<?php } ?>

 	<?php endforeach; ?>

	<!-- Pagination -->
 	<?php echo $pagination ?>
	<!-- Leave this line intact if you believe in karma ;-)  -->
 	<div class="mbtk-credits">PushPin Gallery Template for Nextgen Courtesy of <a href="https://MattBunch.tk">MattBunch.tk</a></div>
</div>

<?php endif; ?>

Hope this helps!

Cheers,
Mark.

Thread Starter

(@thirdpotato)

Yay thank you very much!

Plugin Author

(@mark-jeldi)