project/templates/explorer/panels/gallery.html

   1 <div class="panel">
   2     <div class="images-wrap">
   3         <div class="images">
   4             <p>Aby zobaczyć obrazki wybierz folder poniżej:</p>
   5             <p><select name="folders" class="id_folders">
   6             <option value="" selected="selected">-- Wybierz folder z obrazkami --</option>
   7             <option value="andersen_basnie">andersen_basnie</option>
   8             </select></p>
   9         </div>
  10     </div>
  11 </div>
  12 <script type="text/javascript" charset="utf-8">
  13     (function() {
  14         function resizeEditor(event, panel) {
  15             var panel = panel || event.data.panel;
  16             $('.images-wrap', panel).height($(panel).height());
  17         }
  18
  19         panel(function(event, panel) {
  20             $('.id_folders', panel).change(function() {
  21                 $('.images', panel).load('{% url folder_image_ajax %}' + $('.id_folders', panel).val() + '/', function() {
  22                     $('.images-wrap', panel).data('lazyload:lastCheckedScrollTop', -10000);
  23                 });
  24             });
  25             $('.images-wrap', panel).lazyload('.image-box', {threshold: 640 * 10, scrollTreshold: 640 * 5});
  26
  27             $(window).bind('resize', {'panel': panel}, resizeEditor);
  28             resizeEditor(null, panel);
  29         }, function(event, panel) {
  30             console.log('unloaded gallery panel', panel);
  31         });
  32     })()
  33 </script>