{% load i18n sekizai_tags thumbnail  %}


{% addtoblock "css" %}
    <link rel="stylesheet" href="{{STATIC_URL}}nivo/nivo-slider.css" type="text/css" media="screen" />
{% endaddtoblock %}

{% addtoblock "css" %}
    <link rel="stylesheet" href="{{STATIC_URL}}nivo/themes/{{object.theme}}/{{object.theme}}.css" type="text/css" media="screen" />
{% endaddtoblock %}

{% addtoblock "js" %}
    <script type="text/javascript" src="{{STATIC_URL}}nivo/js/jquery.nivo.slider.pack.js"></script>
{% endaddtoblock %}

{% addtoblock "js" %}
    <script type="text/javascript">
        $(function() {
            $('#nivoslider{{object.pk}}').nivoSlider({
                effect: '{{object.effect}}',
                animSpeed: {{object.anim_speed}},
                pauseTime: {{object.pause_time}},
                prevText: '{% trans 'prev'|capfirst %}',
                nextText: '{% trans 'next'|capfirst %}'
            });
        });
    </script>
{% endaddtoblock %}

<div class="slider-wrapper theme-{{object.theme}}">
    <div id="nivoslider{{object.pk}}" class="nivoSlider"
        style="
            {% if object.width %}
                width:{{object.width}}px;
            {% endif %}
            {% if object.height %}
                height:{{object.height}}px;
            {% endif %}">
        {% for img in images %}
            <img
                {% if size %}
                    src="{% thumbnail img.image size crop %}"
                {% else %}
                    src="{{img.image.url}}"
                {% endif %}
                alt="{{img.name}}" title="{{img.description}}" />
        {% endfor %}
    </div>
</div>