diff bns_website/templates/bands/band_list.html @ 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
line wrap: on
line diff
--- 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 %}