Source

cmsplugin-nivoslider / cmsplugin_nivoslider / templates / nivo / slider.html

{% load i18n sekizai_tags %}


{% 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 %}

<div    class="slider-wrapper theme-{{object.theme}}"
        {% if object.width %}
            style="width: {{object.width}}px;"
        {% endif %}>
    <div    id="nivoslider{{object.pk}}" class="nivoSlider"
            title="{{object.title|default:''}}"
            {% if object.height %}
                style="height: {{object.height}}px;"
            {% endif %}>
        {% for img in images %}
            <img    id="nivo-slide{{img.pk}}-image"
                    src="{{img.image.url}}"
                    data-thumb="{{ img.image.icons.64 }}"
                    alt="{{img.name|default:''}}" />
            {% spaceless %}
                <div id="nivo-slide{{img.pk}}-text">
                    {{img.description|default:''|safe}}
                </div>
            {% endspaceless %}
        {% endfor %}
    </div>
</div>

{% for img in images %}
    <script type="text/javascript">
        var image = document.getElementById("nivo-slide{{img.pk}}-image");
        var text = document.getElementById("nivo-slide{{img.pk}}-text");
        image.title = text.innerHTML;
        text.parentNode.removeChild(text);
    </script>
{% endfor %}

<script type="text/javascript">
    $(function() {
        $('#nivoslider{{object.pk}}').nivoSlider({
            effect: '{{object.effect}}',
            animSpeed: {{object.anim_speed}},
            pauseTime: {{object.pause_time}},
            directionNav: {{object.arrows|lower}},
            controlNavThumbs: {{object.thumbnails|lower}},
            pauseOnHover: {{object.pause_on_hover|lower}},
            manualAdvance: {{object.manual_advance|lower}},
            prevText: '{% trans 'prev'|capfirst %}',
            nextText: '{% trans 'next'|capfirst %}',
            randomStart: {{object.random_start|lower}}
        });
    });
</script>
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.