Fix resize behavior of orbit

diff --git a/js/foundation.orbit.js b/js/foundation.orbit.js
index 76173e81109d5099e0e5696e81ed3f758cacdccd..46786dd17a25b23699fd1946615f4797bd0fbd77 100644 (file)
--- a/js/foundation.orbit.js
+++ b/js/foundation.orbit.js
@@ -48,8 +48,15 @@ class Orbit {
 
     this.$wrapper = this.$element.find(`.${this.options.containerClass}`);
     this.$slides = this.$element.find(`.${this.options.slideClass}`);
+
     var $images = this.$element.find('img'),
-    initActive = this.$slides.filter('.is-active');
+        initActive = this.$slides.filter('.is-active'),
+        id = this.$element[0].id || Foundation.GetYoDigits(6, 'orbit');
+
+    this.$element.attr({
+      'data-resize': id,
+      'id': id
+    });
 
     if (!initActive.length) {
       this.$slides.eq(0).addClass('is-active');
@@ -114,9 +121,7 @@ class Orbit {
   */
   _prepareForOrbit() {
     var _this = this;
-    this._setWrapperHeight(function(max){
-      _this._setSlideHeight(max);
-    });
+    this._setWrapperHeight();
   }
 
   /**
@@ -141,7 +146,7 @@ class Orbit {
 
     if (counter === this.$slides.length) {
       this.$wrapper.css({'height': max}); //only change the wrapper height property once.
-      cb(max); //fire callback with max height dimension.
+      if(cb) {cb(max);} //fire callback with max height dimension.
     }
   }
 
@@ -168,6 +173,10 @@ class Orbit {
     //**Now using custom event - thanks to:**
     //**      Yohai Ararat of Toronto      **
     //***************************************
+    //
+    this.$element.off('.resizeme.zf.trigger').on({
+      'resizeme.zf.trigger': this._prepareForOrbit.bind(this)
+    })
     if (this.$slides.length > 1) {
 
       if (this.options.swipe) {

diff --git a/scss/components/_orbit.scss b/scss/components/_orbit.scss
index 3e04c5beb6b74bbf00609a9fbc488c79f2675cb2..32ee22208a087eac12c9e0ee027a4b7e63542514 100644 (file)
--- a/scss/components/_orbit.scss
+++ b/scss/components/_orbit.scss
@@ -61,12 +61,12 @@ $orbit-control-zindex: 10 !default;
   margin: 0;
   overflow: hidden;
   list-style: none;
+  height: 0px; // Prevent FOUC by not showing until JS sets height
 }
 
 /// Adds styles for the individual slides of an Orbit slider. These styles are used on the `.orbit-slide` class.
 @mixin orbit-slide {
   width: 100%;
-  max-height: 100%;
 
   &.no-motionui {
     &.is-active {