nineskeletor/templates/Childheader/image.html.twig

65 lines
2.3 KiB
Twig
Raw Normal View History

2023-02-16 17:03:53 +01:00
{% extends 'base.html.twig' %}
{% block body %}
{% set url="/"~appAlias~"/uploads/childheader/"~childheader.child.id~"/"~childheader.filename|replace({"thumb_":""}) %}
<img id="image" class="d-block m-auto" src="{{url}}" style="max-width:100%; max-height:700px;">
<div id="navigation" style="float:left;position:absolute;top:0px;width:100%" class="d-flex align-items-stretch">
{%if imageprev %}
<a id="linkprev" href="{{ path("app_childheader_view",{id:imageprev.id}) }}" class="align-middle d-flex align-items-center justify-content-center" style="width:50%">
{% endif %}
<div class="text-left align-items-center justify-content-center" style="width:100%">
{%if imageprev %}
<div><i class="btn-link fas fa-arrow-left fa-2x"></i> </div>
{% endif %}
</div>
{%if imageprev %}
</a>
{% endif %}
{%if imagenext %}
<a id="linknext" href="{{ path("app_childheader_view",{id:imagenext.id}) }}" class="align-middle d-flex align-items-center justify-content-center" style="width:50%">
{% endif %}
<div class="text-right align-items-center justify-content-center" style="width:100%">
{%if imagenext %}
<div><i class="btn-link fas fa-arrow-right fa-2x"></i> </div>
{%endif%}
</div>
{%if imagenext %}
</a>
{% endif %}
</div>
{% endblock %}
{% block localscript %}
<script>
$(document).ready(function() {
$('body').imagesLoaded(function() {
width=$('#mycontent').width();
$('#navigation').width(width);
height=$('#image').height();
$('#navigation').height(height);
$('body').focus();
});
$(document).keydown(function(event) {
var key = (event.keyCode ? event.keyCode : event.which);
if(key == 37) { // left
var href = $('#linkprev').attr('href');
if(href!=null) window.location.href = href;
}
else if(key == 39) {
var href = $('#linknext').attr('href');
if(href!=null) window.location.href = href;
}
});
});
</script>
{% endblock %}