From 225c2b9dfd1848be8c1d4e48b68d3d4e65514b12 Mon Sep 17 00:00:00 2001 From: Steven Wanderski Date: Fri, 9 Nov 2012 12:24:01 +0100 Subject: [PATCH] added bx-wrapper, modified this, el, and theme --- jquery.bxslider.css | 60 +++++++++++++++++++++--------------------- jquery.bxslider.js | 23 +++++----------- jquery.bxslider.min.js | 10 ------- readme.md | 2 +- 4 files changed, 38 insertions(+), 57 deletions(-) diff --git a/jquery.bxslider.css b/jquery.bxslider.css index 99af598f..fdf14e8e 100644 --- a/jquery.bxslider.css +++ b/jquery.bxslider.css @@ -14,19 +14,19 @@ /** RESET AND LAYOUT ===================================*/ -.bxslider { +.bx-wrapper { position: relative; margin: 0 0 60px; padding: 0; *zoom: 1; } -.bxslider > .slides { +.bx-wrapper > .slides { height: 0; overflow: hidden; } -.bxslider img { +.bx-wrapper img { width: 100%; display: block; } @@ -34,7 +34,7 @@ /** THEME ===================================*/ -.bxslider .bx-viewport { +.bx-wrapper .bx-viewport { -moz-box-shadow: 0 0 5px #ccc; -webkit-box-shadow: 0 0 5px #ccc; box-shadow: 0 0 5px #ccc; @@ -42,8 +42,8 @@ left: -5px; } -.bxslider .bx-pager, -.bxslider .bx-controls-auto { +.bx-wrapper .bx-pager, +.bx-wrapper .bx-controls-auto { position: absolute; bottom: -30px; width: 100%; @@ -51,14 +51,14 @@ /* LOADER */ -.bxslider .bx-loading { +.bx-wrapper .bx-loading { min-height: 50px; background: url(images/bx_loader.gif) center center no-repeat; } /* PAGER */ -.bxslider .bx-pager { +.bx-wrapper .bx-pager { text-align: center; font-size: .85em; font-family: Arial; @@ -66,14 +66,14 @@ color: #666; } -.bxslider .bx-pager .bx-pager-item, -.bxslider .bx-controls-auto .bx-controls-auto-item { +.bx-wrapper .bx-pager .bx-pager-item, +.bx-wrapper .bx-controls-auto .bx-controls-auto-item { display: inline-block; *zoom: 1; *display: inline; } -.bxslider .bx-pager a { +.bx-wrapper .bx-pager a { background: #666; text-indent: -999999px; display: block; @@ -85,32 +85,32 @@ border-radius: 5px; } -.bxslider .bx-pager a:hover, -.bxslider .bx-pager a.active { +.bx-wrapper .bx-pager a:hover, +.bx-wrapper .bx-pager a.active { background: #000; } /* DIRECTION CONTROLS (NEXT / PREV) */ -.bxslider .bx-prev { +.bx-wrapper .bx-prev { left: 10px; background: url(images/controls.png) no-repeat 0 -32px; } -.bxslider .bx-next { +.bx-wrapper .bx-next { right: 10px; background: url(images/controls.png) no-repeat -43px -32px; } -.bxslider .bx-prev:hover { +.bx-wrapper .bx-prev:hover { background-position: 0 0; } -.bxslider .bx-next:hover { +.bx-wrapper .bx-next:hover { background-position: -43px 0; } -.bxslider .bx-controls-direction a { +.bx-wrapper .bx-controls-direction a { position: absolute; top: 50%; margin-top: -16px; @@ -121,17 +121,17 @@ z-index: 9999; } -.bxslider:hover .bx-controls-direction a { +.bx-wrapper:hover .bx-controls-direction a { display: block; } /* AUTO CONTROLS (START / STOP) */ -.bxslider .bx-controls-auto { +.bx-wrapper .bx-controls-auto { text-align: center; } -.bxslider .bx-controls-auto .bx-start { +.bx-wrapper .bx-controls-auto .bx-start { display: block; text-indent: -999999px; width: 10px; @@ -140,12 +140,12 @@ margin: 0 3px; } -.bxslider .bx-controls-auto .bx-start:hover, -.bxslider .bx-controls-auto .bx-start.active { +.bx-wrapper .bx-controls-auto .bx-start:hover, +.bx-wrapper .bx-controls-auto .bx-start.active { background-position: -86px 0; } -.bxslider .bx-controls-auto .bx-stop { +.bx-wrapper .bx-controls-auto .bx-stop { display: block; text-indent: -999999px; width: 9px; @@ -154,26 +154,26 @@ margin: 0 3px; } -.bxslider .bx-controls-auto .bx-stop:hover, -.bxslider .bx-controls-auto .bx-stop.active { +.bx-wrapper .bx-controls-auto .bx-stop:hover, +.bx-wrapper .bx-controls-auto .bx-stop.active { background-position: -86px -33px; } /* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */ -.bxslider .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager { +.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager { text-align: left; width: 80%; } -.bxslider .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto { +.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto { right: 0; width: 35px; } /* IMAGE CAPTIONS */ -.bxslider .bx-caption { +.bx-wrapper .bx-caption { position: absolute; bottom: 0; left: 0; @@ -182,7 +182,7 @@ width: 100%; } -.bxslider .bx-caption span { +.bx-wrapper .bx-caption span { color: #fff; font-family: Arial; display: block; diff --git a/jquery.bxslider.js b/jquery.bxslider.js index d165773a..a1fab0cc 100644 --- a/jquery.bxslider.js +++ b/jquery.bxslider.js @@ -13,7 +13,6 @@ var defaults = { mode: 'horizontal', slideSelector: '', - sliderElement: '> .slides', infiniteLoop: true, hideControlOnEnd: false, speed: 500, @@ -52,7 +51,6 @@ touchEnabled: true, video: false, swipeThreashold: 50, - useDirectElement: false, onSliderLoad: function() {}, onSlideBefore: function() {}, onSlideAfter: function() {}, @@ -68,12 +66,10 @@ return this; } - // create a namespace to be used throughout the plugin, and merge user-supplied options - var slider = { - settings: $.extend({}, defaults, options) - }; + // create a namespace to be used throughout the plugin + var slider = {}; // set a reference to our slider element - var el = slider.settings.useDirectElement ? this : this.find(slider.settings.sliderElement); + var el = this; /** * =================================================================================== @@ -85,6 +81,8 @@ * Initializes namespace settings to be used throughout plugin */ var init = function(){ + // merge user-supplied options with the defaults + slider.settings = $.extend({}, defaults, options); // store the original children slider.children = el.children(slider.settings.slideSelector); // store active slide information @@ -116,7 +114,7 @@ */ var setup = function(){ // wrap el in a wrapper - el.wrap('
'); + el.wrap('
'); // store a namspace reference to .bx-viewport slider.viewport = el.parent(); // add a loading div to display while images are loading @@ -206,14 +204,7 @@ * - Function to be called after images are loaded */ var preloadImages = function(callback){ - // slider.loader.remove(); - // callback(); - // setTimeout(function(){ - // // remove loading - // slider.loader.remove(); - // callback(); - // }, 2000); - // get all the images + get all the images var images = slider.children.find('img[src!=""], iframe'); // counter that stores loaded images var loaded = 0; diff --git a/jquery.bxslider.min.js b/jquery.bxslider.min.js index 07e90672..e69de29b 100644 --- a/jquery.bxslider.min.js +++ b/jquery.bxslider.min.js @@ -1,10 +0,0 @@ -/** - * BxSlider v4.0 - Fully loaded, responsive content slider - * http://bxslider.com - * - * Copyright 2012, Steven Wanderski - http://stevenwanderski.com - http://bxcreative.com - * Written while drinking Belgian ales and listening to jazz - * - * Released under the WTFPL license - http://sam.zoy.org/wtfpl/ - */ -(function(t){var e={mode:"horizontal",slideSelector:"",sliderElement:"> .slides",infiniteLoop:!0,hideControlOnEnd:!1,speed:500,delay:2e3,easing:"swing",slideMargin:0,startSlide:0,pager:!0,pagerType:"full",pagerShortSeparator:" / ",pagerSelector:null,buildPager:null,controls:!0,nextText:"Next",prevText:"Prev",nextSelector:null,prevSelector:null,startText:"Start",stopText:"Stop",auto:!1,autoStart:!0,autoDirection:"next",autoControls:!1,autoControlsCombine:!1,autoControlsSelector:null,autoHover:!1,autoDelay:0,captions:!1,ticker:!1,minSlides:1,maxSlides:1,moveSlides:0,slideWidth:0,adaptiveHeight:!0,adaptiveHeightSpeed:500,touchEnabled:!0,video:!1,swipeThreashold:50,useDirectElement:!1,onSliderLoad:function(){},onSlideBefore:function(){},onSlideAfter:function(){},onSlideNext:function(){},onSlidePrev:function(){}};t.fn.bxSlider=function(i){if(this.length>1)return this.each(function(){t(this).bxSlider(i)}),this;var n={settings:t.extend({},e,i)},s=n.settings.useDirectElement?this:this.find(n.settings.sliderElement),o=function(){n.children=s.children(n.settings.slideSelector),n.active={index:n.settings.startSlide},n.carousel=n.settings.minSlides>1||n.settings.maxSlides>1,n.minThreashold=n.settings.minSlides*n.settings.slideWidth+(n.settings.minSlides-1)*n.settings.slideMargin,n.maxThreashold=n.settings.maxSlides*n.settings.slideWidth+(n.settings.maxSlides-1)*n.settings.slideMargin,n.working=!1,n.controls={},l(),n.settings.ticker&&M(),n.settings.pager&&C(n.settings.startSlide),n.settings.controls&&z(),n.settings.touchEnabled&&k()},l=function(){if(s.wrap('
'),n.viewport=s.parent(),n.loader=t('
'),n.viewport.prepend(n.loader),s.css({width:n.settings.mode=="horizontal"?"999999px":"auto",height:0,overflow:"hidden",position:"relative",margin:0,padding:0}),n.viewport.css({width:"100%",height:"50",overflow:"hidden",position:"relative"}),n.children.css({"float":n.settings.mode=="horizontal"?"left":"none",position:"relative",width:d(),listStyle:"none",marginRight:n.settings.mode=="horizontal"?n.settings.slideMargin:0,marginBottom:n.settings.mode=="vertical"?n.settings.slideMargin:0}),n.settings.mode=="fade"&&(n.children.css({position:"absolute",zIndex:0,display:"none"}),n.children.eq(n.settings.startSlide).css({zIndex:50,display:"block"})),n.controls.el=t('
'),n.settings.captions&&m(),n.settings.infiniteLoop&&!n.carousel&&n.settings.mode!="fade"){var e=n.children.first().clone().addClass("bx-clone"),i=n.children.last().clone().addClass("bx-clone");s.append(e).prepend(i)}n.active.last=n.settings.startSlide==g()-1,n.settings.video&&s.fitVids(),a(function(){s.css("overflow","visible"),p(),n.settings.mode=="vertical"&&(n.settings.adaptiveHeight=!0),n.viewport.animate({height:r()},200),n.settings.auto&&n.settings.autoStart&&D(),n.settings.onSliderLoad()}),n.settings.ticker||(n.settings.pager&&u(),n.settings.controls&&f(),n.settings.auto&&n.settings.autoControls&&x(),(n.settings.controls||n.settings.autoControls||n.settings.pager)&&n.viewport.after(n.controls.el))},a=function(e){var i=n.children.find('img[src!=""], iframe'),s=0;i.length>0?i.each(function(){var o=t(this);o.load(function(){++s,i.length==s&&(n.loader.remove(),e())})}).each(function(){this.complete&&t(this).load()}):(n.loader.remove(),e())},r=function(){var e=0,i="";return i=n.settings.mode=="vertical"||n.settings.adaptiveHeight?n.carousel?n.active.last?n.children.slice(n.children.length-n.settings.minSlides,n.children.length):n.children.slice(n.active.index*h(),n.settings.minSlides+n.active.index*h()):n.children.eq(n.active.index):n.children,n.settings.mode=="vertical"?(i.each(function(){e+=t(this).outerHeight()}),n.settings.slideMargin>0&&(e+=n.settings.slideMargin*(n.settings.minSlides-1))):e=Math.max.apply(Math,i.map(function(){return t(this).outerHeight()}).get()),e},d=function(){var t=n.settings.slideWidth,e=n.viewport.width();return n.settings.slideWidth==0?t=e:e>n.maxThreashold?t=(e-n.settings.slideMargin*(n.settings.maxSlides-1))/n.settings.maxSlides:n.minThreashold>e&&(t=(e-n.settings.slideMargin*(n.settings.minSlides-1))/n.settings.minSlides),t},c=function(){var t=1;if(n.settings.mode=="horizontal")if(n.minThreashold>n.viewport.width())t=n.settings.minSlides;else if(n.viewport.width()>n.maxThreashold)t=n.settings.maxSlides;else{var e=n.children.first().width();t=Math.floor(n.viewport.width()/e)}else n.settings.mode=="vertical"&&(t=n.settings.minSlides);return t},g=function(){var t=0;if(n.settings.moveSlides>0){var e=0,i=0;while(n.children.length>e)++t,e=i+c(),i+=c()>=n.settings.moveSlides?n.settings.moveSlides:c()}else t=Math.ceil(n.children.length/c());return t},h=function(){return n.settings.moveSlides>0&&c()>=n.settings.moveSlides?n.settings.moveSlides:c()},p=function(){if(n.active.last){if(n.settings.mode=="horizontal"){var t=n.children.last(),e=t.position();s.css("left",-(e.left-(n.viewport.width()-t.width())))}else if(n.settings.mode=="vertical"){var i=n.children.length-n.settings.minSlides,e=n.children.eq(i).position();s.css("top",-e.top)}}else{var e=n.children.eq(n.active.index*h()).position();n.active.index==g()-1&&(n.active.last=!0),e!=void 0&&(n.settings.mode=="horizontal"?s.css("left",-e.left):n.settings.mode=="vertical"&&s.css("top",-e.top))}},v=function(){var e="";pagerQty=g();for(var i=0;pagerQty>i;i++){var s=n.settings.buildPager&&t.isFunction(n.settings.buildPager)?n.settings.buildPager(i,t(val)):i+1;e+='
'+s+"
"}n.pagerEl.html(e)},u=function(){n.pagerEl=t('
'),n.pagerEl.delegate(".bx-pager-link","click",T),n.settings.pagerSelector?t(n.settings.pagerSelector).html(n.pagerEl):n.controls.el.addClass("bx-has-pager").append(n.pagerEl),v()},f=function(){n.controls.next=t(''+n.settings.nextText+""),n.controls.prev=t(''+n.settings.prevText+""),n.controls.next.bind("click",S),n.controls.prev.bind("click",w),n.settings.nextSelector&&t(n.settings.nextSelector).append(n.controls.next),n.settings.prevSelector&&t(n.settings.prevSelector).append(n.controls.prev),n.settings.nextSelector||n.settings.prevSelector||(n.controls.directionEl=t('
'),n.controls.directionEl.append(n.controls.prev).append(n.controls.next),n.controls.el.addClass("bx-has-controls-direction").append(n.controls.directionEl))},x=function(){n.controls.start=t('
'+n.settings.startText+"
"),n.controls.stop=t('
'+n.settings.stopText+"
"),n.controls.autoEl=t('
'),n.controls.autoEl.delegate(".bx-start","click",b),n.controls.autoEl.delegate(".bx-stop","click",E),n.settings.autoControlsCombine?n.controls.autoEl.append(n.controls.start):n.controls.autoEl.append(n.controls.start).append(n.controls.stop),n.settings.autoControlsSelector?t(n.settings.autoControlsSelector).html(n.controls.autoEl):n.controls.el.addClass("bx-has-controls-auto").append(n.controls.autoEl),y(n.settings.autoStart?"stop":"start")},m=function(){n.children.each(function(){var e=t(this).find("img:first").attr("title");t(this).append('
'+e+"
")})},S=function(t){n.settings.auto&&s.stopAuto(),s.goToNextSlide(),t.preventDefault()},w=function(t){n.settings.auto&&s.stopAuto(),s.goToPrevSlide(),t.preventDefault()},b=function(t){s.startAuto(),t.preventDefault()},E=function(t){s.stopAuto(),t.preventDefault()},T=function(e){n.settings.auto&&s.stopAuto();var i=t(e.currentTarget),o=parseInt(i.attr("data-slide-index"));o!=n.active.index&&s.goToSlide(o),e.preventDefault()},C=function(t){return n.settings.pagerType=="short"?(n.pagerEl.html(t+1+n.settings.pagerShortSeparator+n.children.length),void 0):(n.pagerEl.find("a").removeClass("active"),n.pagerEl.find("a").eq(t).addClass("active"),void 0)},q=function(){if(!n.carousel&&n.settings.infiniteLoop)if(n.active.index==0){var t=n.children.eq(0).position();n.settings.mode=="horizontal"?s.css("left",-t.left):n.settings.mode=="vertical"&&s.css("top",-t.top)}else if(n.active.index==n.children.length-1){var t=n.children.eq(n.children.length-1).position();n.settings.mode=="horizontal"?s.css("left",-t.left):n.settings.mode=="vertical"&&s.css("top",-t.top)}n.working=!1,n.settings.onSlideAfter(n.children.eq(n.active.index))},y=function(t){n.settings.autoControlsCombine?n.controls.autoEl.html(n.controls[t]):(n.controls.autoEl.find("a").removeClass("active"),n.controls.autoEl.find("a:not(.bx-"+t+")").addClass("active"))},z=function(){!n.settings.infiniteLoop&&n.settings.hideControlOnEnd&&(n.controls.directionEl.empty(),n.active.index==0?n.controls.directionEl.append(n.controls.next):n.active.index==g()-1?n.controls.directionEl.append(n.controls.prev):n.controls.directionEl.append(n.controls.prev,n.controls.next))},k=function(){n.touch={start:{x:null,y:null},end:{x:null,y:null}},n.viewport.bind("touchstart",function(t){var e=t.originalEvent;n.touch.start.x=e.changedTouches[0].pageX}),n.viewport.bind("touchend",function(t){var e=t.originalEvent;n.touch.end.x=e.changedTouches[0].pageX;var i=Math.abs(n.touch.start.x-n.touch.end.x);i>=n.settings.swipeThreashold&&(n.touch.start.x>n.touch.end.x?s.goToNextSlide():s.goToPrevSlide())})},D=function(){n.settings.autoDelay>0?setTimeout(s.startAuto,n.settings.autoDelay):s.startAuto(),n.settings.autoHover&&s.hover(function(){n.interval&&(s.stopAuto(!0),n.autoPaused=!0)},function(){n.autoPaused&&(s.startAuto(!0),n.autoPaused=null)})},M=function(){n.settings.autoDirection=="next"?s.append(n.children.clone().addClass("bx-clone")):(s.prepend(n.children.clone().addClass("bx-clone")),s.css("left",-n.children.eq(n.children.length).position().left)),n.settings.pager=!1,n.settings.controls=!1,n.settings.autoControls=!1,P()},P=function(){var t=0,e=0;n.settings.autoDirection=="next"?t=-n.children.eq(n.children.length).position().left:e=-n.children.first().position().left,s.animate({left:t},n.settings.speed,"linear",function(){s.css("left",e),P()})};s.goToSlide=function(e,i){if(!n.working&&n.active.index!=e)if(n.working=!0,n.active.index=0>e?n.children.length-1:e>=n.children.length?0:e,n.settings.onSlideBefore(n.children.eq(n.active.index)),i=="next"?n.settings.onSlideNext(n.children.eq(n.active.index)):i=="prev"&&n.settings.onSlidePrev(n.children.eq(n.active.index)),n.active.last=e>=g()-1,n.settings.pager&&C(n.active.index),n.settings.controls&&z(),n.settings.mode=="fade")n.settings.adaptiveHeight&&n.viewport.height()!=r()&&n.viewport.animate({height:r()},n.settings.adaptiveHeightSpeed),n.children.filter(":visible").fadeOut(n.settings.speed).css({zIndex:0}),n.children.eq(n.active.index).css("zIndex",51).fadeIn(n.settings.speed,function(){t(this).css("zIndex",50),q()});else{n.settings.adaptiveHeight&&n.viewport.height()!=r()&&n.viewport.animate({height:r()},n.settings.adaptiveHeightSpeed);var o=0,l={left:0,top:0};if(n.carousel&&n.active.last)if(n.settings.mode=="horizontal"){var a=n.children.eq(n.children.length-1);l=a.position(),o=n.viewport.width()-a.width()}else{var d=n.children.length-n.settings.minSlides;l=n.children.eq(d).position()}else if(n.active.last&&n.active.index==0)l=s.find(".bx-clone:last").position(),n.active.last=!1;else if(e>=0){var c=e*h();l=n.children.eq(c).position()}var p=n.settings.mode=="horizontal"?{left:-(l.left-o)}:{top:-l.top};s.animate(p,n.settings.speed,n.settings.easing,function(){q()})}},s.goToNextSlide=function(){if(n.settings.infiniteLoop||!n.active.last){var t=n.active.index+1;n.carousel&&n.settings.infiniteLoop&&t>=g()&&(t=0),s.goToSlide(t,"next")}},s.goToPrevSlide=function(){if(n.settings.infiniteLoop||n.active.index!=0){var t=n.active.index-1;n.carousel&&n.settings.infiniteLoop&&0>t&&(t=g()-1),s.goToSlide(t,"prev")}},s.startAuto=function(t){n.interval||(n.interval=setInterval(function(){n.settings.autoDirection=="next"?s.goToNextSlide():s.goToPrevSlide()},n.settings.delay),n.settings.autoControls&&t!=1&&y("stop"))},s.stopAuto=function(t){n.interval&&(clearInterval(n.interval),n.interval=null,n.settings.autoControls&&t!=1&&y("start"))},s.getCurrentSlide=function(){return n.active.index},s.getSlideCount=function(){return n.children.length};var A=t(window).width(),H=t(window).height();return t(window).resize(function(){var e=t(window).width(),i=t(window).height();(A!=e||H!=i)&&(A=e,H=i,n.children.add(s.find(".bx-clone")).width(d()),n.viewport.css("height",r()),n.active.last&&(n.active.index=g()-1),n.active.index>=g()&&(n.active.last=!0),n.settings.pager&&(v(),C(n.active.index)),p())}),o(),this}})(jQuery) \ No newline at end of file diff --git a/readme.md b/readme.md index 2b113d3a..a39295dc 100644 --- a/readme.md +++ b/readme.md @@ -1,5 +1,5 @@ #Introducing bxSlider 4.0 -##Completely re-written and now fully responsive! +##Completely re-written and now fully responsive Please note that v4.0 is currently in beta as I test, test, test, and get a fresh new doc site up and running.