Menu icon Foundation
Using interchange with orbit?

Is it possible to integrate interchange into an orbit slider, currently orbit crops the bottom off the image after the change of source of the image?

Is there a live example anyone has done to see this working or is it even possible? Seems odd as this potentially will be your biggest image on the page?

interchangeOrbit

Is it possible to integrate interchange into an orbit slider, currently orbit crops the bottom off the image after the change of source of the image?

Is there a live example anyone has done to see this working or is it even possible? Seems odd as this potentially will be your biggest image on the page?

MOULOUD Allache over 3 years ago

Hi, 

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

  1. Added all sliders format in assets/partials ex: slide.html, large-slider.html etc..
  2. Added the interchange plugin and a new data-orbit-interchange attribute
  3. Watch for 'replaced-zf-interchange' event on [data-orbit-interchange]
  4. Get an image from the slide freshly loaded and wait for image loading
  5. 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

Josef Ulander over 5 years ago

Thanks Fritz, your solution works for me!

Fritz over 5 years ago

$(document).ready(function() {

  // init showing interchange images inside orbit
  $('[data-orbit]').on('replace', 'img', function(e, new_path, original_path) {
    $('[data-orbit]').foundation('orbit').resize();
  });


});

simon kerr over 5 years ago

I found this seems to work -
The resize event on the orbit is triggered once the interchange images have been replaced.

 $('#orbit-ul').on('replace', 'img', function(e, new_path, original_path) {
    $('#orbit-ul').foundation('orbit').resize();
});

Norbert Stüken over 5 years ago

Thanks Neil for your hack. As Rafi stated on the above github url, there is an open discussion about this issue and there jaycode posted a workaround which is not depended on a timer:

 $(document).on('replace', 'img', function (e, new_path, original_path) {
    $(window).trigger('resize');
});

By the way I'm only using interchange, so this resize issue doesn't have anything to do with Orbit.

Rafi Benkual over 5 years ago

Looks like there is an open github issue for this https://github.com/zurb/foundation/issues/4374

If anyone has an idea for a solution, please submit a pull request to help everyone out!

Maarten van der Meer almost 6 years ago

Hello, I am quite new to Foundation. So far I'm loving this framework!

I have the same problem of the images being cut off on the bottom. Adding the reflow-code Rafi provided doesn't solve this problem for me. Images in Orbit are still cut off and the slideshow won't start.
The code Neil provided does resize the images correctly, but still Orbit won't start unless this is done by clicking it.

Rafi Benkual almost 6 years ago

Reflow is the correct way to handle this. You can call the JS for orbit again this way.
$document.foundation('orbit', 'reflow');

Jedidja Bourgeois almost 6 years ago

It would be nice to have an official fix for this too :)

Andrea Jahn almost 6 years ago

Before calling orbit I change the images by myself:

        <div id="page-slider" class="slideshow-wrapper">
          <ul id="featured2" data-orbit>
            <?php for ($i = 0; $i < count($img_arr); $i++) : ?>
              <li>
                <div class="img-margin">
                  <img class="change-img" src="<?php echo($img_arr[$i][3]); ?>" data-bigsrc="<?php echo($img_arr[$i][0]); ?>" alt="<?php echo $img_arr[$i][1]; ?>" />
                </div>
                <div class="orbit-caption">
                  <?php echo($img_arr[$i][2]); ?>
                </div>
              </li>
            <?php endfor; ?> 
          </ul>
        </div>
 function changeImageSize() {
  if (Modernizr.mq('only screen and (min-width: 768px)') || (navigator.userAgent.match(/MSIE 8/i)))   {
    $j.each($j('#page-slider img'), function(index, value) {
      var bigSrc = $j(this).attr("data-bigsrc");
      $j(this).attr("src", bigSrc);
    });
  }
}

Asif almost 6 years ago

Neil Your Solution was helpful.

I was trying to use interchange with Caroufredsel slider and not orbit and faced similar issue with the the image height of the first image not being detected by Caroufredsel.
My initial solution was to delay the caroufredsel JS code by 500 instead of delaying interchange reflow worked but as neil pointed out it was causing other issues on window resize.

For now I'm using neil's suggestion of calling Resize on a timer.

Since I'm using a slider other than orbit and am facing the same issue, it is clear now that the issue is not with Orbit or any other slider but it has something to do with interchange.

I really hope we figure out what the real problem is and get a real fix rather than using a hack like Resize on a timer.

Neil Mastroianni almost 6 years ago

I was facing a similar issue and your post helped. I figured that I'd share my situation and solution.

I want to use Interchange to load a partial for medium and larger screen devices. In that partial was an orbit slider that wouldn't render properly. Here's the HTML for the index.html and then the partial, followed by the javascript in my app.js file that did the trick.

My index.html file (where the Interchange is called):

<div data-interchange="[interchange/content.html, (medium)], [interchange/content.html, (large)]" class="large-content hide-for-small">
</div>

My content.html file (loaded on medium and large devices):

<div class="row">
    <div class="large-12 columns">
    <ul data-orbit id="slider">
      <li><img src="http://placehold.it/1400x400&text=[ img 1 ]" /></li>
      <li><img src="http://placehold.it/1400x400&text=[ img 2 ]" /></li>
      <li><img src="http://placehold.it/1400x400&text=[ img 3 ]" /></li>
    </ul>

    <hr />
    </div>
</div>

My app.js file:

$(document).foundation();
$(document).on("replace", function() {
  $('#slider').foundation('orbit');
  setTimeout(function() {$(document).resize();}, 500);
});

I noticed that the $('#slider').foundation('orbit'); made the slider look almost the way it was supposed to be but that the images were cut off. When I tried to do a $(document).foundation('interchange', 'reflow');, that made the slider display correctly but then made my other Interchange content stop changing on browser resizes. That was unacceptable.

I then noticed if I left out the $(document).foundation('interchange', 'reflow');, when I resized the browser the Orbit slideshow fixed itself. This leads me to believe that some sort of 'resize' event is causing this to happen. That is why my "fix" calls a 'resize()' on a timer like your suggestion.

The only thing left to figure out now is how to call this after the assets requested on an interchange event have successfully loaded and not to rely on a timer. Any ideas on that?

Steve Trask almost 6 years ago

Just wanted to reply as had to change my account due to Zurb accidentally de activating my account!

thanks for your replies, Marc I have opted to go your route unless a better solution appears. For the future I am not sure if we will use interchange to do the images as it seems a bit hit and miss in certain situations. Also to the point we have no need for it to switch out copy as twig will do do that anyway.

Thanks again

Marc Stevens about 6 years ago

I was having the same issue and tried Brandon's suggestion, but now Orbit doesn't seem to be working. I only see the first slide. Maybe I would need to re-initialize orbit on the 'replace' event?

EIther way, it seems less than ideal. I'd rather have one orbit slider that uses interchange for images than three separate sliders that I have to manage and initialize separately.

For now, I'm just triggering an interchange reflow after 500 milliseconds, and it seems to be resizing orbit based on the current interchange image. But not ideal, as hardcoding that delay time seems dangerous.

setTimeout(function() {
$(document).foundation('interchange', 'reflow');
}, 500);

Brandon Arnold about 6 years ago

You may be better off, just using interchange to replace the code of the slider as a whole. The orbit slider's size may be getting assigned before the interchange images are getting loaded

Zach Frank about 6 years ago

Yeah I tried this using plachold.it images. When I resize my screen everything seems to work but at first page load the orbit slideshow is cut off like it doesn't know the height of the images (images look like they're still in there). Weird.. not sure whats going on..

<ul data-orbit>
        <li>
          <img data-interchange="[http://www.placehold.it/800x600, (default)], [http://www.placehold.it/1024x600, (medium)], [http://www.placehold.it/1280x600, (large)]" alt="slide 1" />
          <noscript><img src="http://www.placehold.it/800x600"></noscript>
          <div class="orbit-caption">
            Caption One.
          </div>
        </li>
        <li>
          <img data-interchange="[http://www.placehold.it/800x600, (default)], [http://www.placehold.it/1024x600, (medium)], [http://www.placehold.it/1280x600, (large)]" alt="slide 2" />
          <noscript><img src="http://www.placehold.it/800x600"></noscript>
          <div class="orbit-caption">
            Caption Two.
          </div>
        </li>
        <li>
          <img data-interchange="[http://www.placehold.it/800x600, (default)], [http://www.placehold.it/1024x600, (medium)], [http://www.placehold.it/1280x600, (large)]" alt="slide 3" />
          <noscript><img src="http://www.placehold.it/800x600"></noscript>
          <div class="orbit-caption">
            Caption Three.
          </div>
        </li>
      </ul>

Jeff Selser about 6 years ago

+1