Commits

Marc DM committed 428fd7d

updated javascript to use data attributes on div.nivoSlider for slider initiation. updated image-title update mechanism to use jquery and regular expressions. id attributes for images within the slider have been updated to include {{ object.pk }} so we don't have id clashes on pages with multiple sliders that use the same images

Comments (0)

Files changed (1)

cmsplugin_nivoslider/templates/nivo/slider.html

 
 
 {% addtoblock "css" %}
-    <link rel="stylesheet" href="{{ STATIC_URL }}nivo/nivo-slider.css" type="text/css" media="screen" />
+    <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" />
+    <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>
+<script type="text/javascript">
+//<![CDATA[
+(function($){
+    $('img[id^=nivo-slide]').each(function(){
+        var $img = $(this),
+            idrx = /nivo-slide(\d+_\d+)-.+/ ,
+            imgid = idrx.exec($img.attr('id'))[1],
+            $txt = $('div[id=nivo-slide'+ imgid + '-text]');
+        $img.attr('title', $txt.html().trim());
+        $txt.remove();
+    });
+    
+    $('div.nivoSlider').each(function(e){
+		var d = $(this).data(),
+		vd = { 
+	        effect: d.effect,
+	        animSpeed: d.speed - 0,
+	        pauseTime: d.pause_time - 0,
+	        directionNav: Boolean(d.arrows-0),
+	        controlNavThumbs: Boolean(d.thumbs-0),
+	        pauseOnHover: Boolean(d.pause_on_hover-0),
+	        manualAdvance: Boolean(d.manual-0),
+	        randomStart: Boolean(d.randomstart-0),
+	        prevText: '{% trans 'prev'|capfirst %}',
+	        nextText: '{% trans 'next'|capfirst %}'
+		};
+		$(this).nivoSlider(vd);
+	});
+})(window.jQuery);
+//]]>
+</script>
 {% 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 }}"
+<div    class="slider-wrapper theme-{{object.theme}}"
         {% if object.width %}
-            style="width: {{ object.width }}px;"
+            style="width: {{object.width}}px;"
         {% endif %}>
-    <div    id="nivoslider{{ object.pk }}" class="nivoSlider"
-            title="{{ object.title|default:'' }}"
+    {% spaceless %}<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="{% if object.size %}{% thumbnail img.image object.size %}{% else %}{{ img.image.url }}{% endif %}"
-                    data-thumb="{% thumbnail img.image 64x64 %}"
-                    alt="{{ img.name|default:'' }}" />
-            {% spaceless %}
-                <div id="nivo-slide{{ img.pk }}-text">
-                    {{ img.description|default:''|safe }}
+                style="height: {{object.height}}px;"
+            {% endif %} 
+            data-effect="{{object.effect}}" 
+            data-speed="{{object.anim_speed}}"
+            data-pause_time="{{object.pause_time}}"
+            data-arrows="{{object.arrows|yesno:'1,0'}}"
+            data-thumbs="{{object.thumbnails|yesno:'1,0'}}" 
+            data-pause_on_hover="{{object.pause_on_hover|yesno:'1,0'}}"
+            data-manual="{{object.manual_advance|yesno:'1,0'}}"
+            data-randomstart="{{object.random_start|yesno:'1,0'}}">{% endspaceless %}
+        {% for img in images %}{% spaceless %}
+            <img    id="nivo-slide{{object.pk}}_{{img.pk}}-image"
+                    src="{% if object.size %}{% thumbnail img.image object.size crop upscale %}{% else %}{{ img.image.url }}{% endif %}"
+                    data-thumb="{{ img.image.icons.64 }}"
+                    alt="{{img.name|default:''}}" />
+            
+                <div id="nivo-slide{{object.pk}}_{{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.