Using Foundation Orbit Alongside Interchange - Reflow issues

Question

I am not able to get orbit to trigger its natural behaviour as a slider, when interchange has done its job.

JS:

    $(document).foundation('interchange', {
        named_queries : {
            small_range : 'only screen and (min-width:0px) and (max-width: 768px)',
            medium_range : 'only screen and (min-width:769px) and (max-width: 1024px)',
            large_range : 'only screen and (min-width:1025px) and (max-width: 1200px)',
            xlarge_range : 'only screen and (min-width:1201px)',
        }
    });

I have interchange running on another part of site and all works fine there. I need to add obit reflow to the code above with breaking the current interchange html Orbit settings use the data attr).

I have tried:

$(document).foundation('interchange', 'orbit', 'reflow', {

But to no avail. To clarify Interchange works fine across the site, however when the DOM gets changed the slider behaviour is not triggered..

Answer 1

I actually fixed my issue. I was using interchange insert an html file with an orbit slider for medium and large screens, but a different file without a slider for small screens. The orbit slider would not work at all after the interchange since the foundation js already fired after the slider was loaded. I fixed it by including this IN the html file i was including that had the orbit slider in order to re-call the js for the slider.

<script src="../js/vendor/jquery.js"></script>
    <script src="../js/foundation.min.js"></script>
    <script>
      $(document).foundation('orbit', {
  timer_speed: 10000,
  animation_speed: 500,
  bullets: true,
  stack_on_small: true
});

by including the 'orbit' call it reloaded the slider and fixed it after the interchange. is that your issue?

Answer 2

I had the same issue recently, so after many tests this worked for me :

Added all sliders format in assets/partials ex: slide.html, large-slider.html etc.. Added the interchange plugin and a new data-orbit-interchange attribute Watch for 'replaced-zf-interchange' event on [data-orbit-interchange] Get an image from the slide freshly loaded and wait for image loading Then init the plugins agains

a quick exemple :

html :

<div class="widget large-9 medium-8" data-orbit-interchange data-interchange="[assets/partials/sliders/home-slider.html, small],[assets/partials/sliders/home-slider-large.html, large]"></div>

javascript :

$('[data-orbit-interchange]').on('replaced.zf.interchange', function () {

        var element = $(this).find('.orbit').first();

        var img = $(element).find('.orbit-image').first();

        img.on('load', function() {

            element.foundation();

        });

 });

this is not the best solution i guess , but it worked for me,

Hope this can help