minimal image viewer

This commit is contained in:
j 2017-12-12 13:42:27 +01:00
parent 81973ba496
commit 48b495caae
2 changed files with 49 additions and 7 deletions

View File

@ -90,8 +90,3 @@ body, h1, h2, h3, h4, h5, h6 {
.context ul, .links ul { .context ul, .links ul {
list-style: none; list-style: none;
} }
.images img {
max-width: 128px;
float: left;
}

View File

@ -87,8 +87,45 @@
{% endif %} {% endif %}
{% if content.images.exists %} {% if content.images.exists %}
<div class="images"> <style>
.images {
display: grid;
grid-template-columns: 128px 128px 128px 128px 128px 128px 128px 128px;
grid-gap: 10px;
}
.images > div {
width: 128px;
height: 128px;
padding: 8px;
display: table-cell;
text-align: center;
position: relative;
}
.images > div > img {
transition: width,height 2s;
max-width: 92%;
max-height: 92%;
position: absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
}
.images > div > img.active {
max-width: 92%;
max-height: 92%;
position: fixed;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
z-index: 1;
}
</style>
<b>Images:</b> <br> <b>Images:</b> <br>
<div class="images">
{% for res in content.images %} {% for res in content.images %}
<div> <div>
{% if res.is_image %} {% if res.is_image %}
@ -102,8 +139,18 @@
{% endif %} {% endif %}
</div> </div>
{% endfor %} {% endfor %}
<br clear="all">
</div> </div>
<script>
document.querySelectorAll('.images > div > img').forEach(function(img) {
img.addEventListener('click', function() {
if (this.classList.contains('active')) {
this.classList.remove('active');
} else {
this.classList.add('active');
}
});
});
</script>
{% endif %} {% endif %}
{% endif %} {% endif %}
</div> </div>