[Plugin: NextGEN Gallery] AJAX effect for lightbox

Sorry, the solution is not so trivial as it should be :

1. Copy the script js/ngg.js to your theme folder
2. Add the script to your header
3. Change the script at the follow lines :

line 67,68 and 133,134

// add shutter-listeners again
shutterReloaded.init('sh');

for Lightbox it should be instead (never tested)

lightbox.updateImageList();

Hope this works for your

Hi,
I did the changes in those two lines and put the ngg.js in the js folder of my theme (I use K2).

I added this line to the k2-hook-up (plugin) header portion:

<script type=”text/javascript” src=”<?php bloginfo(‘template_directory’); ?>/js/ngg.js”></script>

Didn’t seem to work! Any suggestions?

Thanks,
Rajesh

I forgot that you need to define as well the path, ebfore you add the script itself :

So please add before :

<script type='text/javascript'>
/* <![CDATA[ */
var ngg_ajax = {
	path: "https://your.blog.com/wp-content/plugins/nextgen-gallery/",
	loading: "loading"
};
/* ]]> */
</script>

Thanks Alex. It’s working with a little problem: the loading image near the cursor is still present even the new gallery page is loaded.

Is this required to just activate the lightbox effect?

Hi Alex,

Thanks for posting this. I’m using nextgen with highslide. The code you posted works but there’s one thing I would like to adjust.

Going forward keeps me on the same page, but if I go back it will either reload the page or take me off the main index page to the specific post page. Do you know where I would look to correct this so it doesn’t take the user away from the current page?

Thanks for your help,
Michael

Anybody figure out why the loading script continues to run even after everything is loaded?

Any updates on this at all? I tried what was posted here and it does not work.

I would just like for it to change thumbnails without going to a whole new page. It’s not a major thing, I would just like it. lol

Oh and I know I can just use the Shutter effect, but I don’t like it, and it doesn’t match with the rest of the site if I do this.

NextGEN Gallery Version: 1.5.3
Wordpress Version: 2.9.2
Site: https://www.wvshowandgo.com

Hi everyone,

I changed it so I could use fancybox instead of shutter. The things I changed are:

In js/ngg.js:

// add shutter-listeners again
//shutterReloaded.init('sh');
FancyBoxReload();  // So that it will load fancybox after updating

I also included fancyboxconf.js so that fancybox loads after start-up.

In nggalery.php – line 341 I added:

// activate Fancybox
            if ( ($this->options['thumbEffect'] == "custom") ) {
                wp_register_script('fancybox', NGGALLERY_URLPATH .'fancybox/jquery.fancybox-1.3.1.pack.js', false);
                wp_enqueue_script( 'fancybox' );
                wp_register_script('fancyboxConf', NGGALLERY_URLPATH .'fancybox/fancyboxConf.js', false);
                wp_enqueue_script( 'fancyboxConf' );
            }

You also have to change the if-test to add the ajax-script. You do this also in ngggalery.php a bit after the above snippet. There will allready be a script to load the ajax-navigation, you just have to alter the if-test so that it will call the ajax-js-file if you use the custom thumbEffect.

// Load AJAX navigation script, works only with shutter script as we need to add the listener
            if ( $this->options['galAjaxNav'] ) {
                if ( ($this->options['thumbEffect'] == "custom") ) {
                    wp_enqueue_script ( 'ngg_script', NGGALLERY_URLPATH . 'js/ngg.js', array('jquery'), '2.0');
                    wp_localize_script( 'ngg_script', 'ngg_ajax', array('path'		=> NGGALLERY_URLPATH,
                            'callback'  => get_option ('siteurl') . '/' . 'index.php?callback=ngg-ajax',
                            'loading'	=> __('loading', 'nggallery'),
                            ) );
                }
            }

In fancyboxConf.js is FancyBoxReload() declared.
fancyboxConf.js:

function FancyBoxReload() {
    /* This is basic - uses default settings */

	jQuery("a.fancybox").fancybox({
		'titlePosition'	: 'over',
		'cyclic'		: true,
		'onComplete'	:	function() {
			if(jQuery("span#fancybox-title-over").text() == " "){
				jQuery("span#fancybox-title-over").parent().hide();
			}
		}
	});
}

jQuery(document).ready(function() {
	FancyBoxReload();
});

This way it will load fancybox on page-load and after receiving ajax-response.

I hope it can be of any help to you.