Menu icon Foundation
Is it possible to dynamically change data attributes with JavaScript?

With Foundation 6.4.3, is it possible to dynamically change an existing orbit's data attributes with JavaScript?

I have this element:

<div id="orbit-x201467" class="orbit component-profile-slider mobile-expand" role="region" aria-label="GalleryName" data-orbit="gh3mg8-orbit" data-timer-delay="1000" data-auto-play="true" data-resize="orbit-x201467">

I'd like to change one of the orbit's data attributes with JavaScript during a breakpoint change that I'm successfully catching with this skeleton:

$(window).on('changed.zf.mediaquery', function(event, newSize, oldSize) {

  // newSize is the name of the now-current breakpoint, oldSize is the previous breakpoint

});

I've tried using this syntax inspired from the old Foundation 5 docs:

$("#orbit-x201467").foundation({orbit: {autoPlay: false}});

but I always get this error:

"Uncaught TypeError: We're sorry, object is not a valid parameter. You must use a string representing the method you wish to invoke."

I've also tried putting quotes around "orbit" and "autoPlay".

Is there a JavaScript syntax for changing an existing orbit's data attributes, within Foundation 6?

Thank you.

data attributesjavascript

With Foundation 6.4.3, is it possible to dynamically change an existing orbit's data attributes with JavaScript?

I have this element:

<div id="orbit-x201467" class="orbit component-profile-slider mobile-expand" role="region" aria-label="GalleryName" data-orbit="gh3mg8-orbit" data-timer-delay="1000" data-auto-play="true" data-resize="orbit-x201467">

I'd like to change one of the orbit's data attributes with JavaScript during a breakpoint change that I'm successfully catching with this skeleton:

$(window).on('changed.zf.mediaquery', function(event, newSize, oldSize) {

  // newSize is the name of the now-current breakpoint, oldSize is the previous breakpoint

});

I've tried using this syntax inspired from the old Foundation 5 docs:

$("#orbit-x201467").foundation({orbit: {autoPlay: false}});

but I always get this error:

"Uncaught TypeError: We're sorry, object is not a valid parameter. You must use a string representing the method you wish to invoke."

I've also tried putting quotes around "orbit" and "autoPlay".

Is there a JavaScript syntax for changing an existing orbit's data attributes, within Foundation 6?

Thank you.

James Watkin about 1 year ago

I also tried this syntax:

Foundation.reInit($("#orbit-x201467"), {autoPlay: false});

Although this didn't work either, maybe some variation of it will. At least this syntax doesn't throw a JavaScript error.