29 September 2013

Posted by: Duncan
Tags: Bootstrap | CSS

Not everyone uses Facebook. Or Flickr. Or Instagram. Or anything other than a web browser, whether on a phone, tablet or desktop. So my challenge was to get some Monza GP photos online in a nice, shareable way so that friends and family could see them without signing up to an unwanted social media service.

Here's a responsive Bootstrap grid based on thumbnail and modal classes.

A bit of Django jiggery-pokery makes a 3x3 grid of thumbs quite easy...

<div class="row centered">

{% for title in monza_titles %}

   <div class="col-xs-4">
      <a href="#myModal" class="thumbnail" data-toggle="modal" 
         data-img-url="{{base_path}}/0{{forloop.counter}}.jpg" 
         data-desc="{{title}}">
         <img alt="..." src="{{base_path}}/0{{forloop.counter}}.jpg"/>
      </a>
   </div>
   
   {% if forloop.counter|divisibleby:3 %}
   
   </div>
   <div class="row centered">
   
   {% endif %}
   
{% endfor %}

</div>

The modal dialog is simply implemented as;

<div id="img_modal" class="modal fade">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">
            <button type="button" class="close" 
            data-dismiss="modal" aria-hidden="true"> X </button>
         </div>
         <div class="modal-body">
            <img src="#" class="img-responsive"/>
         </div>
         <div class="modal-footer">
            <button class="btn" data-dismiss="modal" 
            aria-hidden="true">Close</button>
         </div>
      </div>
   </div>
</div>

...and a bit of JavaScript glue...

//  If an element with the thumbnail class is clicked,
//  display the image dialog (the modal) using the 
//  HTML5 'data-' attribute...
   
$(".thumbnail").click(function (e) {
   $("#img_modal img").attr("src", $(this).attr("data-img-url"));
});

And that's it. A really simply cross-device HTML5 gallery, with no third-party plugins. Forza Bootstrap!