I'm trying to make a gallery page using django/js/jquery.
Is it possible to pass django template variables to the javascript?
I need to implement for loop like:

{% for post in object_list %}

    {% post.title %}

    {% post.url %}

{% endfor %}

In my base template I just add my script:
(base.html)

<script src={{STATIC_URL}}assets/js/script.js></script>



(function($){

    var photos = [

        'media/photos/1.jpg',

        'media/photos/2.jpg', // I need to get them through a for loop

        'media/photos/3.jpg',

        'media/photos/4.jpg',

    ];

    $(document).ready(function(){

        var page = 0,

            loaded = 0,

            perpage = 5,

            main = $('#main'),

            expected = perpage,

            loadMore = $('#loadMore');

        main.on('image-loaded', function(){

            loaded++;

            NProgress.set(loaded/expected);



            if(page*perpage >= photos.length){

                loadMore.remove();

            }

        });

        loadMore.click(function(e){

            e.preventDefault();

            loaded = 0;

            expected = 0;

            var deferred = $.Deferred().resolve();

            $.each(photos.slice(page*perpage, page*perpage + perpage), function(){

                deferred = main.showImage(this, deferred);

                expected++;

            });

            NProgress.start();

            page++;

        });

        loadMore.click();

    });

    $.fn.showImage = function(src, deferred){

        var elem = $(this);

        console.log(elem);

        var result = $.Deferred();

        var holder = $('<div class=photo />').appendTo(elem);

        var datetime = $('<p>test</p>').appendTo(elem); // and add {{ post.date }} here

        var img = $('<img>');

        img.load(function(){

            deferred.always(function(){

                elem.trigger('image-loaded');

                img.hide().appendTo(holder).delay(100).fadeIn('fast', function(){



                    result.resolve()

                });

            });

        });



        img.attr('src', src);

        return result;

    }

})(jQuery);