Mercurial > public > bravenewsurf
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 %}