Mercurial > public > bravenewsurf
comparison 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 |
comparison
equal
deleted
inserted
replaced
52:12a39a6f5247 | 53:98cc19041d8f |
---|---|
2 {% load core_tags %} | 2 {% load core_tags %} |
3 {% block title %}Bands{% endblock %} | 3 {% block title %}Bands{% endblock %} |
4 | 4 |
5 {% block custom_css %} | 5 {% block custom_css %} |
6 <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/redmond/jquery-ui.css"> | 6 <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/redmond/jquery-ui.css"> |
7 <link rel="stylesheet" href="{{ STATIC_URL }}css/bx_styles.css"> | |
7 {% endblock %} | 8 {% endblock %} |
8 {% block custom_js %} | 9 {% block custom_js %} |
9 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> | 10 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> |
10 <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script> | 11 <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script> |
12 <script type="text/javascript" src="{{ STATIC_URL }}js/bxslider/jquery.bxSlider.min.js"></script> | |
11 <script type="text/javascript"> | 13 <script type="text/javascript"> |
12 $(function() { | 14 $(document).ready(function(){ |
13 $("#accordion").accordion({active: false}); | 15 $('#slider1').bxSlider({ |
14 }); | 16 mode: 'fade', |
17 speed: 500, | |
18 auto: true, | |
19 autoControls: true, | |
20 autoHover: true, | |
21 randomStart: true, | |
22 pager: true, | |
23 pagerType: 'full', | |
24 nextImage: '{{ STATIC_URL }}images/icon_arrow_right.png', | |
25 prevImage: '{{ STATIC_URL }}images/icon_arrow_left.png', | |
26 wrapperClass: 'bands-slider-wrap' | |
27 }) | |
28 }) | |
15 </script> | 29 </script> |
30 <style> | |
31 .hero-unit h1 { font-size: 50px; } | |
32 </style> | |
16 {% endblock %} | 33 {% endblock %} |
17 | 34 |
18 {% block content %} | 35 {% block content %} |
19 {% navbar 'bands' %} | 36 {% navbar 'bands' %} |
20 | 37 |
21 | |
22 {% for band in object_list %} | |
23 <div class="hero-unit"> | 38 <div class="hero-unit"> |
24 <h1>{{ band.name }}</h1> | 39 <div id="slider1"> |
25 <div class="row"> | 40 {% for band in object_list %} |
26 <div class="span10"> | 41 <div> |
27 <br/> | 42 <div class="row"> |
28 <span>{{ band.notes }}</span> | 43 <div class="span4"> |
29 <p style="margin-top:1em"><a class="btn default" href="">Band Site</a></p> | 44 <img src="http://placehold.it/200x200&text={{ band.name|escapejs }}"> |
45 </div> | |
46 <div class="span10"> | |
47 <h1>{{ band.name }}</h1> | |
48 <br/> | |
49 <span>{{ band.notes }}</span> | |
50 <p style="margin-top:1em"><a class="btn default" href="">Band Site</a></p> | |
51 </div> | |
52 </div> | |
30 </div> | 53 </div> |
31 <div class="span4"> | 54 {% endfor %} |
32 <img src="http://placehold.it/200x200&text={{ band.name|escapejs }}"> | 55 </div> |
33 </div> | |
34 </div> | |
35 | |
36 </div> | 56 </div> |
37 {% endfor %} | |
38 | 57 |
39 {% endblock %} | 58 {% endblock %} |