WordPress.org

Ready to get started?Download WordPress

Forums

NextGEN Gallery Optimizer
[resolved] NextGen Optimizer: Doubles Images with Fancybox (10 posts)

  1. thirdpotato
    Member
    Posted 1 year ago #

    nextgen's Optimizer works great, but now the images double, like I have to click next twice on every image. I've had this problem with "shutter" before using NextGen Optimizer.
    http://tobylotak.com/?page_id=20 (rest of the site is under construction)

    http://wordpress.org/extend/plugins/nextgen-gallery-optimizer/

  2. thirdpotato
    Member
    Posted 1 year ago #

    I should also mention that it doubles the NUMBER of the images too. It says I have 10 in my gallery and even when you don't have to double click on the images, if you use Thickbox, when you click on the images, it goes in pairs:
    2 of 10
    4 of 10
    6 of 10
    8 of 10
    10 of 10
    I only have 5 images in my gallery, mind you :-/

  3. Mark Jeldi
    Member
    Plugin Author

    Posted 1 year ago #

    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="http://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="http://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="http://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="http://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.

  4. thirdpotato
    Member
    Posted 1 year ago #

    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!

  5. Mark Jeldi
    Member
    Plugin Author

    Posted 1 year ago #

    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.

  6. thirdpotato
    Member
    Posted 1 year ago #

    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 */
  7. thirdpotato
    Member
    Posted 1 year ago #

    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 http://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="http://MattBunch.tk">MattBunch.tk</a></div>
    </div>
    
    <?php endif; ?>
  8. Mark Jeldi
    Member
    Plugin Author

    Posted 1 year ago #

    Hi thirdpotato,

    Here we go...

    <?php
    /**
    Template Page for the gallery overview with pushpin borders
    Courtesy of http://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="http://MattBunch.tk">MattBunch.tk</a></div>
    </div>
    
    <?php endif; ?>

    Hope this helps!

    Cheers,
    Mark.

  9. thirdpotato
    Member
    Posted 1 year ago #

    Yay thank you very much!

  10. Mark Jeldi
    Member
    Plugin Author

    Posted 1 year ago #

    Hey thirdpotato,

    No worries! I've just checked your gallery again, and it seems you're still getting double image counts in the Thickbox lightbox. The code above worked fine on my dev setup, but it looks like there might be more to it.

    I've just been testing your source code, and I've found that something is inserting a lot of oddly-placed <p> paragraph tags around your images. When I remove these, the image count in the lightbox is correct.

    I would suggest deactivating your plugins one-by-one and refreshing your gallery page in between, to see if you can pinpoint a conflict. If it's not a plugin, there could also be some code in your theme's functions.php file inserting the tags.

    Hope this helps!

    Cheers,
    Mark.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic