WordPress.org

Ready to get started?Download WordPress

Forums

NextGEN Gallery Optimizer
[resolved] Images are not resizing with Fancybox? (2 posts)

  1. akcorcoran
    Member
    Posted 1 year ago #

    Hello - I have the NextGen Gallery Organizer Premium -

    With Thickbox or the other NextGen Photo Gallery effects, the photo is resized to fit in the available screen. While the Fancybox is working perfectly, the photos are larger than the screen and are not getting resized to fit in the viewable area.

    Can you please help so that happens b/c the plugin is great! Thanks!

    My site is http://teamcorcoran.com/prom

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

  2. Mark Jeldi
    Member
    Plugin Author

    Posted 1 year ago #

    Hi akcorcoran,

    Thanks for downloading NextGEN Gallery Optimizer Premium! I'm glad you like it! :)

    I've been having a look at your source code, and it turns out you've got three different instances of Fancybox loading on your pages, causing conflicts.

    On your main page, you're using one built into the Polaroid Gallery plugin (with cut-off titles). And on your gallery page, you're seeing yet another Fancybox built-into your Photocrati Theme (which currently has broken titles). This is overriding the one in Optimizer, and is loading sitewide, so would best be removed.

    The Fancybox in Optimizer Premium works perfectly on the gallery page when I remove the Fancybox scripts and styles from your Photocrati theme. To do this, simply cut or comment out the following from your theme's header.php file (or anything Fancybox related in your functions.php)...

    <link rel="stylesheet" href="http://www.teamcorcoran.com/prom/wp-content/themes/photocrati-theme-v4.5.1/admin/css/jquery.fancybox-1.3.4.css" type="text/css" />
    
    <script type="text/javascript" src="http://www.teamcorcoran.com/prom/wp-content/themes/photocrati-theme-v4.5.1/admin/js/jquery.fancybox-1.3.4.pack.js"></script>
    
    <script type="text/javascript">
    //<![CDATA[
    jQuery.noConflict();
    
    (function () {
    	var div = document.createElement('div'),
    	ref = document.getElementsByTagName('base')[0] ||
    		    document.getElementsByTagName('script')[0];
    
    	div.innerHTML = '­<style> iframe { visibility: hidden; } </style>';
    
    	ref.parentNode.insertBefore(div, ref);
    
    	jQuery(window).load(function() {
    		div.parentNode.removeChild(div);
    	});
    })();
    
    	function formatTitle(title, currentArray, currentIndex, currentOpts) {
    		return '<div id="tip7-title"><span><a href="javascript:;" onclick="jQuery.fancybox.close();"><img src="http://www.teamcorcoran.com/prom/wp-content/themes/photocrati-theme-v4.5.1/admin/css/closelabel.gif" alt="close label" /></a></span>' + (title && title.length ? '<b>' + title + '</b>' : '' ) + 'Image ' + (currentIndex + 1) + ' of ' + currentArray.length + '</div>';
    	}
    	//]]>
    	jQuery(document).ready(function() {
    
    	jQuery("a.decoy").fancybox({
    		'overlayColor'		: '#0b0b0f',
    		'overlayOpacity'	: 0.8,
    		'centerOnScroll'	: true,
    				'titlePosition'		: 'outside'
    				//'href'				: ''+site+''
    	});
    
    	var lighboxSelector = '.photocrati_lightbox_always, .photocrati_lightbox';
    
    	jQuery(lighboxSelector).fancybox({
    		'overlayColor'		: '#0b0b0f',
    		'overlayOpacity'	: 0.8,
    		'centerOnScroll'	: true,
    				'titlePosition'		: 'outside'
    			});
    
    });
    </script>

    Optimizer adds room for a one-line title (when provided) in Fancybox's image height calculations, ensuring there's the same space at the bottom of the viewport (beneath the title) as there is at the top (above the image). If you like the look of it on your gallery page (after removing the code above), I can write you a custom function so it loads on your main page also to fix the cut-off titles.

    Hope this helps!

    Cheers,
    Mark.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.