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