Mercurial > public > bravenewsurf
changeset 53:98cc19041d8f bands-experimental-ui
New slider based design for the Bands page.
| author | Chris Ridgway <ckridgway@gmail.com> |
|---|---|
| date | Mon, 14 Nov 2011 19:55:14 -0600 |
| parents | 12a39a6f5247 |
| children | c3b4884fe4ea |
| files | bns_website/static/css/base.css bns_website/static/css/bx_styles.css bns_website/static/images/gray_auto.png bns_website/static/images/gray_next.png bns_website/static/images/gray_pager.png bns_website/static/images/gray_prev.png bns_website/static/js/bxslider/README bns_website/static/js/bxslider/jquery.bxSlider.min.js bns_website/static/js/bxslider/jquery.easing.1.3.js bns_website/static/js/bxslider/source/jquery.bxSlider.js bns_website/templates/bands/band_list.html |
| diffstat | 11 files changed, 1627 insertions(+), 19 deletions(-) [+] |
line wrap: on
line diff
--- a/bns_website/static/css/base.css Sun Nov 13 21:20:13 2011 -0600 +++ b/bns_website/static/css/base.css Mon Nov 14 19:55:14 2011 -0600 @@ -28,10 +28,10 @@ /* ----------------------------------------------- -New Styles +News Styles ----------------------------------------------- */ article.news { margin-bottom: 2em; border-top: 2px solid DimGray; /* some other gray color might be better */ -} \ No newline at end of file +}
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/bns_website/static/css/bx_styles.css Mon Nov 14 19:55:14 2011 -0600 @@ -0,0 +1,104 @@ +/* + * To change the color scheme of slider change each + * background property for each of the five styles below + */ + +/*next button*/ +.bx-next { + position:absolute; + top:40%; + right:-50px; + z-index:999; + width: 30px; + height: 30px; + text-indent: -999999px; + background: url(../images/gray_next.png) no-repeat 0 -30px; +} + +/*previous button*/ +.bx-prev { + position:absolute; + top:40%; + left:-50px; + z-index:999; + width: 30px; + height: 30px; + text-indent: -999999px; + background: url(../images/gray_prev.png) no-repeat 0 -30px; +} + +/*pager links*/ +.bx-pager a { + margin-right: 5px; + color: #fff; + padding: 3px 8px 3px 6px; + font-size: 12px; + zoom:1; + background: url(../images/gray_pager.png) no-repeat 0 -20px; +} + +/*auto start button*/ +.bx-auto .start { + background: url(../images/gray_auto.png) no-repeat 0 2px; + padding-left: 13px; +} + +/*auto stop button*/ +.bx-auto .stop { + background: url(../images/gray_auto.png) no-repeat 0 -14px; + padding-left: 13px; +} + +/* + * End color scheme styles + */ + + +/*next/prev button hover state*/ +.bx-next:hover, +.bx-prev:hover { + background-position: 0 0; +} + +/*pager links hover and active states*/ +.bx-pager .pager-active, +.bx-pager a:hover { + background-position: 0 0; +} + +/*pager wrapper*/ +.bx-pager { + text-align:center; + padding-top: 7px; + font-size:12px; + color:#666; +} + +/*captions*/ +.bx-captions { + text-align:center; + font-size: 12px; + padding: 7px 0; + color: #666; +} + +/*auto controls*/ +.bx-auto { + text-align: center; + padding-top: 7px; +} + +.bx-auto a { + color: #666; + font-size: 12px; +} + + + + + + + + + +
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/bns_website/static/js/bxslider/README Mon Nov 14 19:55:14 2011 -0600 @@ -0,0 +1,8 @@ +jQuery bxSlider v3.0 +http://bxslider.com + +Copyright 2011, Steven Wanderski +http://bxcreative.com + +Free to use and abuse under the MIT license. +http://www.opensource.org/licenses/mit-license.php \ No newline at end of file
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/bns_website/static/js/bxslider/jquery.bxSlider.min.js Mon Nov 14 19:55:14 2011 -0600 @@ -0,0 +1,12 @@ +/** + * jQuery bxSlider v3.0 + * http://bxslider.com + * + * Copyright 2010, Steven Wanderski + * http://bxcreative.com + * + * Free to use and abuse under the MIT license. + * http://www.opensource.org/licenses/mit-license.php + * + */ +(function(a){a.fn.bxSlider=function(b){function Z(b,c,d,e){var f=[];var g=d;var h=false;if(e=="backward"){b=a.makeArray(b);b.reverse()}while(g>0){a.each(b,function(b,d){if(g>0){if(!h){if(b==c){h=true;f.push(a(this).clone());g--}}else{f.push(a(this).clone());g--}}else{return false}})}return f}function Y(){var a=i.outerHeight()*b.displaySlideQty;return a}function X(){var a=i.outerWidth()*b.displaySlideQty;return a}function W(b,c){if(c=="left"){var d=a(".pager",h).eq(b).position().left}else if(c=="top"){var d=a(".pager",h).eq(b).position().top}return d}function V(){if(!b.infiniteLoop&&b.hideControlOnEnd){if(x==F){a(".bx-prev",h).hide()}else{a(".bx-prev",h).show()}if(x==G){a(".bx-next",h).hide()}else{a(".bx-next",h).show()}}}function U(c,e,f,g){p=a('<a href="" class="bx-start"></a>');if(c=="text"){r=e}else{r='<img src="'+e+'" />'}if(f=="text"){s=g}else{s='<img src="'+g+'" />'}if(b.autoControlsSelector){a(b.autoControlsSelector).append(p)}else{h.append('<div class="bx-auto"></div>');a(".bx-auto",h).html(p)}p.click(function(){if(b.ticker){if(a(this).hasClass("stop")){d.stopTicker()}else if(a(this).hasClass("start")){d.startTicker()}}else{if(a(this).hasClass("stop")){d.stopShow(true)}else if(a(this).hasClass("start")){d.startShow(true)}}return false})}function T(){var c=a("img",g.eq(x)).attr("title");if(c!=""){if(b.captionsSelector){a(b.captionsSelector).html(c)}else{a(".bx-captions",h).html(c)}}else{if(b.captionsSelector){a(b.captionsSelector).html(" ")}else{a(".bx-captions",h).html(" ")}}}function S(c){var e=g.length;if(b.moveSlideQty>1){if(g.length%b.moveSlideQty!=0){e=Math.ceil(g.length/b.moveSlideQty)}else{e=g.length/b.moveSlideQty}}var f="";if(b.buildPager){for(var i=0;i<e;i++){f+=b.buildPager(i,g.eq(i*b.moveSlideQty))}}else if(c=="full"){for(var i=1;i<=e;i++){f+='<a href="" class="pager-link pager-'+i+'">'+i+"</a>"}}else if(c=="short"){f='<span class="bx-pager-current">'+(b.startingSlide+1)+"</span> "+b.pagerShortSeparator+' <span class="bx-pager-total">'+g.length+"</span>"}if(b.pagerSelector){a(b.pagerSelector).append(f);n=a(b.pagerSelector)}else{var j=a('<div class="bx-pager"></div>');j.append(f);if(b.pagerLocation=="top"){h.prepend(j)}else if(b.pagerLocation=="bottom"){h.append(j)}n=a(".bx-pager",h)}n.children().click(function(){if(b.pagerType=="full"){var a=n.children().index(this);if(b.moveSlideQty>1){a*=b.moveSlideQty}d.goToSlide(a)}return false})}function R(c,e,f,g){var i=a('<a href="" class="bx-next"></a>');var j=a('<a href="" class="bx-prev"></a>');if(c=="text"){i.html(e)}else{i.html('<img src="'+e+'" />')}if(f=="text"){j.html(g)}else{j.html('<img src="'+g+'" />')}if(b.prevSelector){a(b.prevSelector).append(j)}else{h.append(j)}if(b.nextSelector){a(b.nextSelector).append(i)}else{h.append(i)}i.click(function(){d.goToNextSlide();return false});j.click(function(){d.goToPreviousSlide();return false})}function Q(c){if(b.pagerType=="full"&&b.pager){a("a",n).removeClass(b.pagerActiveClass);a("a",n).eq(c).addClass(b.pagerActiveClass)}else if(b.pagerType=="short"&&b.pager){a(".bx-pager-current",n).html(x+1)}}function P(){g.not(":eq("+x+")").fadeTo(b.speed,0).css("zIndex",98);g.eq(x).css("zIndex",99).fadeTo(b.speed,1,function(){E=false;if(jQuery.browser.msie){g.eq(x).get(0).style.removeAttribute("filter")}b.onAfterSlide(x,g.length,g.eq(x))})}function O(){e.hover(function(){if(t){d.stopTicker(false)}},function(){if(t){d.startTicker(false)}})}function N(){h.find(".bx-window").hover(function(){if(t){d.stopShow(false)}},function(){if(t){d.startShow(false)}})}function M(){if(b.startImage!=""){startContent=b.startImage;startType="image"}else{startContent=b.startText;startType="text"}if(b.stopImage!=""){stopContent=b.stopImage;stopType="image"}else{stopContent=b.stopText;stopType="text"}U(startType,startContent,stopType,stopContent)}function L(a,c,d){if(b.mode=="horizontal"){if(b.tickerDirection=="next"){e.animate({left:"-="+c+"px"},d,"linear",function(){e.css("left",a);L(a,A,b.tickerSpeed)})}else if(b.tickerDirection=="prev"){e.animate({left:"+="+c+"px"},d,"linear",function(){e.css("left",a);L(a,A,b.tickerSpeed)})}}else if(b.mode=="vertical"){if(b.tickerDirection=="next"){e.animate({top:"-="+c+"px"},d,"linear",function(){e.css("top",a);L(a,B,b.tickerSpeed)})}else if(b.tickerDirection=="prev"){e.animate({top:"+="+c+"px"},d,"linear",function(){e.css("top",a);L(a,B,b.tickerSpeed)})}}}function K(){if(b.auto){if(!b.infiniteLoop){if(b.autoDirection=="next"){o=setInterval(function(){x+=b.moveSlideQty;if(x>G){x=x%g.length}d.goToSlide(x,false)},b.pause)}else if(b.autoDirection=="prev"){o=setInterval(function(){x-=b.moveSlideQty;if(x<0){negativeOffset=x%g.length;if(negativeOffset==0){x=0}else{x=g.length+negativeOffset}}d.goToSlide(x,false)},b.pause)}}else{if(b.autoDirection=="next"){o=setInterval(function(){d.goToNextSlide(false)},b.pause)}else if(b.autoDirection=="prev"){o=setInterval(function(){d.goToPreviousSlide(false)},b.pause)}}}else if(b.ticker){b.tickerSpeed*=10;a(".pager",h).each(function(b){A+=a(this).width();B+=a(this).height()});if(b.tickerDirection=="prev"&&b.mode=="horizontal"){e.css("left","-"+(A+y)+"px")}else if(b.tickerDirection=="prev"&&b.mode=="vertical"){e.css("top","-"+(B+z)+"px")}if(b.mode=="horizontal"){C=parseInt(e.css("left"));L(C,A,b.tickerSpeed)}else if(b.mode=="vertical"){D=parseInt(e.css("top"));L(D,B,b.tickerSpeed)}if(b.tickerHover){O()}}}function J(){if(b.nextImage!=""){nextContent=b.nextImage;nextType="image"}else{nextContent=b.nextText;nextType="text"}if(b.prevImage!=""){prevContent=b.prevImage;prevType="image"}else{prevContent=b.prevText;prevType="text"}R(nextType,nextContent,prevType,prevContent)}function I(){if(b.mode=="horizontal"||b.mode=="vertical"){var c=Z(g,0,b.moveSlideQty,"backward");a.each(c,function(b){e.prepend(a(this))});var d=g.length+b.moveSlideQty-1;var f=g.length-b.displaySlideQty;var h=d-f;var i=Z(g,0,h,"forward");if(b.infiniteLoop){a.each(i,function(b){e.append(a(this))})}}}function H(){I(b.startingSlide);if(b.mode=="horizontal"){e.wrap('<div class="'+b.wrapperClass+'" style="width:'+l+'px; position:relative;"></div>').wrap('<div class="bx-window" style="position:relative; overflow:hidden; width:'+l+'px;"></div>').css({width:"999999px",position:"relative",left:"-"+y+"px"});e.children().css({width:j,"float":"left",listStyle:"none"});h=e.parent().parent();g.addClass("pager")}else if(b.mode=="vertical"){e.wrap('<div class="'+b.wrapperClass+'" style="width:'+v+'px; position:relative;"></div>').wrap('<div class="bx-window" style="width:'+v+"px; height:"+m+'px; position:relative; overflow:hidden;"></div>').css({height:"999999px",position:"relative",top:"-"+z+"px"});e.children().css({listStyle:"none",height:w});h=e.parent().parent();g.addClass("pager")}else if(b.mode=="fade"){e.wrap('<div class="'+b.wrapperClass+'" style="width:'+v+'px; position:relative;"></div>').wrap('<div class="bx-window" style="height:'+w+"px; width:"+v+'px; position:relative; overflow:hidden;"></div>');e.children().css({listStyle:"none",position:"absolute",top:0,left:0,zIndex:98});h=e.parent().parent();g.not(":eq("+x+")").fadeTo(0,0);g.eq(x).css("zIndex",99)}if(b.captions&&b.captionsSelector==null){h.append('<div class="bx-captions"></div>')}}var c={mode:"horizontal",infiniteLoop:true,hideControlOnEnd:false,controls:true,speed:500,easing:"swing",pager:false,pagerSelector:null,pagerType:"full",pagerLocation:"bottom",pagerShortSeparator:"/",pagerActiveClass:"pager-active",nextText:"next",nextImage:"",nextSelector:null,prevText:"prev",prevImage:"",prevSelector:null,captions:false,captionsSelector:null,auto:false,autoDirection:"next",autoControls:false,autoControlsSelector:null,autoStart:true,autoHover:false,autoDelay:0,pause:3e3,startText:"start",startImage:"",stopText:"stop",stopImage:"",ticker:false,tickerSpeed:5e3,tickerDirection:"next",tickerHover:false,wrapperClass:"bx-wrapper",startingSlide:0,displaySlideQty:1,moveSlideQty:1,randomStart:false,onBeforeSlide:function(){},onAfterSlide:function(){},onLastSlide:function(){},onFirstSlide:function(){},onNextSlide:function(){},onPrevSlide:function(){},buildPager:null};var b=a.extend(c,b);var d=this;var e="";var f="";var g="";var h="";var i="";var j="";var k="";var l="";var m="";var n="";var o="";var p="";var q="";var r="";var s="";var t=true;var u=false;var v=0;var w=0;var x=0;var y=0;var z=0;var A=0;var B=0;var C=0;var D=0;var E=false;var F=0;var G=g.length-1;this.goToSlide=function(a,c){if(!E){E=true;x=a;b.onBeforeSlide(x,g.length,g.eq(x));if(typeof c=="undefined"){var c=true}if(c){if(b.auto){d.stopShow(true)}}slide=a;if(slide==F){b.onFirstSlide(x,g.length,g.eq(x))}if(slide==G){b.onLastSlide(x,g.length,g.eq(x))}if(b.mode=="horizontal"){e.animate({left:"-"+W(slide,"left")+"px"},b.speed,b.easing,function(){E=false;b.onAfterSlide(x,g.length,g.eq(x))})}else if(b.mode=="vertical"){e.animate({top:"-"+W(slide,"top")+"px"},b.speed,b.easing,function(){E=false;b.onAfterSlide(x,g.length,g.eq(x))})}else if(b.mode=="fade"){P()}V();if(b.moveSlideQty>1){a=Math.floor(a/b.moveSlideQty)}Q(a);T()}};this.goToNextSlide=function(a){if(typeof a=="undefined"){var a=true}if(a){if(b.auto){d.stopShow(true)}}if(!b.infiniteLoop){if(!E){var c=false;x=x+b.moveSlideQty;if(x<=G){V();b.onNextSlide(x,g.length,g.eq(x));d.goToSlide(x)}else{x-=b.moveSlideQty}}}else{if(!E){E=true;var c=false;x=x+b.moveSlideQty;if(x>G){x=x%g.length;c=true}b.onNextSlide(x,g.length,g.eq(x));b.onBeforeSlide(x,g.length,g.eq(x));if(b.mode=="horizontal"){var f=b.moveSlideQty*k;e.animate({left:"-="+f+"px"},b.speed,b.easing,function(){E=false;if(c){e.css("left","-"+W(x,"left")+"px")}b.onAfterSlide(x,g.length,g.eq(x))})}else if(b.mode=="vertical"){var h=b.moveSlideQty*w;e.animate({top:"-="+h+"px"},b.speed,b.easing,function(){E=false;if(c){e.css("top","-"+W(x,"top")+"px")}b.onAfterSlide(x,g.length,g.eq(x))})}else if(b.mode=="fade"){P()}if(b.moveSlideQty>1){Q(Math.ceil(x/b.moveSlideQty))}else{Q(x)}T()}}};this.goToPreviousSlide=function(c){if(typeof c=="undefined"){var c=true}if(c){if(b.auto){d.stopShow(true)}}if(!b.infiniteLoop){if(!E){var f=false;x=x-b.moveSlideQty;if(x<0){x=0;if(b.hideControlOnEnd){a(".bx-prev",h).hide()}}V();b.onPrevSlide(x,g.length,g.eq(x));d.goToSlide(x)}}else{if(!E){E=true;var f=false;x=x-b.moveSlideQty;if(x<0){negativeOffset=x%g.length;if(negativeOffset==0){x=0}else{x=g.length+negativeOffset}f=true}b.onPrevSlide(x,g.length,g.eq(x));b.onBeforeSlide(x,g.length,g.eq(x));if(b.mode=="horizontal"){var i=b.moveSlideQty*k;e.animate({left:"+="+i+"px"},b.speed,b.easing,function(){E=false;if(f){e.css("left","-"+W(x,"left")+"px")}b.onAfterSlide(x,g.length,g.eq(x))})}else if(b.mode=="vertical"){var j=b.moveSlideQty*w;e.animate({top:"+="+j+"px"},b.speed,b.easing,function(){E=false;if(f){e.css("top","-"+W(x,"top")+"px")}b.onAfterSlide(x,g.length,g.eq(x))})}else if(b.mode=="fade"){P()}if(b.moveSlideQty>1){Q(Math.ceil(x/b.moveSlideQty))}else{Q(x)}T()}}};this.goToFirstSlide=function(a){if(typeof a=="undefined"){var a=true}d.goToSlide(F,a)};this.goToLastSlide=function(){if(typeof a=="undefined"){var a=true}d.goToSlide(G,a)};this.getCurrentSlide=function(){return x};this.getSlideCount=function(){return g.length};this.stopShow=function(a){clearInterval(o);if(typeof a=="undefined"){var a=true}if(a&&b.autoControls){p.html(r).removeClass("stop").addClass("start");t=false}};this.startShow=function(a){if(typeof a=="undefined"){var a=true}K();if(a&&b.autoControls){p.html(s).removeClass("start").addClass("stop");t=true}};this.stopTicker=function(a){e.stop();if(typeof a=="undefined"){var a=true}if(a&&b.ticker){p.html(r).removeClass("stop").addClass("start");t=false}};this.startTicker=function(a){if(b.mode=="horizontal"){if(b.tickerDirection=="next"){var c=parseInt(e.css("left"));var d=A+c+g.eq(0).width()}else if(b.tickerDirection=="prev"){var c=-parseInt(e.css("left"));var d=c-g.eq(0).width()}var f=d*b.tickerSpeed/A;L(C,d,f)}else if(b.mode=="vertical"){if(b.tickerDirection=="next"){var h=parseInt(e.css("top"));var d=B+h+g.eq(0).height()}else if(b.tickerDirection=="prev"){var h=-parseInt(e.css("top"));var d=h-g.eq(0).height()}var f=d*b.tickerSpeed/B;L(D,d,f);if(typeof a=="undefined"){var a=true}if(a&&b.ticker){p.html(s).removeClass("start").addClass("stop");t=true}}};this.initShow=function(){e=a(this);f=e.clone();g=e.children();h="";i=e.children(":first");j=i.width();v=0;k=i.outerWidth();w=0;l=X();m=Y();E=false;n="";x=0;y=0;z=0;o="";p="";q="";r="";s="";t=true;u=false;A=0;B=0;C=0;D=0;F=0;G=g.length-1;g.each(function(b){if(a(this).outerHeight()>w){w=a(this).outerHeight()}if(a(this).outerWidth()>v){v=a(this).outerWidth()}});if(b.randomStart){var c=Math.floor(Math.random()*g.length);x=c;y=k*(b.moveSlideQty+c);z=w*(b.moveSlideQty+c)}else{x=b.startingSlide;y=k*(b.moveSlideQty+b.startingSlide);z=w*(b.moveSlideQty+b.startingSlide)}H();if(b.pager&&!b.ticker){if(b.pagerType=="full"){S("full")}else if(b.pagerType=="short"){S("short")}}if(b.controls&&!b.ticker){J()}if(b.auto||b.ticker){if(b.autoControls){M()}if(b.autoStart){setTimeout(function(){d.startShow(true)},b.autoDelay)}else{d.stopShow(true)}if(b.autoHover&&!b.ticker){N()}}if(b.moveSlideQty>1){Q(Math.ceil(x/b.moveSlideQty))}else{Q(x)}V();if(b.captions){T()}b.onAfterSlide(x,g.length,g.eq(x))};this.destroyShow=function(){clearInterval(o);a(".bx-next, .bx-prev, .bx-pager, .bx-auto",h).remove();e.unwrap().unwrap().removeAttr("style");e.children().removeAttr("style").not(".pager").remove();g.removeClass("pager")};this.reloadShow=function(){d.destroyShow();d.initShow()};this.each(function(){if(a(this).children().length>0){d.initShow()}});return this};jQuery.fx.prototype.cur=function(){if(this.elem[this.prop]!=null&&(!this.elem.style||this.elem.style[this.prop]==null)){return this.elem[this.prop]}var a=parseFloat(jQuery.css(this.elem,this.prop));return a}})(jQuery) \ No newline at end of file
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/bns_website/static/js/bxslider/jquery.easing.1.3.js Mon Nov 14 19:55:14 2011 -0600 @@ -0,0 +1,205 @@ +/* + * jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/ + * + * Uses the built in easing capabilities added In jQuery 1.1 + * to offer multiple easing options + * + * TERMS OF USE - jQuery Easing + * + * Open source under the BSD License. + * + * Copyright © 2008 George McGinley Smith + * All rights reserved. + * + * Redistribution and use in source and binary forms, with or without modification, + * are permitted provided that the following conditions are met: + * + * Redistributions of source code must retain the above copyright notice, this list of + * conditions and the following disclaimer. + * Redistributions in binary form must reproduce the above copyright notice, this list + * of conditions and the following disclaimer in the documentation and/or other materials + * provided with the distribution. + * + * Neither the name of the author nor the names of contributors may be used to endorse + * or promote products derived from this software without specific prior written permission. + * + * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY + * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF + * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE + * COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, + * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE + * GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED + * AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING + * NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED + * OF THE POSSIBILITY OF SUCH DAMAGE. + * +*/ + +// t: current time, b: begInnIng value, c: change In value, d: duration +jQuery.easing['jswing'] = jQuery.easing['swing']; + +jQuery.extend( jQuery.easing, +{ + def: 'easeOutQuad', + swing: function (x, t, b, c, d) { + //alert(jQuery.easing.default); + return jQuery.easing[jQuery.easing.def](x, t, b, c, d); + }, + easeInQuad: function (x, t, b, c, d) { + return c*(t/=d)*t + b; + }, + easeOutQuad: function (x, t, b, c, d) { + return -c *(t/=d)*(t-2) + b; + }, + easeInOutQuad: function (x, t, b, c, d) { + if ((t/=d/2) < 1) return c/2*t*t + b; + return -c/2 * ((--t)*(t-2) - 1) + b; + }, + easeInCubic: function (x, t, b, c, d) { + return c*(t/=d)*t*t + b; + }, + easeOutCubic: function (x, t, b, c, d) { + return c*((t=t/d-1)*t*t + 1) + b; + }, + easeInOutCubic: function (x, t, b, c, d) { + if ((t/=d/2) < 1) return c/2*t*t*t + b; + return c/2*((t-=2)*t*t + 2) + b; + }, + easeInQuart: function (x, t, b, c, d) { + return c*(t/=d)*t*t*t + b; + }, + easeOutQuart: function (x, t, b, c, d) { + return -c * ((t=t/d-1)*t*t*t - 1) + b; + }, + easeInOutQuart: function (x, t, b, c, d) { + if ((t/=d/2) < 1) return c/2*t*t*t*t + b; + return -c/2 * ((t-=2)*t*t*t - 2) + b; + }, + easeInQuint: function (x, t, b, c, d) { + return c*(t/=d)*t*t*t*t + b; + }, + easeOutQuint: function (x, t, b, c, d) { + return c*((t=t/d-1)*t*t*t*t + 1) + b; + }, + easeInOutQuint: function (x, t, b, c, d) { + if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b; + return c/2*((t-=2)*t*t*t*t + 2) + b; + }, + easeInSine: function (x, t, b, c, d) { + return -c * Math.cos(t/d * (Math.PI/2)) + c + b; + }, + easeOutSine: function (x, t, b, c, d) { + return c * Math.sin(t/d * (Math.PI/2)) + b; + }, + easeInOutSine: function (x, t, b, c, d) { + return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b; + }, + easeInExpo: function (x, t, b, c, d) { + return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b; + }, + easeOutExpo: function (x, t, b, c, d) { + return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b; + }, + easeInOutExpo: function (x, t, b, c, d) { + if (t==0) return b; + if (t==d) return b+c; + if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b; + return c/2 * (-Math.pow(2, -10 * --t) + 2) + b; + }, + easeInCirc: function (x, t, b, c, d) { + return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b; + }, + easeOutCirc: function (x, t, b, c, d) { + return c * Math.sqrt(1 - (t=t/d-1)*t) + b; + }, + easeInOutCirc: function (x, t, b, c, d) { + if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b; + return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b; + }, + easeInElastic: function (x, t, b, c, d) { + var s=1.70158;var p=0;var a=c; + if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3; + if (a < Math.abs(c)) { a=c; var s=p/4; } + else var s = p/(2*Math.PI) * Math.asin (c/a); + return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; + }, + easeOutElastic: function (x, t, b, c, d) { + var s=1.70158;var p=0;var a=c; + if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3; + if (a < Math.abs(c)) { a=c; var s=p/4; } + else var s = p/(2*Math.PI) * Math.asin (c/a); + return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b; + }, + easeInOutElastic: function (x, t, b, c, d) { + var s=1.70158;var p=0;var a=c; + if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d*(.3*1.5); + if (a < Math.abs(c)) { a=c; var s=p/4; } + else var s = p/(2*Math.PI) * Math.asin (c/a); + if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; + return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b; + }, + easeInBack: function (x, t, b, c, d, s) { + if (s == undefined) s = 1.70158; + return c*(t/=d)*t*((s+1)*t - s) + b; + }, + easeOutBack: function (x, t, b, c, d, s) { + if (s == undefined) s = 1.70158; + return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b; + }, + easeInOutBack: function (x, t, b, c, d, s) { + if (s == undefined) s = 1.70158; + if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b; + return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b; + }, + easeInBounce: function (x, t, b, c, d) { + return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b; + }, + easeOutBounce: function (x, t, b, c, d) { + if ((t/=d) < (1/2.75)) { + return c*(7.5625*t*t) + b; + } else if (t < (2/2.75)) { + return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b; + } else if (t < (2.5/2.75)) { + return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b; + } else { + return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b; + } + }, + easeInOutBounce: function (x, t, b, c, d) { + if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b; + return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b; + } +}); + +/* + * + * TERMS OF USE - EASING EQUATIONS + * + * Open source under the BSD License. + * + * Copyright © 2001 Robert Penner + * All rights reserved. + * + * Redistribution and use in source and binary forms, with or without modification, + * are permitted provided that the following conditions are met: + * + * Redistributions of source code must retain the above copyright notice, this list of + * conditions and the following disclaimer. + * Redistributions in binary form must reproduce the above copyright notice, this list + * of conditions and the following disclaimer in the documentation and/or other materials + * provided with the distribution. + * + * Neither the name of the author nor the names of contributors may be used to endorse + * or promote products derived from this software without specific prior written permission. + * + * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY + * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF + * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE + * COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, + * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE + * GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED + * AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING + * NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED + * OF THE POSSIBILITY OF SUCH DAMAGE. + * + */ \ No newline at end of file
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/bns_website/static/js/bxslider/source/jquery.bxSlider.js Mon Nov 14 19:55:14 2011 -0600 @@ -0,0 +1,1260 @@ +/** + * jQuery bxSlider v3.0 + * http://bxslider.com + * + * Copyright 2011, Steven Wanderski + * http://bxcreative.com + * + * Free to use and abuse under the MIT license. + * http://www.opensource.org/licenses/mit-license.php + * + */ + + +(function($){ + + $.fn.bxSlider = function(options){ + + var defaults = { + mode: 'horizontal', // 'horizontal', 'vertical', 'fade' + infiniteLoop: true, // true, false - display first slide after last + hideControlOnEnd: false, // true, false - if true, will hide 'next' control on last slide and 'prev' control on first + controls: true, // true, false - previous and next controls + speed: 500, // integer - in ms, duration of time slide transitions will occupy + easing: 'swing', // used with jquery.easing.1.3.js - see http://gsgd.co.uk/sandbox/jquery/easing/ for available options + pager: false, // true / false - display a pager + pagerSelector: null, // jQuery selector - element to contain the pager. ex: '#pager' + pagerType: 'full', // 'full', 'short' - if 'full' pager displays 1,2,3... if 'short' pager displays 1 / 4 + pagerLocation: 'bottom', // 'bottom', 'top' - location of pager + pagerShortSeparator: '/', // string - ex: 'of' pager would display 1 of 4 + pagerActiveClass: 'pager-active', // string - classname attached to the active pager link + nextText: 'next', // string - text displayed for 'next' control + nextImage: '', // string - filepath of image used for 'next' control. ex: 'images/next.jpg' + nextSelector: null, // jQuery selector - element to contain the next control. ex: '#next' + prevText: 'prev', // string - text displayed for 'previous' control + prevImage: '', // string - filepath of image used for 'previous' control. ex: 'images/prev.jpg' + prevSelector: null, // jQuery selector - element to contain the previous control. ex: '#next' + captions: false, // true, false - display image captions (reads the image 'title' tag) + captionsSelector: null, // jQuery selector - element to contain the captions. ex: '#captions' + auto: false, // true, false - make slideshow change automatically + autoDirection: 'next', // 'next', 'prev' - direction in which auto show will traverse + autoControls: false, // true, false - show 'start' and 'stop' controls for auto show + autoControlsSelector: null, // jQuery selector - element to contain the auto controls. ex: '#auto-controls' + autoStart: true, // true, false - if false show will wait for 'start' control to activate + autoHover: false, // true, false - if true show will pause on mouseover + autoDelay: 0, // integer - in ms, the amount of time before starting the auto show + pause: 3000, // integer - in ms, the duration between each slide transition + startText: 'start', // string - text displayed for 'start' control + startImage: '', // string - filepath of image used for 'start' control. ex: 'images/start.jpg' + stopText: 'stop', // string - text displayed for 'stop' control + stopImage: '', // string - filepath of image used for 'stop' control. ex: 'images/stop.jpg' + ticker: false, // true, false - continuous motion ticker mode (think news ticker) + // note: autoControls, autoControlsSelector, and autoHover apply to ticker! + tickerSpeed: 5000, // float - use value between 1 and 5000 to determine ticker speed - the smaller the value the faster the ticker speed + tickerDirection: 'next', // 'next', 'prev' - direction in which ticker show will traverse + tickerHover: false, // true, false - if true ticker will pause on mouseover + wrapperClass: 'bx-wrapper', // string - classname attached to the slider wraper + startingSlide: 0, // integer - show will start on specified slide. note: slides are zero based! + displaySlideQty: 1, // integer - number of slides to display at once + moveSlideQty: 1, // integer - number of slides to move at once + randomStart: false, // true, false - if true show will start on a random slide + onBeforeSlide: function(){}, // function(currentSlideNumber, totalSlideQty, currentSlideHtmlObject) - advanced use only! see the tutorial here: http://bxslider.com/custom-pager + onAfterSlide: function(){}, // function(currentSlideNumber, totalSlideQty, currentSlideHtmlObject) - advanced use only! see the tutorial here: http://bxslider.com/custom-pager + onLastSlide: function(){}, // function(currentSlideNumber, totalSlideQty, currentSlideHtmlObject) - advanced use only! see the tutorial here: http://bxslider.com/custom-pager + onFirstSlide: function(){}, // function(currentSlideNumber, totalSlideQty, currentSlideHtmlObject) - advanced use only! see the tutorial here: http://bxslider.com/custom-pager + onNextSlide: function(){}, // function(currentSlideNumber, totalSlideQty, currentSlideHtmlObject) - advanced use only! see the tutorial here: http://bxslider.com/custom-pager + onPrevSlide: function(){}, // function(currentSlideNumber, totalSlideQty, currentSlideHtmlObject) - advanced use only! see the tutorial here: http://bxslider.com/custom-pager + buildPager: null // function(slideIndex, slideHtmlObject){ return string; } - advanced use only! see the tutorial here: http://bxslider.com/custom-pager + } + + var options = $.extend(defaults, options); + + // cache the base element + var base = this; + // initialize (and localize) all variables + var $parent = ''; + var $origElement = ''; + var $children = ''; + var $outerWrapper = ''; + var $firstChild = ''; + var childrenWidth = ''; + var childrenOuterWidth = ''; + var wrapperWidth = ''; + var wrapperHeight = ''; + var $pager = ''; + var interval = ''; + var $autoControls = ''; + var $stopHtml = ''; + var $startContent = ''; + var $stopContent = ''; + var autoPlaying = true; + var loaded = false; + var childrenMaxWidth = 0; + var childrenMaxHeight = 0; + var currentSlide = 0; + var origLeft = 0; + var origTop = 0; + var origShowWidth = 0; + var origShowHeight = 0; + var tickerLeft = 0; + var tickerTop = 0; + var isWorking = false; + + var firstSlide = 0; + var lastSlide = $children.length - 1; + + + // PUBLIC FUNCTIONS + + /** + * Go to specified slide + */ + this.goToSlide = function(number, stopAuto){ + if(!isWorking){ + isWorking = true; + // set current slide to argument + currentSlide = number; + options.onBeforeSlide(currentSlide, $children.length, $children.eq(currentSlide)); + // check if stopAuto argument is supplied + if(typeof(stopAuto) == 'undefined'){ + var stopAuto = true; + } + if(stopAuto){ + // if show is auto playing, stop it + if(options.auto){ + base.stopShow(true); + } + } + slide = number; + // check for first slide callback + if(slide == firstSlide){ + options.onFirstSlide(currentSlide, $children.length, $children.eq(currentSlide)); + } + // check for last slide callback + if(slide == lastSlide){ + options.onLastSlide(currentSlide, $children.length, $children.eq(currentSlide)); + } + // horizontal + if(options.mode == 'horizontal'){ + $parent.animate({'left': '-'+getSlidePosition(slide, 'left')+'px'}, options.speed, options.easing, function(){ + isWorking = false; + // perform the callback function + options.onAfterSlide(currentSlide, $children.length, $children.eq(currentSlide)); + }); + // vertical + }else if(options.mode == 'vertical'){ + $parent.animate({'top': '-'+getSlidePosition(slide, 'top')+'px'}, options.speed, options.easing, function(){ + isWorking = false; + // perform the callback function + options.onAfterSlide(currentSlide, $children.length, $children.eq(currentSlide)); + }); + // fade + }else if(options.mode == 'fade'){ + setChildrenFade(); + } + // check to remove controls on last/first slide + checkEndControls(); + // accomodate multi slides + if(options.moveSlideQty > 1){ + number = Math.floor(number / options.moveSlideQty); + } + // make the current slide active + makeSlideActive(number); + // display the caption + showCaptions(); + } + } + + /** + * Go to next slide + */ + this.goToNextSlide = function(stopAuto){ + // check if stopAuto argument is supplied + if(typeof(stopAuto) == 'undefined'){ + var stopAuto = true; + } + if(stopAuto){ + // if show is auto playing, stop it + if(options.auto){ + base.stopShow(true); + } + } + // makes slideshow finite + if(!options.infiniteLoop){ + if(!isWorking){ + var slideLoop = false; + // make current slide the old value plus moveSlideQty + currentSlide = (currentSlide + (options.moveSlideQty)); + // if current slide has looped on itself + if(currentSlide <= lastSlide){ + checkEndControls(); + // next slide callback + options.onNextSlide(currentSlide, $children.length, $children.eq(currentSlide)); + // move to appropriate slide + base.goToSlide(currentSlide); + }else{ + currentSlide -= options.moveSlideQty; + } + } // end if(!isWorking) + }else{ + if(!isWorking){ + isWorking = true; + var slideLoop = false; + // make current slide the old value plus moveSlideQty + currentSlide = (currentSlide + options.moveSlideQty); + // if current slide has looped on itself + if(currentSlide > lastSlide){ + currentSlide = currentSlide % $children.length; + slideLoop = true; + } + // next slide callback + options.onNextSlide(currentSlide, $children.length, $children.eq(currentSlide)); + // slide before callback + options.onBeforeSlide(currentSlide, $children.length, $children.eq(currentSlide)); + if(options.mode == 'horizontal'){ + // get the new 'left' property for $parent + var parentLeft = (options.moveSlideQty * childrenOuterWidth); + // animate to the new 'left' + $parent.animate({'left': '-='+parentLeft+'px'}, options.speed, options.easing, function(){ + isWorking = false; + // if its time to loop, reset the $parent + if(slideLoop){ + $parent.css('left', '-'+getSlidePosition(currentSlide, 'left')+'px'); + } + // perform the callback function + options.onAfterSlide(currentSlide, $children.length, $children.eq(currentSlide)); + }); + }else if(options.mode == 'vertical'){ + // get the new 'left' property for $parent + var parentTop = (options.moveSlideQty * childrenMaxHeight); + // animate to the new 'left' + $parent.animate({'top': '-='+parentTop+'px'}, options.speed, options.easing, function(){ + isWorking = false; + // if its time to loop, reset the $parent + if(slideLoop){ + $parent.css('top', '-'+getSlidePosition(currentSlide, 'top')+'px'); + } + // perform the callback function + options.onAfterSlide(currentSlide, $children.length, $children.eq(currentSlide)); + }); + }else if(options.mode == 'fade'){ + setChildrenFade(); + } + // make the current slide active + if(options.moveSlideQty > 1){ + makeSlideActive(Math.ceil(currentSlide / options.moveSlideQty)); + }else{ + makeSlideActive(currentSlide); + } + // display the caption + showCaptions(); + } // end if(!isWorking) + + } + } // end function + + /** + * Go to previous slide + */ + this.goToPreviousSlide = function(stopAuto){ + // check if stopAuto argument is supplied + if(typeof(stopAuto) == 'undefined'){ + var stopAuto = true; + } + if(stopAuto){ + // if show is auto playing, stop it + if(options.auto){ + base.stopShow(true); + } + } + // makes slideshow finite + if(!options.infiniteLoop){ + if(!isWorking){ + var slideLoop = false; + // make current slide the old value plus moveSlideQty + currentSlide = currentSlide - options.moveSlideQty; + // if current slide has looped on itself + if(currentSlide < 0){ + currentSlide = 0; + // if specified, hide the control on the last slide + if(options.hideControlOnEnd){ + $('.bx-prev', $outerWrapper).hide(); + } + } + checkEndControls(); + // next slide callback + options.onPrevSlide(currentSlide, $children.length, $children.eq(currentSlide)); + // move to appropriate slide + base.goToSlide(currentSlide); + } + }else{ + if(!isWorking){ + isWorking = true; + var slideLoop = false; + // make current slide the old value plus moveSlideQty + currentSlide = (currentSlide - (options.moveSlideQty)); + // if current slide has looped on itself + if(currentSlide < 0){ + negativeOffset = (currentSlide % $children.length); + if(negativeOffset == 0){ + currentSlide = 0; + }else{ + currentSlide = ($children.length) + negativeOffset; + } + slideLoop = true; + } + // next slide callback + options.onPrevSlide(currentSlide, $children.length, $children.eq(currentSlide)); + // slide before callback + options.onBeforeSlide(currentSlide, $children.length, $children.eq(currentSlide)); + if(options.mode == 'horizontal'){ + // get the new 'left' property for $parent + var parentLeft = (options.moveSlideQty * childrenOuterWidth); + // animate to the new 'left' + $parent.animate({'left': '+='+parentLeft+'px'}, options.speed, options.easing, function(){ + isWorking = false; + // if its time to loop, reset the $parent + if(slideLoop){ + $parent.css('left', '-'+getSlidePosition(currentSlide, 'left')+'px'); + } + // perform the callback function + options.onAfterSlide(currentSlide, $children.length, $children.eq(currentSlide)); + }); + }else if(options.mode == 'vertical'){ + // get the new 'left' property for $parent + var parentTop = (options.moveSlideQty * childrenMaxHeight); + // animate to the new 'left' + $parent.animate({'top': '+='+parentTop+'px'}, options.speed, options.easing, function(){ + isWorking = false; + // if its time to loop, reset the $parent + if(slideLoop){ + $parent.css('top', '-'+getSlidePosition(currentSlide, 'top')+'px'); + } + // perform the callback function + options.onAfterSlide(currentSlide, $children.length, $children.eq(currentSlide)); + }); + }else if(options.mode == 'fade'){ + setChildrenFade(); + } + // make the current slide active + if(options.moveSlideQty > 1){ + makeSlideActive(Math.ceil(currentSlide / options.moveSlideQty)); + }else{ + makeSlideActive(currentSlide); + } + // display the caption + showCaptions(); + } // end if(!isWorking) + } + } // end function + + /** + * Go to first slide + */ + this.goToFirstSlide = function(stopAuto){ + // check if stopAuto argument is supplied + if(typeof(stopAuto) == 'undefined'){ + var stopAuto = true; + } + base.goToSlide(firstSlide, stopAuto); + } + + /** + * Go to last slide + */ + this.goToLastSlide = function(){ + // check if stopAuto argument is supplied + if(typeof(stopAuto) == 'undefined'){ + var stopAuto = true; + } + base.goToSlide(lastSlide, stopAuto); + } + + /** + * Get the current slide + */ + this.getCurrentSlide = function(){ + return currentSlide; + } + + /** + * Get the total slide count + */ + this.getSlideCount = function(){ + return $children.length; + } + + /** + * Stop the slideshow + */ + this.stopShow = function(changeText){ + clearInterval(interval); + // check if changeText argument is supplied + if(typeof(changeText) == 'undefined'){ + var changeText = true; + } + if(changeText && options.autoControls){ + $autoControls.html($startContent).removeClass('stop').addClass('start'); + autoPlaying = false; + } + } + + /** + * Start the slideshow + */ + this.startShow = function(changeText){ + // check if changeText argument is supplied + if(typeof(changeText) == 'undefined'){ + var changeText = true; + } + setAutoInterval(); + if(changeText && options.autoControls){ + $autoControls.html($stopContent).removeClass('start').addClass('stop'); + autoPlaying = true; + } + } + + /** + * Stops the ticker + */ + this.stopTicker = function(changeText){ + $parent.stop(); + // check if changeText argument is supplied + if(typeof(changeText) == 'undefined'){ + var changeText = true; + } + if(changeText && options.ticker){ + $autoControls.html($startContent).removeClass('stop').addClass('start'); + autoPlaying = false; + } + } + + /** + * Starts the ticker + */ + this.startTicker = function(changeText){ + if(options.mode == 'horizontal'){ + if(options.tickerDirection == 'next'){ + // get the 'left' property where the ticker stopped + var stoppedLeft = parseInt($parent.css('left')); + // calculate the remaining distance the show must travel until the loop + var remainingDistance = (origShowWidth + stoppedLeft) + $children.eq(0).width(); + }else if(options.tickerDirection == 'prev'){ + // get the 'left' property where the ticker stopped + var stoppedLeft = -parseInt($parent.css('left')); + // calculate the remaining distance the show must travel until the loop + var remainingDistance = (stoppedLeft) - $children.eq(0).width(); + } + // calculate the speed ratio to seamlessly finish the loop + var finishingSpeed = (remainingDistance * options.tickerSpeed) / origShowWidth; + // call the show + moveTheShow(tickerLeft, remainingDistance, finishingSpeed); + }else if(options.mode == 'vertical'){ + if(options.tickerDirection == 'next'){ + // get the 'top' property where the ticker stopped + var stoppedTop = parseInt($parent.css('top')); + // calculate the remaining distance the show must travel until the loop + var remainingDistance = (origShowHeight + stoppedTop) + $children.eq(0).height(); + }else if(options.tickerDirection == 'prev'){ + // get the 'left' property where the ticker stopped + var stoppedTop = -parseInt($parent.css('top')); + // calculate the remaining distance the show must travel until the loop + var remainingDistance = (stoppedTop) - $children.eq(0).height(); + } + // calculate the speed ratio to seamlessly finish the loop + var finishingSpeed = (remainingDistance * options.tickerSpeed) / origShowHeight; + // call the show + moveTheShow(tickerTop, remainingDistance, finishingSpeed); + // check if changeText argument is supplied + if(typeof(changeText) == 'undefined'){ + var changeText = true; + } + if(changeText && options.ticker){ + $autoControls.html($stopContent).removeClass('start').addClass('stop'); + autoPlaying = true; + } + } + } + + /** + * Initialize a new slideshow + */ + this.initShow = function(){ + + // reinitialize all variables + // base = this; + $parent = $(this); + $origElement = $parent.clone(); + $children = $parent.children(); + $outerWrapper = ''; + $firstChild = $parent.children(':first'); + childrenWidth = $firstChild.width(); + childrenMaxWidth = 0; + childrenOuterWidth = $firstChild.outerWidth(); + childrenMaxHeight = 0; + wrapperWidth = getWrapperWidth(); + wrapperHeight = getWrapperHeight(); + isWorking = false; + $pager = ''; + currentSlide = 0; + origLeft = 0; + origTop = 0; + interval = ''; + $autoControls = ''; + $stopHtml = ''; + $startContent = ''; + $stopContent = ''; + autoPlaying = true; + loaded = false; + origShowWidth = 0; + origShowHeight = 0; + tickerLeft = 0; + tickerTop = 0; + + firstSlide = 0; + lastSlide = $children.length - 1; + + // get the largest child's height and width + $children.each(function(index) { + if($(this).outerHeight() > childrenMaxHeight){ + childrenMaxHeight = $(this).outerHeight(); + } + if($(this).outerWidth() > childrenMaxWidth){ + childrenMaxWidth = $(this).outerWidth(); + } + }); + + // get random slide number + if(options.randomStart){ + var randomNumber = Math.floor(Math.random() * $children.length); + currentSlide = randomNumber; + origLeft = childrenOuterWidth * (options.moveSlideQty + randomNumber); + origTop = childrenMaxHeight * (options.moveSlideQty + randomNumber); + // start show at specific slide + }else{ + currentSlide = options.startingSlide; + origLeft = childrenOuterWidth * (options.moveSlideQty + options.startingSlide); + origTop = childrenMaxHeight * (options.moveSlideQty + options.startingSlide); + } + + // set initial css + initCss(); + + // check to show pager + if(options.pager && !options.ticker){ + if(options.pagerType == 'full'){ + showPager('full'); + }else if(options.pagerType == 'short'){ + showPager('short'); + } + } + + // check to show controls + if(options.controls && !options.ticker){ + setControlsVars(); + } + + // check if auto + if(options.auto || options.ticker){ + // check if auto controls are displayed + if(options.autoControls){ + setAutoControlsVars(); + } + // check if show should auto start + if(options.autoStart){ + // check if autostart should delay + setTimeout(function(){ + base.startShow(true); + }, options.autoDelay); + }else{ + base.stopShow(true); + } + // check if show should pause on hover + if(options.autoHover && !options.ticker){ + setAutoHover(); + } + } + // make the starting slide active + if(options.moveSlideQty > 1){ + makeSlideActive(Math.ceil(currentSlide / options.moveSlideQty)); + }else{ + makeSlideActive(currentSlide); + } + // check for finite show and if controls should be hidden + checkEndControls(); + // show captions + if(options.captions){ + showCaptions(); + } + // perform the callback function + options.onAfterSlide(currentSlide, $children.length, $children.eq(currentSlide)); + } + + /** + * Destroy the current slideshow + */ + this.destroyShow = function(){ + // stop the auto show + clearInterval(interval); + // remove any controls / pagers that have been appended + $('.bx-next, .bx-prev, .bx-pager, .bx-auto', $outerWrapper).remove(); + // unwrap all bx-wrappers + $parent.unwrap().unwrap().removeAttr('style'); + // remove any styles that were appended + $parent.children().removeAttr('style').not('.pager').remove(); + // remove any childrent that were appended + $children.removeClass('pager'); + + } + + /** + * Reload the current slideshow + */ + this.reloadShow = function(){ + base.destroyShow(); + base.initShow(); + } + + // PRIVATE FUNCTIONS + + /** + * Creates all neccessary styling for the slideshow + */ + function initCss(){ + // layout the children + setChildrenLayout(options.startingSlide); + // CSS for horizontal mode + if(options.mode == 'horizontal'){ + // wrap the <ul> in div that acts as a window and make the <ul> uber wide + $parent + .wrap('<div class="'+options.wrapperClass+'" style="width:'+wrapperWidth+'px; position:relative;"></div>') + .wrap('<div class="bx-window" style="position:relative; overflow:hidden; width:'+wrapperWidth+'px;"></div>') + .css({ + width: '999999px', + position: 'relative', + left: '-'+(origLeft)+'px' + }); + $parent.children().css({ + width: childrenWidth, + 'float': 'left', + listStyle: 'none' + }); + $outerWrapper = $parent.parent().parent(); + $children.addClass('pager'); + // CSS for vertical mode + }else if(options.mode == 'vertical'){ + // wrap the <ul> in div that acts as a window and make the <ul> uber tall + $parent + .wrap('<div class="'+options.wrapperClass+'" style="width:'+childrenMaxWidth+'px; position:relative;"></div>') + .wrap('<div class="bx-window" style="width:'+childrenMaxWidth+'px; height:'+wrapperHeight+'px; position:relative; overflow:hidden;"></div>') + .css({ + height: '999999px', + position: 'relative', + top: '-'+(origTop)+'px' + }); + $parent.children().css({ + listStyle: 'none', + height: childrenMaxHeight + }); + $outerWrapper = $parent.parent().parent(); + $children.addClass('pager'); + // CSS for fade mode + }else if(options.mode == 'fade'){ + // wrap the <ul> in div that acts as a window + $parent + .wrap('<div class="'+options.wrapperClass+'" style="width:'+childrenMaxWidth+'px; position:relative;"></div>') + .wrap('<div class="bx-window" style="height:'+childrenMaxHeight+'px; width:'+childrenMaxWidth+'px; position:relative; overflow:hidden;"></div>'); + $parent.children().css({ + listStyle: 'none', + position: 'absolute', + top: 0, + left: 0, + zIndex: 98 + }); + $outerWrapper = $parent.parent().parent(); + $children.not(':eq('+currentSlide+')').fadeTo(0, 0); + $children.eq(currentSlide).css('zIndex', 99); + } + // if captions = true setup a div placeholder + if(options.captions && options.captionsSelector == null){ + $outerWrapper.append('<div class="bx-captions"></div>'); + } + } + + /** + * Depending on mode, lays out children in the proper setup + */ + function setChildrenLayout(){ + // lays out children for horizontal or vertical modes + if(options.mode == 'horizontal' || options.mode == 'vertical'){ + + // get the children behind + var $prependedChildren = getArraySample($children, 0, options.moveSlideQty, 'backward'); + + // add each prepended child to the back of the original element + $.each($prependedChildren, function(index) { + $parent.prepend($(this)); + }); + + // total number of slides to be hidden after the window + var totalNumberAfterWindow = ($children.length + options.moveSlideQty) - 1; + // number of original slides hidden after the window + var pagerExcess = $children.length - options.displaySlideQty; + // number of slides to append to the original hidden slides + var numberToAppend = totalNumberAfterWindow - pagerExcess; + // get the sample of extra slides to append + var $appendedChildren = getArraySample($children, 0, numberToAppend, 'forward'); + + if(options.infiniteLoop){ + // add each appended child to the front of the original element + $.each($appendedChildren, function(index) { + $parent.append($(this)); + }); + } + } + } + + /** + * Sets all variables associated with the controls + */ + function setControlsVars(){ + // check if text or images should be used for controls + // check "next" + if(options.nextImage != ''){ + nextContent = options.nextImage; + nextType = 'image'; + }else{ + nextContent = options.nextText; + nextType = 'text'; + } + // check "prev" + if(options.prevImage != ''){ + prevContent = options.prevImage; + prevType = 'image'; + }else{ + prevContent = options.prevText; + prevType = 'text'; + } + // show the controls + showControls(nextType, nextContent, prevType, prevContent); + } + + /** + * Puts slideshow into auto mode + * + * @param int pause number of ms the slideshow will wait between slides + * @param string direction 'forward', 'backward' sets the direction of the slideshow (forward/backward) + * @param bool controls determines if start/stop controls will be displayed + */ + function setAutoInterval(){ + if(options.auto){ + // finite loop + if(!options.infiniteLoop){ + if(options.autoDirection == 'next'){ + interval = setInterval(function(){ + currentSlide += options.moveSlideQty; + // if currentSlide has exceeded total number + if(currentSlide > lastSlide){ + currentSlide = currentSlide % $children.length; + } + base.goToSlide(currentSlide, false); + }, options.pause); + }else if(options.autoDirection == 'prev'){ + interval = setInterval(function(){ + currentSlide -= options.moveSlideQty; + // if currentSlide is smaller than zero + if(currentSlide < 0){ + negativeOffset = (currentSlide % $children.length); + if(negativeOffset == 0){ + currentSlide = 0; + }else{ + currentSlide = ($children.length) + negativeOffset; + } + } + base.goToSlide(currentSlide, false); + }, options.pause); + } + // infinite loop + }else{ + if(options.autoDirection == 'next'){ + interval = setInterval(function(){ + base.goToNextSlide(false); + }, options.pause); + }else if(options.autoDirection == 'prev'){ + interval = setInterval(function(){ + base.goToPreviousSlide(false); + }, options.pause); + } + } + + }else if(options.ticker){ + + options.tickerSpeed *= 10; + + // get the total width of the original show + $('.pager', $outerWrapper).each(function(index) { + origShowWidth += $(this).width(); + origShowHeight += $(this).height(); + }); + + // if prev start the show from the last slide + if(options.tickerDirection == 'prev' && options.mode == 'horizontal'){ + $parent.css('left', '-'+(origShowWidth+origLeft)+'px'); + }else if(options.tickerDirection == 'prev' && options.mode == 'vertical'){ + $parent.css('top', '-'+(origShowHeight+origTop)+'px'); + } + + if(options.mode == 'horizontal'){ + // get the starting left position + tickerLeft = parseInt($parent.css('left')); + // start the ticker + moveTheShow(tickerLeft, origShowWidth, options.tickerSpeed); + }else if(options.mode == 'vertical'){ + // get the starting top position + tickerTop = parseInt($parent.css('top')); + // start the ticker + moveTheShow(tickerTop, origShowHeight, options.tickerSpeed); + } + + // check it tickerHover applies + if(options.tickerHover){ + setTickerHover(); + } + } + } + + function moveTheShow(leftCss, distance, speed){ + // if horizontal + if(options.mode == 'horizontal'){ + // if next + if(options.tickerDirection == 'next'){ + $parent.animate({'left': '-='+distance+'px'}, speed, 'linear', function(){ + $parent.css('left', leftCss); + moveTheShow(leftCss, origShowWidth, options.tickerSpeed); + }); + // if prev + }else if(options.tickerDirection == 'prev'){ + $parent.animate({'left': '+='+distance+'px'}, speed, 'linear', function(){ + $parent.css('left', leftCss); + moveTheShow(leftCss, origShowWidth, options.tickerSpeed); + }); + } + // if vertical + }else if(options.mode == 'vertical'){ + // if next + if(options.tickerDirection == 'next'){ + $parent.animate({'top': '-='+distance+'px'}, speed, 'linear', function(){ + $parent.css('top', leftCss); + moveTheShow(leftCss, origShowHeight, options.tickerSpeed); + }); + // if prev + }else if(options.tickerDirection == 'prev'){ + $parent.animate({'top': '+='+distance+'px'}, speed, 'linear', function(){ + $parent.css('top', leftCss); + moveTheShow(leftCss, origShowHeight, options.tickerSpeed); + }); + } + } + } + + /** + * Sets all variables associated with the controls + */ + function setAutoControlsVars(){ + // check if text or images should be used for controls + // check "start" + if(options.startImage != ''){ + startContent = options.startImage; + startType = 'image'; + }else{ + startContent = options.startText; + startType = 'text'; + } + // check "stop" + if(options.stopImage != ''){ + stopContent = options.stopImage; + stopType = 'image'; + }else{ + stopContent = options.stopText; + stopType = 'text'; + } + // show the controls + showAutoControls(startType, startContent, stopType, stopContent); + } + + /** + * Handles hover events for auto shows + */ + function setAutoHover(){ + // hover over the slider window + $outerWrapper.find('.bx-window').hover(function() { + if(autoPlaying){ + base.stopShow(false); + } + }, function() { + if(autoPlaying){ + base.startShow(false); + } + }); + } + + /** + * Handles hover events for ticker mode + */ + function setTickerHover(){ + // on hover stop the animation + $parent.hover(function() { + if(autoPlaying){ + base.stopTicker(false); + } + }, function() { + if(autoPlaying){ + base.startTicker(false); + } + }); + } + + /** + * Handles fade animation + */ + function setChildrenFade(){ + // fade out any other child besides the current + $children.not(':eq('+currentSlide+')').fadeTo(options.speed, 0).css('zIndex', 98); + // fade in the current slide + $children.eq(currentSlide).css('zIndex', 99).fadeTo(options.speed, 1, function(){ + isWorking = false; + // ie fade fix + if(jQuery.browser.msie){ + $children.eq(currentSlide).get(0).style.removeAttribute('filter'); + } + // perform the callback function + options.onAfterSlide(currentSlide, $children.length, $children.eq(currentSlide)); + }); + }; + + /** + * Makes slide active + */ + function makeSlideActive(number){ + if(options.pagerType == 'full' && options.pager){ + // remove all active classes + $('a', $pager).removeClass(options.pagerActiveClass); + // assign active class to appropriate slide + $('a', $pager).eq(number).addClass(options.pagerActiveClass); + }else if(options.pagerType == 'short' && options.pager){ + $('.bx-pager-current', $pager).html(currentSlide+1); + } + } + + /** + * Displays next/prev controls + * + * @param string nextType 'image', 'text' + * @param string nextContent if type='image', specify a filepath to the image. if type='text', specify text. + * @param string prevType 'image', 'text' + * @param string prevContent if type='image', specify a filepath to the image. if type='text', specify text. + */ + function showControls(nextType, nextContent, prevType, prevContent){ + // create pager html elements + var $nextHtml = $('<a href="" class="bx-next"></a>'); + var $prevHtml = $('<a href="" class="bx-prev"></a>'); + // check if next is 'text' or 'image' + if(nextType == 'text'){ + $nextHtml.html(nextContent); + }else{ + $nextHtml.html('<img src="'+nextContent+'" />'); + } + // check if prev is 'text' or 'image' + if(prevType == 'text'){ + $prevHtml.html(prevContent); + }else{ + $prevHtml.html('<img src="'+prevContent+'" />'); + } + // check if user supplied a selector to populate next control + if(options.prevSelector){ + $(options.prevSelector).append($prevHtml); + }else{ + $outerWrapper.append($prevHtml); + } + // check if user supplied a selector to populate next control + if(options.nextSelector){ + $(options.nextSelector).append($nextHtml); + }else{ + $outerWrapper.append($nextHtml); + } + // click next control + $nextHtml.click(function() { + base.goToNextSlide(); + return false; + }); + // click prev control + $prevHtml.click(function() { + base.goToPreviousSlide(); + return false; + }); + } + + /** + * Displays the pager + * + * @param string type 'full', 'short' + */ + function showPager(type){ + // sets up logic for finite multi slide shows + var pagerQty = $children.length; + // if we are moving more than one at a time and we have a finite loop + if(options.moveSlideQty > 1){ + // if slides create an odd number of pages + if($children.length % options.moveSlideQty != 0){ + // pagerQty = $children.length / options.moveSlideQty + 1; + pagerQty = Math.ceil($children.length / options.moveSlideQty); + // if slides create an even number of pages + }else{ + pagerQty = $children.length / options.moveSlideQty; + } + } + var pagerString = ''; + // check if custom build function was supplied + if(options.buildPager){ + for(var i=0; i<pagerQty; i++){ + pagerString += options.buildPager(i, $children.eq(i * options.moveSlideQty)); + } + + // if not, use default pager + }else if(type == 'full'){ + // build the full pager + for(var i=1; i<=pagerQty; i++){ + pagerString += '<a href="" class="pager-link pager-'+i+'">'+i+'</a>'; + } + }else if(type == 'short') { + // build the short pager + pagerString = '<span class="bx-pager-current">'+(options.startingSlide+1)+'</span> '+options.pagerShortSeparator+' <span class="bx-pager-total">'+$children.length+'</span>'; + } + // check if user supplied a pager selector + if(options.pagerSelector){ + $(options.pagerSelector).append(pagerString); + $pager = $(options.pagerSelector); + }else{ + var $pagerContainer = $('<div class="bx-pager"></div>'); + $pagerContainer.append(pagerString); + // attach the pager to the DOM + if(options.pagerLocation == 'top'){ + $outerWrapper.prepend($pagerContainer); + }else if(options.pagerLocation == 'bottom'){ + $outerWrapper.append($pagerContainer); + } + // cache the pager element + $pager = $('.bx-pager', $outerWrapper); + } + $pager.children().click(function() { + // only if pager is full mode + if(options.pagerType == 'full'){ + // get the index from the link + var slideIndex = $pager.children().index(this); + // accomodate moving more than one slide + if(options.moveSlideQty > 1){ + slideIndex *= options.moveSlideQty; + } + base.goToSlide(slideIndex); + } + return false; + }); + } + + /** + * Displays captions + */ + function showCaptions(){ + // get the title from each image + var caption = $('img', $children.eq(currentSlide)).attr('title'); + // if the caption exists + if(caption != ''){ + // if user supplied a selector + if(options.captionsSelector){ + $(options.captionsSelector).html(caption); + }else{ + $('.bx-captions', $outerWrapper).html(caption); + } + }else{ + // if user supplied a selector + if(options.captionsSelector){ + $(options.captionsSelector).html(' '); + }else{ + $('.bx-captions', $outerWrapper).html(' '); + } + } + } + + /** + * Displays start/stop controls for auto and ticker mode + * + * @param string type 'image', 'text' + * @param string next [optional] if type='image', specify a filepath to the image. if type='text', specify text. + * @param string prev [optional] if type='image', specify a filepath to the image. if type='text', specify text. + */ + function showAutoControls(startType, startContent, stopType, stopContent){ + // create pager html elements + $autoControls = $('<a href="" class="bx-start"></a>'); + // check if start is 'text' or 'image' + if(startType == 'text'){ + $startContent = startContent; + }else{ + $startContent = '<img src="'+startContent+'" />'; + } + // check if stop is 'text' or 'image' + if(stopType == 'text'){ + $stopContent = stopContent; + }else{ + $stopContent = '<img src="'+stopContent+'" />'; + } + // check if user supplied a selector to populate next control + if(options.autoControlsSelector){ + $(options.autoControlsSelector).append($autoControls); + }else{ + $outerWrapper.append('<div class="bx-auto"></div>'); + $('.bx-auto', $outerWrapper).html($autoControls); + } + + // click start control + $autoControls.click(function() { + if(options.ticker){ + if($(this).hasClass('stop')){ + base.stopTicker(); + }else if($(this).hasClass('start')){ + base.startTicker(); + } + }else{ + if($(this).hasClass('stop')){ + base.stopShow(true); + }else if($(this).hasClass('start')){ + base.startShow(true); + } + } + return false; + }); + + } + + /** + * Checks if show is in finite mode, and if slide is either first or last, then hides the respective control + */ + function checkEndControls(){ + if(!options.infiniteLoop && options.hideControlOnEnd){ + // check previous + if(currentSlide == firstSlide){ + $('.bx-prev', $outerWrapper).hide(); + }else{ + $('.bx-prev', $outerWrapper).show(); + } + // check next + if(currentSlide == lastSlide){ + $('.bx-next', $outerWrapper).hide(); + }else{ + $('.bx-next', $outerWrapper).show(); + } + } + } + + /** + * Returns the left offset of the slide from the parent container + */ + function getSlidePosition(number, side){ + if(side == 'left'){ + var position = $('.pager', $outerWrapper).eq(number).position().left; + }else if(side == 'top'){ + var position = $('.pager', $outerWrapper).eq(number).position().top; + } + return position; + } + + /** + * Returns the width of the wrapper + */ + function getWrapperWidth(){ + var wrapperWidth = $firstChild.outerWidth() * options.displaySlideQty; + return wrapperWidth; + } + + /** + * Returns the height of the wrapper + */ + function getWrapperHeight(){ + // if displaying multiple slides, multiple wrapper width by number of slides to display + var wrapperHeight = $firstChild.outerHeight() * options.displaySlideQty; + return wrapperHeight; + } + + /** + * Returns a sample of an arry and loops back on itself if the end of the array is reached + * + * @param array array original array the sample is derived from + * @param int start array index sample will start + * @param int length number of items in the sample + * @param string direction 'forward', 'backward' direction the loop should travel in the array + */ + function getArraySample(array, start, length, direction){ + // initialize empty array + var sample = []; + // clone the length argument + var loopLength = length; + // determines when the empty array should start being populated + var startPopulatingArray = false; + // reverse the array if direction = 'backward' + if(direction == 'backward'){ + array = $.makeArray(array); + array.reverse(); + } + // loop through original array until the length argument is met + while(loopLength > 0){ + // loop through original array + $.each(array, function(index, val) { + // check if length has been met + if(loopLength > 0){ + // don't do anything unless first index has been reached + if(!startPopulatingArray){ + // start populating empty array + if(index == start){ + startPopulatingArray = true; + // add element to array + sample.push($(this).clone()); + // decrease the length clone variable + loopLength--; + } + }else{ + // add element to array + sample.push($(this).clone()); + // decrease the length clone variable + loopLength--; + } + // if length has been met, break loose + }else{ + return false; + } + }); + } + return sample; + } + + this.each(function(){ + // make sure the element has children + if($(this).children().length > 0){ + base.initShow(); + } + }); + + return this; + } + + jQuery.fx.prototype.cur = function(){ + if ( this.elem[this.prop] != null && (!this.elem.style || this.elem.style[this.prop] == null) ) { + return this.elem[ this.prop ]; + } + + var r = parseFloat( jQuery.css( this.elem, this.prop ) ); + // return r && r > -10000 ? r : 0; + return r; + } + + +})(jQuery); +
--- a/bns_website/templates/bands/band_list.html Sun Nov 13 21:20:13 2011 -0600 +++ b/bns_website/templates/bands/band_list.html Mon Nov 14 19:55:14 2011 -0600 @@ -4,36 +4,55 @@ {% block custom_css %} <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/redmond/jquery-ui.css"> +<link rel="stylesheet" href="{{ STATIC_URL }}css/bx_styles.css"> {% endblock %} {% block custom_js %} <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script> +<script type="text/javascript" src="{{ STATIC_URL }}js/bxslider/jquery.bxSlider.min.js"></script> <script type="text/javascript"> - $(function() { - $("#accordion").accordion({active: false}); - }); + $(document).ready(function(){ + $('#slider1').bxSlider({ + mode: 'fade', + speed: 500, + auto: true, + autoControls: true, + autoHover: true, + randomStart: true, + pager: true, + pagerType: 'full', + nextImage: '{{ STATIC_URL }}images/icon_arrow_right.png', + prevImage: '{{ STATIC_URL }}images/icon_arrow_left.png', + wrapperClass: 'bands-slider-wrap' + }) + }) </script> +<style> + .hero-unit h1 { font-size: 50px; } +</style> {% endblock %} {% block content %} {% navbar 'bands' %} - -{% for band in object_list %} <div class="hero-unit"> - <h1>{{ band.name }}</h1> - <div class="row"> - <div class="span10"> - <br/> - <span>{{ band.notes }}</span> - <p style="margin-top:1em"><a class="btn default" href="">Band Site</a></p> + <div id="slider1"> + {% for band in object_list %} + <div> + <div class="row"> + <div class="span4"> + <img src="http://placehold.it/200x200&text={{ band.name|escapejs }}"> + </div> + <div class="span10"> + <h1>{{ band.name }}</h1> + <br/> + <span>{{ band.notes }}</span> + <p style="margin-top:1em"><a class="btn default" href="">Band Site</a></p> + </div> + </div> </div> - <div class="span4"> - <img src="http://placehold.it/200x200&text={{ band.name|escapejs }}"> - </div> - </div> - + {% endfor %} + </div> </div> -{% endfor %} {% endblock %}