Bertrand Bordage avatar Bertrand Bordage committed c076246

Put HTML description in an HTML tag and copies it to img title using JS.

This allows for complex HTML titles.

Comments (0)

Files changed (1)

cmsplugin_nivoslider/templates/nivo/slider.html

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