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 %}