CODEWITHSUNDEEP
jquerypythonhtmldjangoslideshow
Noman Uddin
Noman Uddin

Reputation: 103

SlideShow of Images having Different time durations in django

Guys I need help in creating an image slide show:

I have two Django template variables . ("ImagesVar" and "ImagesDurationVar")

What I trying to do is I want that "ImagesVar[0]" is displayed for "ImagesDurationVar[0]" time in a slideshow and so on for next image.

MY HTML Code for Django Template is: =============================================================`

<html>
<head>
    <script>
        $(document).ready(function(){
            $('.slideshow ').cycle({
            fx:     'fade',
            speed:  'fast',
            timeoutFn: function () {
            return parseInt($(".slideshow img").attr('ImagesDurationVar')) ;
            }
            });
        });
    </script>
</head>
<body>
    {% for item1, item2 in variable_SR %}
        <div id="content1" style="background-color:#EEEEEE;">
            <div class="slideshow">
                {% for ImageVar,ImagesDurationVar in variables %}
                    <img  src={{STATIC_URL}}{{ImageVar}} width={{item1|add:-80}} height={{item2|add:-330}}>
                    <input type="hidden" id="ImagesDurationVar" name="variable" value="{{ ImagesDurationVar}}">
                {% endfor %}
            </div>
        </div>  
    {% endfor %}
</body>
</head>
</html>`

====================================================================

Guys I need help for for the Jquery function, its not working. If you have any help regarding this or any function that will solve this issue, or if above code can be corrected I shall be very thankful to you

Upvotes: 0

Views: 913

Answers (3)

Noman Uddin
Noman Uddin

Reputation: 103

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>

Upvotes: 0

Tyler Dovall
Tyler Dovall

Reputation: 140

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

Upvotes: 1

sidj9n
sidj9n

Reputation: 29

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

Upvotes: 0

Related Questions