From: Kevin Ball Date: Tue, 1 Nov 2016 18:47:57 +0000 (-0700) Subject: Fix resize behavior of orbit X-Git-Tag: v6.3-rc1~30^2 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=refs%2Fpull%2F9317%2Fhead;p=thirdparty%2Ffoundation%2Ffoundation-sites.git Fix resize behavior of orbit --- diff --git a/js/foundation.orbit.js b/js/foundation.orbit.js index 76173e811..46786dd17 100644 --- 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 3e04c5beb..32ee22208 100644 --- 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 {