65 lines
2.3 KiB
Twig
65 lines
2.3 KiB
Twig
|
|
{% 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 %}
|
|
|
|
|
|
|