Permalink
Browse files

Add fluid option for using Orbit within responsive layouts

  • Loading branch information...
1 parent ab2f9c4 commit 5fbae990909cfcd59138b45914d8a9b96c3b56dc Matt committed Nov 16, 2011
Showing with 70 additions and 15 deletions.
  1. +34 −3 jquery.orbit-1.3.0.js
  2. +36 −12 orbit-1.3.0.css
View
@@ -27,6 +27,7 @@
bulletThumbs: false, // thumbnails for the bullets
bulletThumbLocation: '', // location from this file where thumbs will be
afterSlideChange: $.noop, // empty function
+ fluid: false, // true or ratio (ex: 4x3) to force an aspect ratio for content slides, only works from within a fluid layout
centerBullets: true // center bullet nav with js, turn this off if you want to position the bullet nav manually
},
@@ -66,6 +67,10 @@
this.$wrapper = this.$element.wrap(this.wrapperHTML).parent();
this.$slides = this.$element.children('img, a, div');
+ if (this.options.fluid) {
+ this.$wrapper.addClass('fluid');
+ }
+
this.$element.bind('orbit.next', function () {
self.shift('next');
});
@@ -103,8 +108,7 @@
loaded: function () {
this.$element
.addClass('orbit')
- .width('1px')
- .height('1px');
+ .css({width: '1px', height: '1px'});
this.setDimentionsFromLargestSlide();
this.updateOptionsIfOnlyOneSlide();
@@ -135,7 +139,15 @@
setDimentionsFromLargestSlide: function () {
//Collect all slides and set slider size of largest image
- var self = this;
+ var self = this,
+ $fluidPlaceholder;
+
+ self.$element.add(self.$wrapper).width(this.$slides.first().width());
+ self.$element.add(self.$wrapper).height(this.$slides.first().height());
+ self.orbitWidth = this.$slides.first().width();
+ self.orbitHeight = this.$slides.first().height();
+ $fluidPlaceholder = this.$slides.first().clone();
+
this.$slides.each(function () {
var slide = $(this),
slideWidth = slide.width(),
@@ -148,9 +160,27 @@
if (slideHeight > self.$element.height()) {
self.$element.add(self.$wrapper).height(slideHeight);
self.orbitHeight = self.$element.height();
+ $fluidPlaceholder = $(this).clone();
}
self.numberSlides += 1;
});
+
+ if (this.options.fluid) {
+
+ if (typeof this.options.fluid === "string") {
+ $fluidPlaceholder = $('<img src="http://placehold.it/' + this.options.fluid + '" />')
+ }
+
+ self.$element.prepend($fluidPlaceholder);
+ $fluidPlaceholder.addClass('fluid-placeholder');
+ self.$element.add(self.$wrapper).css({width: 'inherit'});
+ self.$element.add(self.$wrapper).css({height: 'inherit'});
+
+ $(window).bind('resize', function () {
+ self.orbitWidth = self.$element.width();
+ self.orbitHeight = self.$element.height();
+ });
+ }
},
//Animation locking functions
@@ -339,6 +369,7 @@
this.$bullets = $(this.bulletHTML);
this.$wrapper.append(this.$bullets);
this.$slides.each(this.addBullet);
+ this.$element.addClass('with-bullets');
if (this.options.centerBullets) this.$bullets.css('margin-left', -this.$bullets.width() / 2);
},
View
@@ -8,14 +8,14 @@
/* PUT IN YOUR SLIDER ID AND SIZE TO MAKE LOAD BEAUTIFULLY
================================================== */
-#featured {
- width: 940px;
- height: 450px;
- background: #000 url('orbit/loading.gif') no-repeat center center;
+#caseStudies {
+ width: 1000px;
+ height: 210px;
+ background: #fff url('orbit/loading.gif') no-repeat center center;
overflow: hidden; }
-#featured>img,
-#featured>div,
-#featured>a { display: none; }
+#caseStudies>img,
+#caseStudies>div,
+#caseStudies>a { display: none; }
@@ -33,12 +33,16 @@ div.orbit {
height: 1px;
position: relative;
overflow: hidden }
+
+div.orbit.with-bullets {
+ margin-bottom: 40px;
+}
div.orbit>img {
position: absolute;
top: 0;
left: 0;
- display: none; }
+ /* display: none; */ }
div.orbit>a {
border: none;
@@ -171,9 +175,9 @@ div.slider-nav span.left {
position: absolute;
z-index: 1000;
list-style: none;
- bottom: -40px;
+ bottom: -50px;
left: 50%;
- margin-left: -50px;
+ margin-left: -50px;
padding: 0; }
.orbit-bullets li {
@@ -194,8 +198,28 @@ div.slider-nav span.left {
.orbit-bullets li.has-thumb {
background: none;
width: 100px;
- height: 75px; }
+ height: 75px; } }
.orbit-bullets li.active.has-thumb {
background-position: 0 0;
- border-top: 2px solid #000; }
+ border-top: 2px solid #000; }
+
+/* FLUID LAYOUT
+ ================================================== */
+.orbit-wrapper.fluid .orbit .fluid-placeholder {
+ visibility: hidden;
+ position: static;
+ display: block;
+ width: 100%; }
+
+.orbit-wrapper.fluid .orbit, .orbit-wrapper.fluid {
+ width: 100% !important; }
+
+.orbit-wrapper.fluid .orbit-bullets {
+ position: absolute;
+ z-index: 1000;
+ list-style: none;
+ bottom: -50px;
+ left: 50%;
+ margin-left: -50px;
+ padding: 0; }

0 comments on commit 5fbae99

Please sign in to comment.