title: django variables to javascript
body: <p>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:</p>
  
  <pre><code>{% for post in object_list %}
      {% post.title %}
      {% post.url %}
  {% endfor %}
  </code></pre>
  
  <p>In my base template I just add my script:
  (base.html) </p>
  
  <pre><code>&lt;script src="{{STATIC_URL}}assets/js/script.js"&gt;&lt;/script&gt;
  
  (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 &gt;= 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 = $('&lt;div class="photo" /&gt;').appendTo(elem);
          var datetime = $('&lt;p&gt;test&lt;/p&gt;').appendTo(elem); // and add {{ post.date }} here
          var img = $('&lt;img&gt;');
          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);
  </code></pre>