WordPress.org

Ready to get started?Download WordPress

Forums

[Plugin: NextGEN Gallery] AJAX effect for lightbox (10 posts)

  1. nrajesh
    Member
    Posted 5 years ago #

    Hi,
    Request someone to post/ list out the modifications required to get javascript image effect (AJAX effect) in the version 1.3 of next-gen; I use lightbox effect.

    Thanks,
    Rajesh

  2. Alex Rabe
    Member
    Posted 5 years ago #

    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

  3. nrajesh
    Member
    Posted 5 years ago #

    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

  4. Alex Rabe
    Member
    Posted 5 years ago #

    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: "http://your.blog.com/wp-content/plugins/nextgen-gallery/",
    	loading: "loading"
    };
    /* ]]> */
    </script>
  5. draver
    Member
    Posted 5 years ago #

    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.

  6. mibsolutionsllc
    Member
    Posted 4 years ago #

    Is this required to just activate the lightbox effect?

  7. mkonthecoast
    Member
    Posted 4 years ago #

    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

  8. cornetjr
    Member
    Posted 4 years ago #

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

  9. gr8whtd0pe
    Member
    Posted 4 years ago #

    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: http://www.wvshowandgo.com

  10. zombaya
    Member
    Posted 4 years ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.