Show progress bar while loading image gallery on django template

Question

I want to display a progress bar (or download icon) when the image gallery loads according to the django template. There is a div in the template in the image gallery, and a progress bar should appear for this div. Please refer to http://www.openstudio.fr/jquery/ as I use this gallery

Answer 1

It is best to do this using JavaScript instead of trying to do something in Django. You will have Django populating your JavaScript, and then JavaScript will execute your progress bar. I am using jQuery UI for progressbar .

Django Template:

var portfolio = {
    image_count = {{ images|length }},
    images = [
        {% for image in images %}{
            'src': "{{ image.url }}",
            'title': "{{ image.title }}"
        }{% if not forloop.last %},{% endif %}{% endfor %}
    ]
};

JavaScript:

<script>
    // This helps us keep track of the progress:
    var count = 0;
    var updateProgress = function() {
        count++;
        // Calculate the % we are through the images.
        progress = parseInt((count / portfolio.image_count) * 100);
        // Update the progressbar.
        $("#progressbar").progressbar("value", progress);
        // Check if we're done.
        if (progress >= 100) {
            $("#progressbar").hide();
            // Fire up the multimedia portfolio, per the OP.
            $('#multimedia-portfolio').multimedia_portfolio({width: 800});
            $("#portfolio-cont").show();
        }
    }
    $(function() {
        // Initialize the progressbar at 0%.
        $("#progressbar").progressbar({value:0});
        // Hide the portfolio for now.
        $('#portfolio-cont').hide();
        if (portfolio) {
            // Loop over the images.
            for (var i=0; i<portfolio.image_count; i++) {
                var image = portfolio.images[i];
                // Create an image, a link, an li.
                // Once the image is loaded, will call updateProgress.
                var img = $('<img>').attr('src', image.src)
                    .attr('title', image.title)
                    .load(updateProgress);
                var a = $("<a>").attr("href", image.src)
                    .addClass("thickbox");
                $(a).append(img);
                var li = $("<li>").append(a);
                // Append the li to the ul.
                $('#multimedia-portfolio').append(li);
            }
        }
    });
</script>

This also assumes that you have this (-ish) HTML:

<div id="progressbar"></div>
<div id="portfolio-cont"><ul id="multimedia-portfolio"></ul></div>

I hope this helps you in at least a certain direction.