{% load thumbnail adminmedia sekizai_tags %}
{% addtoblock "js" %}<script type="text/javascript" src="{{ STATIC_URL }}filer_gallery/orbit/jquery-1.5.1.min.js"></script>{% endaddtoblock %}
{% addtoblock "js" %}<script type="text/javascript" src="{{ STATIC_URL }}filer_gallery/orbit/jquery.orbit-1.2.3.min.js"></script>{% endaddtoblock %}
{% addtoblock "css" %}<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}filer_gallery/orbit/orbit-1.2.3.css" media="all" />{% endaddtoblock %}
{% addtoblock "css" %}<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}cmsplugin_filer_gallery/cmsplugin_filer_gallery.css" media="all" />{% endaddtoblock %}
{% addtoblock "js" %}
<script type="text/javascript">
//<![CDATA[
(function ($) {
    var config = {{ orbit_config|safe }}
    
    config.bulletThumbs = false // thumbnails for the bullets
    config.bulletThumbLocation = ''		     
    config.afterSlideChange = function(){}
    
    $(document).ready(function () {
        $('#filer-gallery-{{ instance.pk }}').orbit(config);
    });
})(jQuery)
//]]>
</script>
{% endaddtoblock %}

<div id="filer-gallery-{{ instance.pk }}">
     {% for image in instance.gallery.galleryimage_set.all %}
     <img src="{% thumbnail image.image size %}" alt="{{ image.title }}" {% if instance.captions %}data-caption="#filer-gallery-caption-{{ image.pk }}"{% endif %} />
     {% endfor %}
</div>
{% if instance.captions %}
    {% for image in instance.gallery.galleryimage_set.all %}
    <span class="orbit-caption" id="filer-gallery-caption-{{ image.pk }}">{{ image.title }}</span>
    {% endfor %}
{% endif %}