Mercurial > public > bravenewsurf

diff 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
line wrap: on
line diff
--- a/bns_website/templates/bands/band_list.html	Mon Nov 14 19:55:14 2011 -0600
+++ b/bns_website/templates/bands/band_list.html	Mon Nov 14 23:17:58 2011 -0600
@@ -4,12 +4,17 @@
 
 {% 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 }}js/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
 <link rel="stylesheet" href="{{ STATIC_URL }}css/bx_styles.css">
+<style>
+   .hero-unit h1 { font-size: 50px; }
+</style>
 {% 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" src="{{ STATIC_URL }}js/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
 <script type="text/javascript">
    $(document).ready(function(){
       $('#slider1').bxSlider({
@@ -24,12 +29,17 @@
          nextImage: '{{ STATIC_URL }}images/icon_arrow_right.png',
          prevImage: '{{ STATIC_URL }}images/icon_arrow_left.png',
          wrapperClass: 'bands-slider-wrap'
-      })
-   })
+      });
+
+      $("a.band-image").fancybox({
+         'transitionIn' :  'elastic',
+         'transitionOut'   :  'elastic',
+         'speedIn'      :  600,
+         'speedOut'     :  200,
+         'overlayShow'  :  false
+      });
+   });
 </script>
-<style>
-   .hero-unit h1 { font-size: 50px; }
-</style>
 {% endblock %}
 
 {% block content %}
@@ -41,13 +51,21 @@
          <div>
             <div class="row">
                <div class="span4">
-                  <img src="http://placehold.it/200x200&text={{ band.name|escapejs }}">
+                  {% if band.asset_prefix %}
+                     <a class="band-image" href="{{ STATIC_URL }}images/bands/{{ band.asset_prefix }}_large.jpg">
+                        <img src="{{ STATIC_URL }}images/bands/{{ band.asset_prefix }}_small.jpg" alt="{{ band.name }}" title="View {{ band.name }} full size" />
+                     </a>
+                  {% else %}
+                     <img src="http://placehold.it/200x200&text={{ band.name|escapejs }}">
+                  {% endif %}
                </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>
+                  {% if band.url %}
+                     <p style="margin-top:1em"><a class="btn default" href="{{ band.url }}">Band Site</a></p>
+                  {% endif %}
                </div>
             </div>
          </div>