Binding custom image galleries to mediasets

User can group photos in Voog into collections/mediasets. Sometimes user configurable galleries are needed to be shown on multiple pages. Also in some cases galleries are just easier to maintain in the same place as all files. In Voog data about mediasets can be obtained and coded into sliders.

Example

Mediaset bound to basic jQuery slider.

<!DOCTYPE html>
<html>
  <head>
    <link href="bjqs.css" media="screen" rel="stylesheet" type="text/css">
  </head>

  <body>
    <div id="slider">
      <ul class="bjqs">
        {% load mediaset to "my_gallery" title="exampleset" %}
        {% for photo in my_gallery.photos %}
          <li>
            <img src="/photos/{{photo.filename}}">
          </li>
        {% endfor %}
      </ul>
    </div>

    <script>
      $(document).ready(function() {
        $('#slider').bjqs({
          height  : 400,
          width : 600,
          responsive  : true
        });
      });
    </script>

    <script type="text/javascript" src="bjqs-1.3.js"></script>
  </body>
</html>