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?

Jeff Selser over 5 years ago

+1

Zach Frank over 5 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>

Brandon Arnold over 5 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

Marc Stevens over 5 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);

Steve Trask over 5 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

Neil Mastroianni over 5 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?

Asif over 5 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.

Andrea Jahn over 5 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);
    });
  }
}

Jedidja Bourgeois over 5 years ago

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

Rafi Benkual over 5 years ago

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

Maarten van der Meer over 5 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 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!

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.

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();
});

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();
  });


});

Josef Ulander over 5 years ago

Thanks Fritz, your solution works for me!

MOULOUD Allache about 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