tubular icon indicating copy to clipboard operation
tubular copied to clipboard

Reinitializing tubular after AJAX call

Open dingo-d opened this issue 9 years ago • 0 comments

Is there a way to reinitialize tubular after an AJAX call?

I have a front page, that has a video background created with tubular. I've even put it in function, so that I could call it on success() in ajax, but nothing happens. The code is like this:

var video_settings = { ratio: 16/9, // usually either 4/3 or 16/9 -- tweak as needed videoId: 'LOKzaU4soXw', // random video mute: true, repeat: true, width: $(window).width(), wrapperZIndex: 1, start: 0, end:0, };
function video_init() {
    $('#wrapper').tubular(video_settings);
}

video_init();

In my ajax I have, inside success: function(data, textStatus, jqXHR){}

if ($('#tubular-container').length && $('#tubular-shield').length) { $('#tubular-container').show(); $('#tubular-shield').show(); } else { video_init(); }

This is because If I'm on my front page, I'm just hiding the tubular containers when I'm loading other pages, but the video will go on loop in the background. I'm loading other pages in a different wrapper than that of the video.

If I'm on a different page, and want to go to front page with ajax, I will initialize the video (I'm using php to get my pages).

The strange thing is that I can see the #tubular-container and #tubular-shield in my DOM, but the video is not initialized (in the second case when I'm not loading the front page). I can even see the video_settings variable (object) in my console if I output it with the console.log() inside the success.

Any idea why the player is not showing? I don't have any other errors on the page...

dingo-d avatar Oct 26 '15 12:10 dingo-d