-<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>
-<script type="text/javascript" charset="utf-8">
- (function() {
- function resizeEditor(event, panel) {
- var panel = panel || event.data.panel;
- $('.images-wrap', panel).height($(panel).height());
- }
+<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">
- 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) {
+ })
});
- })()
+
+ $('.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>