WordPress.org

Ready to get started?Download WordPress

Forums

Easy FancyBox
[resolved] got fancybox working with ajax pagination in nextgen (5 posts)

  1. Webmaster BG3
    Member
    Posted 1 year ago #

    Does anyone know how to get ajax pagination working - in nextgen gallery - used in combination with fancybox, instead of shutter effect?

    I can easily force nextgen to paginate thumbs by ajax with a little hack on php code (by default nextgen try to disable ajax if you use a different visualizzation effect instead the default one) but on ajax created content i cannot get fancybox working. The stuff is that fancybox will be opened on the first (non ajax) pageview, but does not open in others ajax paginated content. Instead of fancybox the picture was opened by the browser.

    I tried to read this topic and make some try, but without success.

    1) http://wordpress.org/support/topic/about-that-ajax-issue
    2) http://wordpress.org/support/topic/plugin-easy-fancybox-easy-fancybox-reinit-after-ajax-content-load
    3) http://wordpress.org/support/topic/plugin-nextgen-gallery-ajax-effect-for-lightbox (for lightbox)
    4) http://wordpress.org/support/topic/plugin-nextgen-gallery-problem-with-pagination-with-2-or-more-galleries (for colorbox)

    http://wordpress.org/extend/plugins/easy-fancybox/

  2. Webmaster BG3
    Member
    Posted 1 year ago #

    I have found the solution by myself, so I like to post the answer for anyone who has the same problem.

    N.B. this work only on development version of Easy Fancybox. Get the plugin link at the end of the post

    1) Configure Nextgen effect for fancybox:
    Go to http://yoursite.com/wp-admin/admin.php?page=nggallery-options at tab "Effects", select "Custom" as JavaScript Thumbnail effect and put this line of code in Link Code line

    class="fancybox" rel="%GALLERY_NAME%"

    2) Modify plugin code to get ajax pagination for custom effect:
    Open the file wp-content/plugins/nextgen-gallery/nggallery.php and locate this block of code:

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

    Modify the code to be like this:

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

    Now open the file wp-content/plugins/nextgen-gallery/js/ngg.js and locate the line:

    shutterReloaded.init('sh');

    You must found two occurrence in Nextgen Gallery 1.9.12. Change the code like this for both occurrence:

    //shutterReloaded.init('sh');
    easy_fancybox_handler();

    That's all! Now you have Ajax pagination and Easy Fancybox working together.

    Warning: the modification i suggest will broke the default shutter effect, because I commented out it's call. Another problem is that you could have some error if you uninstall or disable Easy Fancybox. So it need to be hardened if you want a safe code

    My setup:
    - WordPress 3.5.1
    - Easy Fancybox 1.5.0dev11 from http://downloads.wordpress.org/plugin/easy-fancybox.zip
    - Nextgen Gallery 1.9.12

    Hope to be helpful

  3. RavanH
    Member
    Plugin Author

    Posted 1 year ago #

    Hi BG3, absolutely fantastic! Thanks for sharing your work :)

    I hope this remains valid with the new 1.5 release...

  4. Webmaster BG3
    Member
    Posted 1 year ago #

    Updated today. Everything sounds good with 1.5 release.

  5. JRiley21
    Member
    Posted 1 year ago #

    Just wanted to say thanks for this! Worked flawlessly. :)

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic