X-Git-Url: https://git.mdrn.pl/redakcja.git/blobdiff_plain/275dc6c6f5c92630c9a1fca0f1830ba543cd18b7..3d3c2fae86149ea2e5c7d7e4fb971fc84ce2c52a:/project/templates/explorer/panels/gallery.html?ds=inline diff --git a/project/templates/explorer/panels/gallery.html b/project/templates/explorer/panels/gallery.html index d35366e1..0d669726 100644 --- a/project/templates/explorer/panels/gallery.html +++ b/project/templates/explorer/panels/gallery.html @@ -1,33 +1,47 @@ -<div class="panel"> - <div class="images-wrap"> - <div class="images"> - <p>Aby zobaczyÄ obrazki wybierz folder poniżej:</p> - <p><select name="folders" class="id_folders"> - <option value="" selected="selected">-- Wybierz folder z obrazkami --</option> - <option value="andersen_basnie">andersen_basnie</option> - </select></p> - </div> - </div> +<div class="toolbar" style="height: 24px"> + {{ form.folders }} +</div> + +<div class="images-wrap" style="position: absolute; top: 24px; left:0px; right:0px; bottom: 0px;"> + <div class="images"><!-- To jest div na obrazki, które sÄ wstawiane później --></div> </div> <script type="text/javascript" charset="utf-8"> - (function() { - function resizeEditor(event, panel) { - var panel = panel || event.data.panel; - $('.images-wrap', panel).height($(panel).height()); - } - panel(function(event, panel) { - $('.id_folders', panel).change(function() { - $('.images', panel).load('{% url folder_image_ajax %}' + $('.id_folders', panel).val() + '/', function() { - $('.images-wrap', panel).data('lazyload:lastCheckedScrollTop', -10000); +panel_hooks = { + load: function() { + var contentDiv = this.contentDiv; + $('select[name=folders]', contentDiv).change(function() { + var select = this; + $('.images', contentDiv).fadeOut('slow', function() { + $(this).html('').load('{% url folder_image_ajax %}' + $(select).val() + '/', function() { + $('.images', contentDiv).fadeIn('slow'); + $('.images-wrap', contentDiv).data('lazyload:lastCheckedScrollTop', -10000); + $('.image-box').click(function() { + var src = $('img', $(this)).attr('src'); + var idx = src.lastIndexOf('/'); + var bigSrc = src.substring(0, idx) + '/big' + src.substring(idx, src.length); + var zoom = $('<div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: scroll">' + + '<img src="' + bigSrc + '" />' + + '</div>').click(function() { + $(this).remove(); + }) + zoom.appendTo(contentDiv); + }); }); - }); - $('.images-wrap', panel).lazyload('.image-box', {threshold: 640 * 10, scrollTreshold: 640 * 5}); - - $(window).bind('resize', {'panel': panel}, resizeEditor); - resizeEditor(null, panel); - }, function(event, panel) { - console.log('unloaded gallery panel', panel); + }) }); - })() + + $('.images-wrap', contentDiv).lazyload('.image-box', + {threshold: 640 * 10, scrollTreshold: 640 * 5} + ); + + this._endload(); + }, + refresh: function() { + return true; // gallery is always fresh + }, + dirty: function() { + return true; // and it doesn't get dirty + } +}; </script>