[Answer]-SlideShow of Images having Different time durations in django

by

1👍

✅

I don’t think your jquery is doing what you think it’s doing. At the moment you’re attempting to get the value of an attribute that doesn’t exist. You’re trying to get the attribute "ImagesDurationValue" from the <img> within your div, but it doesn’t exist.

Taking from the example here

EDIT
Take the script out and put it into a separate file, say, app.js. Then put a list that will contain all your durations.

app.js

var durations = [];

$(document).ready(function(){

   $('.slideshow ').cycle({
      fx:     'fade',
      speed:  'fast',
      timeoutFn: computeTimeout
   });

   function calculateTimeout(currElement, nextElement, opts, isForward) { 
      var index = opts.currSlide; 
      return durations[index]; 
   } 
});

Then in your django template:

        {% for ImageVar,ImagesDurationVar in variables %}
            <img  src={{STATIC_URL}}{{ImageVar}} width={{item1|add:-80}} height={{item2|add:-330}}>
            <script src="{{STATIC_URL}}/app.js">
            durations.push({{ ImagesDurationVar }});
            </script>
        {% endfor %}
👤Tyler Dovall

0👍

Have you tried putting the script at the bottom of the page?

👤sidj9n

0👍

Final solution which work successfully is as follow:

    <!DOCTYPE html>
    <html>
    <META HTTP-EQUIV="refresh" CONTENT="60">
    <head>
           <script src={{stati_url}}app.js></script>
           <script src={{stati_url}}jquery_cycle.js></script>
          <title>Front End Running</title>
     </head>
    <body>
        {% for item1, item2 in variable_SR %}
            <div id="content1" style="background-color:#EEEEEE;">
                <div class="slidetime">
                <script>
                   var i=0;
                   {% for ImagesDurationVar in variable_1 %}
                        durations[i]={% widthratio ImagesDurationVar 1 1000 %};
                        i++;
                        {% endfor %}
                 </script>
                </div>
                <div class="slideshow">
                    {% for ImageVar in variable_1 %}
                        <img  src={{STATIC_URL}}{{ImageVar}} width={{item1|add:-80}} height={{item2|add:-330}}>
                    {% endfor %}
                </div>
            </div>
        {% endfor %}
    </body>
    </html>
👤Noman Uddin

Leave a comment