Display progress bar while an image gallery is loading on django template.

Question

I want to display a progress bar (or loading icon) while a image gallery is loading on django template. Image gallery is having a div in the template and for that div only the progress bar should appear. Please refer to http://www.openstudio.fr/jquery/ as I am using this gallery

Answer 1

Your best bet is probably to do this through JavaScript instead of trying to do much of anything in Django. You would have Django populate your JavaScript, and then have the JavaScript do your progress bar. I'll use jQuery UI for the 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 is also assuming that you have this(-ish) HTML:

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

Hope that helps you at least get some direction.