Menu icon Foundation
Cloning Orbit Slider to a different div

I have an element on the page that contains an Orbit Slider. I am using infoBox for Google Maps and essentially cloning the element on the page to the markers infoBox when clicked. This successfully appends the html of the Orbit Slider & Container to the markers infoBox. However, once this happens it loses it's instance when it is within the infoBox and just is a hard html copy of the html markup.

Screen shot 2015 06 23 at 4.06.52 pm

I have tried using $(document).foundation('orbit', 'reflow'); once the element is cloned but nothing takes change and I get an error of:

[Error] TypeError: undefined is not a function (evaluating 'instance.compute_dimensions()')
    (anonymous function) (foundation.js, line 4556)
    each (jquery.min.js, line 2)
	each (jquery.min.js, line 2)
	reflow (foundation.js, line 4552)
	bindings (foundation.js, line 126)
	init (foundation.js, line 4536)
	init_lib (foundation.js, line 367)
	init (foundation.js, line 330)
	(anonymous function) (foundation.js, line 720)
	each (jquery.min.js, line 2)
	each (jquery.min.js, line 2)
	foundation (foundation.js, line 719)
	(anonymous function) (app-min.js, line 2)

Anyone have any thoughts on what need to happen here? I can console log the [data-orbit] items that gets looped in the reflow and the instance for the cloned orbit slider is no longer there.

Ideas?

OrbitReflowclonejavascript

I have an element on the page that contains an Orbit Slider. I am using infoBox for Google Maps and essentially cloning the element on the page to the markers infoBox when clicked. This successfully appends the html of the Orbit Slider & Container to the markers infoBox. However, once this happens it loses it's instance when it is within the infoBox and just is a hard html copy of the html markup.

Screen shot 2015 06 23 at 4.06.52 pm

I have tried using $(document).foundation('orbit', 'reflow'); once the element is cloned but nothing takes change and I get an error of:

[Error] TypeError: undefined is not a function (evaluating 'instance.compute_dimensions()')
    (anonymous function) (foundation.js, line 4556)
    each (jquery.min.js, line 2)
	each (jquery.min.js, line 2)
	reflow (foundation.js, line 4552)
	bindings (foundation.js, line 126)
	init (foundation.js, line 4536)
	init_lib (foundation.js, line 367)
	init (foundation.js, line 330)
	(anonymous function) (foundation.js, line 720)
	each (jquery.min.js, line 2)
	each (jquery.min.js, line 2)
	foundation (foundation.js, line 719)
	(anonymous function) (app-min.js, line 2)

Anyone have any thoughts on what need to happen here? I can console log the [data-orbit] items that gets looped in the reflow and the instance for the cloned orbit slider is no longer there.

Ideas?

Rafi Benkual over 4 years ago

If you resize the screen does it reinitialize Orbit?

Maybe this will help http://foundation.zurb.com/forum/posts/1761-reinitialize-foundation-orbit-on-screen-resize