{% extends 'imagehosting/base.html' %}

{% load static %}

{% block content%}
  <div class="images">
  {% for image in all %}<a href="{% url 'image_detail' pk=image.pk %}" ><img src= "/media/images{{image.thumb_name }}"></a>{% endfor %}
  </div>
  
  <script  src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script>
    $(function() {resizer(); })
    $(window).resize(function() { resizer(); })

    function resizer() {
      var imgs = $('img');
      var row_width = $(window).width() - 50;
      var prev = [];
      var total_w = 0;
      imgs.each(function (i, e) {
        $(this).height(200);
        prev[prev.length] = $(e);
        total_w += $(e).width();
        if (total_w > row_width) {
          prev = $(prev);
          prev.each(function (indx, element) {$(element).height(row_width*200/total_w)});
          prev = [];
          total_w = 0;
        }
      })
    }
  </script>
{% endblock content %}