Fancybox with Ajax…help

  • I am having an issue that I think others have had, with only vague references made to a fix or the answer that is a best practice with wordpress. This is what I have in my .js file and dont know if I am calling fancybox on success correctly or if I am way off.

    jQuery(document).ready(function($) {
	$('.tax-filter').click( function(event) {

		// Prevent defualt opening tag page
		if (event.preventDefault) {
			event.preventDefault();
		} else {
			event.returnValue = false;
		}

		// Get tag slug from title attirbute
		var selecetd_taxonomy = $(this).attr('title');

		$('.tagged-posts').fadeOut();

		data = {
			action: 'filter_posts',
			afp_nonce: afp_vars.afp_nonce,
			taxonomy: selecetd_taxonomy,
		};

		$.ajax({
			type: 'post',
			dataType: 'json',
			url: afp_vars.afp_ajax_url,
			data: data,
			success: function( data, textStatus, XMLHttpRequest ) {
				$('.tagged-posts').html( data );
				$('.tagged-posts').fadeIn();
				$('.video-post').fancybox();
				console.log( textStatus );
				console.log( XMLHttpRequest );
			},
			error: function( MLHttpRequest, textStatus, errorThrown ) {
				console.log( MLHttpRequest );
				console.log( textStatus );
				console.log( errorThrown );
				$('.tagged-posts').html( 'No posts found' );
				$('.tagged-posts').fadeIn();
			}
		})

	});
});

    I have the posts being called and the fancybox work perfectly on the original page, but when dynamically loading the content it is not being recognized.

    Any help would be greatly appreciated.

    https://www.ads-software.com/plugins/easy-fancybox/

Viewing 10 replies - 1 through 10 (of 10 total)

  • Hi,

    You are right: Easy FancyBox needs to know when new content is loaded but… The line $('.video-post').fancybox(); is not going to do that.

    Try replacing that with $(document).trigger('post-load'); and let me know the result ??

    Thread Starter dpope0824

    (@dpope0824)

    Nope still defaulting to the original site link and ignoring class=”fancybox-youtube”

    Thread Starter dpope0824

    (@dpope0824)

    No other ideas?

    Thread Starter dpope0824

    (@dpope0824)

    Have tried multiple methods I have found online and ways other people got it working, but all those fixes seem to be quite old. Is there no other way to get the ajax loaded content to display in fancybox?

    Can you share a link to the web page so I can see it live?

    Thread Starter dpope0824

    (@dpope0824)

    It’s on an internal server.

    On pastebin

    This is all the code including the page template, js, and the function being used. I can put onto a test site I have in just a bit.

    There is the line 41

    echo '<a class="fancybox-youtube" href="' .get_the_permalink(). '">'.get_the_title().'</a>';

    in https://pastebin.com/uRqKX7Ef that should not be there (echoing non json encoded output) and the $result variables seem to be of no use here but otherwise, it looks OK.

    If you can set it up on a test site, it will be most helpful debugging further ??

    Oh, also you might want to change

    $output = the_content();

    to

    $output .= the_content();

    (note the dot there) to make each loop append to (instead of overwrite) the previous.

    Thread Starter dpope0824

    (@dpope0824)

    So I decided to take a break on creating my own filter page. I am now using the Search and Filter pro plugin. Would you have any experience in getting this to work with easy fancybox after the ajax call? They have poor documentation on their website.

    Hi, no I have no experience with that plugin but if you can get support from the developers, you could ask them if there is any event in their plugin triggered similar to $(document).trigger('post-load'); after new ajax content has loaded… If not, it will be impossible to make it work with Easy FancyBox.

    • This reply was modified 8 years, 6 months ago by Rolf Allard van Hagen. Reason: adding Search and Filter tag
Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Fancybox with Ajax…help’ is closed to new replies.