Mercurial > public > bravenewsurf

comparison bns_website/templates/bands/band_list.html @ 55:c3b4884fe4ea bands-experimental-ui

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Added some band images to the Bands page. Note, this requires you to "loaddata bands.json" to install asset information. Added a fancy box effect to the Band images (click to see larger image).
author Chris Ridgway <ckridgway@gmail.com>
date Mon, 14 Nov 2011 23:17:58 -0600
parents 98cc19041d8f
children e0a0ebc56afe
comparison
equal deleted inserted replaced
53:98cc19041d8f 55:c3b4884fe4ea
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 }}js/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
7 <link rel="stylesheet" href="{{ STATIC_URL }}css/bx_styles.css"> 8 <link rel="stylesheet" href="{{ STATIC_URL }}css/bx_styles.css">
9 <style>
10 .hero-unit h1 { font-size: 50px; }
11 </style>
8 {% endblock %} 12 {% endblock %}
9 {% block custom_js %} 13 {% block custom_js %}
10 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> 14 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
11 <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script> 15 <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> 16 <script type="text/javascript" src="{{ STATIC_URL }}js/bxslider/jquery.bxSlider.min.js"></script>
17 <script type="text/javascript" src="{{ STATIC_URL }}js/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
13 <script type="text/javascript"> 18 <script type="text/javascript">
14 $(document).ready(function(){ 19 $(document).ready(function(){
15 $('#slider1').bxSlider({ 20 $('#slider1').bxSlider({
16 mode: 'fade', 21 mode: 'fade',
17 speed: 500, 22 speed: 500,
22 pager: true, 27 pager: true,
23 pagerType: 'full', 28 pagerType: 'full',
24 nextImage: '{{ STATIC_URL }}images/icon_arrow_right.png', 29 nextImage: '{{ STATIC_URL }}images/icon_arrow_right.png',
25 prevImage: '{{ STATIC_URL }}images/icon_arrow_left.png', 30 prevImage: '{{ STATIC_URL }}images/icon_arrow_left.png',
26 wrapperClass: 'bands-slider-wrap' 31 wrapperClass: 'bands-slider-wrap'
27 }) 32 });
28 }) 33
34 $("a.band-image").fancybox({
35 'transitionIn' : 'elastic',
36 'transitionOut' : 'elastic',
37 'speedIn' : 600,
38 'speedOut' : 200,
39 'overlayShow' : false
40 });
41 });
29 </script> 42 </script>
30 <style>
31 .hero-unit h1 { font-size: 50px; }
32 </style>
33 {% endblock %} 43 {% endblock %}
34 44
35 {% block content %} 45 {% block content %}
36 {% navbar 'bands' %} 46 {% navbar 'bands' %}
37 47
39 <div id="slider1"> 49 <div id="slider1">
40 {% for band in object_list %} 50 {% for band in object_list %}
41 <div> 51 <div>
42 <div class="row"> 52 <div class="row">
43 <div class="span4"> 53 <div class="span4">
44 <img src="http://placehold.it/200x200&text={{ band.name|escapejs }}"> 54 {% if band.asset_prefix %}
55 <a class="band-image" href="{{ STATIC_URL }}images/bands/{{ band.asset_prefix }}_large.jpg">
56 <img src="{{ STATIC_URL }}images/bands/{{ band.asset_prefix }}_small.jpg" alt="{{ band.name }}" title="View {{ band.name }} full size" />
57 </a>
58 {% else %}
59 <img src="http://placehold.it/200x200&text={{ band.name|escapejs }}">
60 {% endif %}
45 </div> 61 </div>
46 <div class="span10"> 62 <div class="span10">
47 <h1>{{ band.name }}</h1> 63 <h1>{{ band.name }}</h1>
48 <br/> 64 <br/>
49 <span>{{ band.notes }}</span> 65 <span>{{ band.notes }}</span>
50 <p style="margin-top:1em"><a class="btn default" href="">Band Site</a></p> 66 {% if band.url %}
67 <p style="margin-top:1em"><a class="btn default" href="{{ band.url }}">Band Site</a></p>
68 {% endif %}
51 </div> 69 </div>
52 </div> 70 </div>
53 </div> 71 </div>
54 {% endfor %} 72 {% endfor %}
55 </div> 73 </div>