Menu icon Foundation
F5 orbit not reinitializing!!!

I ran into an annoying issue, i am trying to ajax load some content into orbit however the call to reinitialize it doesn't work.

Is this a bug or my error?

$('.post a').click(function () {
	var retrieve = $(this).attr('href');
	
	$('.orbit-container, .feature > .row').animate({opacity:0},500, function() {
		$('.featureWrap > ul').load(retrieve + ' .featureWrap > ul > *');
		$('.feature > .row').load(retrieve + ' .feature > .row > *');
		$(document).foundation({orbit: {timer: false}});
		$('.orbit-container, .feature > .row').animate({opacity:1},500);
	});
	
	return false;
});
            

         

Orbit

I ran into an annoying issue, i am trying to ajax load some content into orbit however the call to reinitialize it doesn't work.

Is this a bug or my error?

$('.post a').click(function () {
	var retrieve = $(this).attr('href');
	
	$('.orbit-container, .feature > .row').animate({opacity:0},500, function() {
		$('.featureWrap > ul').load(retrieve + ' .featureWrap > ul > *');
		$('.feature > .row').load(retrieve + ' .feature > .row > *');
		$(document).foundation({orbit: {timer: false}});
		$('.orbit-container, .feature > .row').animate({opacity:1},500);
	});
	
	return false;
});
            

         
Jeff Magill almost 4 years ago

Did you ever figure this out? I'm having a similar problem with the reveal modal.

Shawn Jones almost 4 years ago

In the file that my ajax calls, I had to include the foundation call again to reinitialize.

$(document).foundation();

After I did that, my reveal modals worked correctly.

Matt Pilott over 3 years ago

Nope still having the same issue. I have tried putting the $(document).foundation(); in the page i am calling with ajax, and nothing works. It's been weeks and weeks (well 2 months) and i still cannot get this sorted. I may have to switch to another slider plugin which sucks as i quite like orbit.

Anyone else got a solution?

Rafi Benkual over 3 years ago

It appears that Orbit has a reflow function.

You can try this:
```
// If you add new content after the page has been loaded, you will need to trigger a reflow by running one of the following:
$(document).foundation('orbit', 'reflow');

// OR for all Foundation components
$(document).foundation('reflow');```

Matt Pilott over 3 years ago

It still seems to be stuck. Take a look http://matt-pilott.com/work.php

Rafi Benkual over 3 years ago

Here is a JS workaround http://cdpn.io/ielGv

Bitsynthesis over 3 years ago

Triggering a window resize event is pretty ugly. Is there really no way of calling Orbit's refresh / reflow / re-init method more directly?

This seems to be a case of trying too hard to guess what the end user will want (only re-initializing on window resize), rather than providing the tools for them to build what they want.

Jose Ayudarte over 3 years ago

Hi!
I have had the same problem with orbit and dynamic content loading. After several tries with $(document).foundation("reflow") and resize calling, I have found the only solution has worked for me is to call resize event within a timer. But the timer has to be 500ms long at least.

Hope this help some people!