Dodanie stylów CSS dla HTML.
[redakcja.git] / project / templates / explorer / panels / gallery.html
1 <div class="toolbar" style="height: 24px">
2     {{ form.folders }}
3 </div>
4
5 <div class="images-wrap" style="position: absolute; top: 24px; left:0px; right:0px; bottom: 0px;">
6     <div class="images"><!-- To jest div na obrazki, które są wstawiane później --></div>
7 </div>
8 <script type="text/javascript" charset="utf-8">
9
10 panel_hooks = {
11     load: function() {
12         var contentDiv = this.contentDiv;
13         $('select[name=folders]', contentDiv).change(function() {
14             var select = this;
15             $('.images', contentDiv).fadeOut('slow', function() { 
16                 $(this).html('').load('{% url folder_image_ajax %}' + $(select).val() + '/',  function() {
17                     $('.images', contentDiv).fadeIn('slow');
18                     $('.images-wrap', contentDiv).data('lazyload:lastCheckedScrollTop', -10000);
19                     $('.image-box').click(function() {
20                         var src = $('img', $(this)).attr('src');
21                         var idx = src.lastIndexOf('/');
22                         var bigSrc = src.substring(0, idx) + '/big' + src.substring(idx, src.length);
23                         var zoom = $('<div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: scroll">'
24                             + '<img src="' + bigSrc + '" />'
25                             + '</div>').click(function() {
26                                 $(this).remove();
27                             })
28                         zoom.appendTo(contentDiv);
29                     });
30                 });
31             })
32         });
33         
34         $('.images-wrap', contentDiv).lazyload('.image-box', 
35             {threshold: 640 * 10, scrollTreshold: 640 * 5}
36         );
37         
38         this._endload();
39     },
40     refresh: function() {
41         return true; // gallery is always fresh
42     },
43     dirty: function() {
44         return true; // and it doesn't get dirty 
45     }
46 };
47 </script>