Skip to content

Commit

Permalink
added bx-wrapper, modified this, el, and theme
Browse files Browse the repository at this point in the history
  • Loading branch information
Steven Wanderski committed Nov 9, 2012
1 parent df6c992 commit 225c2b9
Show file tree
Hide file tree
Showing 4 changed files with 38 additions and 57 deletions.
60 changes: 30 additions & 30 deletions jquery.bxslider.css
Original file line number Diff line number Diff line change
Expand Up @@ -14,66 +14,66 @@
/** 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;
}

/** 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;
border: solid #fff 5px;
left: -5px;
}

.bxslider .bx-pager,
.bxslider .bx-controls-auto {
.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
position: absolute;
bottom: -30px;
width: 100%;
}

/* 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;
font-weight: bold;
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;
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -182,7 +182,7 @@
width: 100%;
}

.bxslider .bx-caption span {
.bx-wrapper .bx-caption span {
color: #fff;
font-family: Arial;
display: block;
Expand Down
23 changes: 7 additions & 16 deletions jquery.bxslider.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@
var defaults = {
mode: 'horizontal',
slideSelector: '',
sliderElement: '> .slides',
infiniteLoop: true,
hideControlOnEnd: false,
speed: 500,
Expand Down Expand Up @@ -52,7 +51,6 @@
touchEnabled: true,
video: false,
swipeThreashold: 50,
useDirectElement: false,
onSliderLoad: function() {},
onSlideBefore: function() {},
onSlideAfter: function() {},
Expand All @@ -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;

/**
* ===================================================================================
Expand All @@ -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
Expand Down Expand Up @@ -116,7 +114,7 @@
*/
var setup = function(){
// wrap el in a wrapper
el.wrap('<div class="bx-viewport" />');
el.wrap('<div class="bx-wrapper"><div class="bx-viewport"></div></div>');
// store a namspace reference to .bx-viewport
slider.viewport = el.parent();
// add a loading div to display while images are loading
Expand Down Expand Up @@ -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;
Expand Down
10 changes: 0 additions & 10 deletions jquery.bxslider.min.js
Original file line number Diff line number Diff line change
@@ -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('<div class="bx-viewport" />'),n.viewport=s.parent(),n.loader=t('<div class="bx-loading" />'),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('<div class="bx-controls" />'),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+='<div class="bx-pager-item"><a href="" data-slide-index="'+i+'" class="bx-pager-link">'+s+"</a></div>"}n.pagerEl.html(e)},u=function(){n.pagerEl=t('<div class="bx-pager" />'),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('<a class="bx-next" href="">'+n.settings.nextText+"</a>"),n.controls.prev=t('<a class="bx-prev" href="">'+n.settings.prevText+"</a>"),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('<div class="bx-controls-direction" />'),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('<div class="bx-controls-auto-item"><a class="bx-start" href="">'+n.settings.startText+"</a></div>"),n.controls.stop=t('<div class="bx-controls-auto-item"><a class="bx-stop" href="">'+n.settings.stopText+"</a></div>"),n.controls.autoEl=t('<div class="bx-controls-auto" />'),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('<div class="bx-caption"><span>'+e+"</span></div>")})},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)
2 changes: 1 addition & 1 deletion readme.md
Original file line number Diff line number Diff line change
@@ -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.

Expand Down

0 comments on commit 225c2b9

Please sign in to comment.