--- a/bns_website/templates/bands/band_list.html	Mon Nov 14 20:06:58 2011 -0600
+++ b/bns_website/templates/bands/band_list.html	Mon Nov 14 23:32:14 2011 -0600
@@ -4,37 +4,73 @@
 
 {% 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 }}js/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
+<link rel="stylesheet" href="{{ STATIC_URL }}css/bx_styles.css">
+<style>
+   .hero-unit h1 { font-size: 50px; }
+</style>
 {% 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" src="{{ STATIC_URL }}js/fancybox/jquery.fancybox-1.3.4.pack.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'
+      });
+
+      $("a.band-image").fancybox({
+         'transitionIn' :  'elastic',
+         'transitionOut'   :  'elastic',
+         'speedIn'      :  600,
+         'speedOut'     :  200,
+         'overlayShow'  :  false
+      });
+   });
 </script>
 {% endblock %}
 
 {% block content %}
 {% navbar 'bands' %}
-<h1>Bands</h1>
-<p>This is too &quot;wall of text-y&quot;, so maybe break it up with band photos. And/or put a javascript slideshow of all the bands up here at the top.</p>
-<dl>
-{% for band in object_list %}
-<dt><a href="{{ band.url }}">{{ band.name }}</a></dt>
-<dd>{{ band.notes|linebreaksbr }}</dd>
-{% endfor %}
-</dl>
 
-<p>And here is what it looks like as a jQuery accordion.</p>
-<div id="accordion">
-{% for band in object_list %}
-<h3><a href="#">{{ band.name }}</a></h3>
-<div>
-   {{ band.notes|linebreaksbr }}
-   <p style="margin-top:1em"><a class="btn default" href="{{ band.url }}">{{ band.name }} Website</a></p>
-</div>
-{% endfor %}
+<div class="hero-unit">
+   <div id="slider1">
+      {% for band in object_list %}
+         <div>
+            <div class="row">
+               <div class="span4">
+                  {% if band.asset_prefix %}
+                     <a class="band-image" href="{{ STATIC_URL }}images/bands/{{ band.asset_prefix }}_large.jpg">
+                        <img src="{{ STATIC_URL }}images/bands/{{ band.asset_prefix }}_small.jpg" alt="{{ band.name }}" title="View {{ band.name }} full size" />
+                     </a>
+                  {% else %}
+                     <img src="http://placehold.it/200x200&text={{ band.name|escapejs }}">
+                  {% endif %}
+               </div>
+               <div class="span10">
+                  <h1>{{ band.name }}</h1>
+                  <br/>
+                  <span>{{ band.notes }}</span>
+                  {% if band.url %}
+                     <p style="margin-top:1em"><a class="btn default" href="{{ band.url }}">Band Site</a></p>
+                  {% endif %}
+               </div>
+            </div>
+         </div>
+      {% endfor %}
+   </div>
 </div>
 
 {% endblock %}