{% block late_js %} {% if album.medias %} {% macro img_description(media) -%} {%- if media.big -%}<a href="{{ media.big_url }}">Full size</a>{%- endif -%} {# clean up tags and whitespace, including newlines, in the description #} {%- if media.description -%}<br>{{ media.description | striptags }}{%- endif -%} {%- if media.exif -%} {%- if media.exif.datetime -%} <abbr title="date">{{ media.exif.datetime }}</abbr> {%- endif -%} {% endif %} {%- endmacro %}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="/theme/folio/galleria.min.js"></script><script src="/theme/folio/galleria.folio.min.js"></script><script src="/theme/folio/galleria.history.min.js"></script><script>var data = [
      {% for media in album.medias -%}
      {
        "title": "{{ media.title }}",
        "description": "{{ img_description(media) | e }}",
        "thumb": "{{ media.thumbnail }}"{% if media.big %},
        "big": "{{ media.big_url }}"{% endif %}{% if media.type == "image" %},
        "image": "{{ media.url }}"{% endif %}{% if media.type == "video" %},
        "image": "/theme/folio/img/empty.png",
        "layer": "<video controls><source src='{{ media.url }}' type='{{ media.mime }}' /></video>"{% endif %}
      }{% if not loop.last %},{% endif %}
      {% endfor %}
    ];

    Galleria.ready(function() {
      
        this.lazyLoadChunks( 50 );

        this.attachKeyboard({
            right: this.next,
            left: this.prev,
            /* Toggle fullscreen display on press of 'f' key */
            0x46: this.toggleFullscreen,
        });

        var gallery = this;
        $('#fullscreen').click(function() {
          gallery.toggleFullscreen();
        });

        $('.icons').appendTo(this.$('container'));
    });

    Galleria.configure({
        imageCrop: false,
        transition: "fade",
        thumbnails: "lazy",
        showInfo: true,
        showCounter: true,
        showImagenav: true,
        showProgress: true,
        showTooltip: true,
        fullscreenTransition: true,
        _toggleInfo: true
    });
    Galleria.run("#gallery", {dataSource: data});</script>{% endif %} {% endblock %}