WordPress.org

Ready to get started?Download WordPress

Forums

Easy FancyBox
[resolved] Easy Fancybox reinit after ajax content load? (16 posts)

  1. diz01
    Member
    Posted 2 years ago #

    I'm trying to run easy-fancybox on a ajax based page. Content is loaded in #inside div and pictures and iframes that I want to use with fancybox is loaded in the same div. Do I need to somehow reinit easy-fancybox or it's not possible?

    Thanks for any ideas.

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

  2. RavanH
    Member
    Plugin Author

    Posted 2 years ago #

    Yes, you would need to fire the fancybox script each time after new content has been loaded via ajax requests.

    I have changed the way FancyBox is fired in the Development version that should make it possible to re-fire it after loading ajax content. In technical terms: instead of jQuery(document).ready(...) it now uses jQuery(document).bind('ready', ...) to allow a call like $(this).trigger("ready"); from within the ajax load function (or from inline script within the new content?) to re-fire FancyBox.

    But, this is theoretical and untested.

    So if you see any possibility to make use of this, please be so kind as to test the dev version from http://downloads.wordpress.org/plugin/easy-fancybox.zip and let me know if it works at all...

  3. diz01
    Member
    Posted 2 years ago #

    Sorry for a such delay, I tried it and I was able to re-fire it and it works, but problems come up in different environments, with links, forms and stuff. All in all it does work:)

  4. RavanH
    Member
    Plugin Author

    Posted 2 years ago #

    Is there a specific event trigger set by your ajax routine that I can bind fancybox to to re-fire the script?

    In the last two weeks I've adapted the dev version to be compatible with Gravity Forms that use ajax to display subsequent form pages by binding to a specific event defined in Gravity Forms. This works very well so if you know of such a thing existing in your setup, the same approach could be taken here :)

  5. ultione
    Member
    Posted 2 years ago #

  6. chriscatfr
    Member
    Posted 1 year ago #

    So what?

    I didn't understand how to make easy fancybox "refire". Sorry.

    I'm using a lot of JS and Ajax, I could launch refire() anywhere after a update of the page, if only I knew how...

  7. RavanH
    Member
    Plugin Author

    Posted 1 year ago #

    Hi chriscatfr,

    I'm not familiar with the correct terminology used for these things (forgive me if I use terms incorrectly) but this might explain the steps involved a bit:

    The FancyBox binding script is set to run on the most common event called 'ready' which is triggered the moment the complete HTML (complete DOM tree including content nodes) is loaded by the browser. But if some inline AJAX script loads new content, this event does not get triggered again. Instead, we need a new event to which we can assign the same FancyBox binding routine that is assigned to the 'ready' event. Without this, FancyBox will not get bound to any new elements that where introduced after the 'ready' event.

    So it all depends on the scripts you are using. For example: the plugin Gforms loads secondary form pages via AJAX and triggers a specific event with the name 'gform_post_render' each time new content has been loaded. Knowing this events name, we can now set up the FancyBox binding script so that it gets fired again each time this particular event occurs...

    For the coming release, I'll be working on a way to allow users to define additional (particular) event names on the options page. But if you are aware of any event names the scripts on your page use, I can tell you where / how to modify the current version :)

  8. chriscatfr
    Member
    Posted 1 year ago #

    Thank you it seems pretty clear.

    I must say that I have no idea how to identify the event we could use in my case.

    I'm think I use the most common way for Ajax in WordPress, using the builtin way

    Do you think you could tell me? my browser code follows:

    function item_load(e){
    
    	loading_start();
    
    	jQuery.ajax({
    		url: ajax_var.url,
    		data: {
    			action: 'posts',
    			offset: first_item_shown,
    			nb_posts: posts_per_page,
    			vendu: show_ventes,
    			dispo: show_dispo,
    		},
    		complete: function(xhr){
    			if(xhr.responseText){
    				reload_screen(xhr.responseText);
    				loading_stop();
    			}
    			else {
    				jQuery('<p>No more items available</p>').insertAfter(jQuery('article').last());
    			}
    		},
    		error: function(jqXHR, textStatus, errorThrown){
    				loading_error(textStatus, errorThrown);
    		}
    	});
    
    	e.preventDefault();
    }

    the 4 following functions are mine

    loading_start();
    reload_screen(xhr.responseText);
    loading_stop();
    loading_error(textStatus, errorThrown);

    Can't I just call a Fancybox function like 'init()' 'reload()' in one of them?

  9. RavanH
    Member
    Plugin Author

    Posted 1 year ago #

    Try jQuery(document).trigger('gform_post_render'); right after loading_stop(); or inside the loading_stop function somewhere...

  10. chriscatfr
    Member
    Posted 1 year ago #

    I just did, nothing changed. And no JS errors.
    I'm using the latest Browsers

  11. RavanH
    Member
    Plugin Author

    Posted 1 year ago #

    Do you have a link to your site so I can take a look?

  12. chriscatfr
    Member
    Posted 1 year ago #

    thank you for helping

    I created a minimum website for you. To make it easier

    http://wp-tests.gonzofamily.com/
    login is wp-tests and password same.

    Test :
    1- go to http://wp-tests.gonzofamily.com/
    2- notice how easy-Fancybox works properly, on the 2 posts when you click on their title
    3- change DISPLAY ITEMS to 3 or 4, fancybox won't work any more for any of the posts (I reload all of them instead of just adding, for good reasons)

    NB: I reload with Ajax only when DISPLAY ITEMS is increased, not decreased. So Fancybox still works when I decrease the number, and I lost it as soon as I increase the number again.

    You will want to have a look at JavaScript. It's in /wp-content/themes/cjg-wp-theme-tests/js/wp-tests.js

    Hope you can help. I saw so many posts on the internet, the solution is never on the client side.

  13. RavanH
    Member
    Plugin Author

    Posted 1 year ago #

    Sorry, I was not clear: you will have to use the dev version to get 'gform_post_render' working... Could you replace Easy FancyBox .9 with .10devXX ?

  14. chriscatfr
    Member
    Posted 1 year ago #

    nice to hear that you were working on it. Sorry for not guessing about the Dev version.

    Sadly the problem seems different, right from the beginning I get "The requested content cannot be loaded. Please try again later."

    In Media Settings, I selected
    - Images
    - Inline content

    When I switch back to the latest sable version it works again (before Ajax load new posts)

  15. RavanH
    Member
    Plugin Author

    Posted 1 year ago #

    Hi Chris, sorry I could not respond sooner... If you are using FancyBox for inline content in the dev version, you need to use class="fancybox-inline" instead of the old class="fancybox" that will remain for images only. Forgot to tell you about that ;)

  16. chriscatfr
    Member
    Posted 1 year ago #

    thank you. I really love your plugin I have made an extensive use of it in my next realise for a private website. Only missed this part and it works (now that that I changed into class="fancybox-inline").

    So the final solution is to use this line after each reload:

    function fancybox_reload(){
    
    	jQuery(document).trigger('gform_post_render');
    }

    (with the .10 version which is still being developed at the moment. )

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic