128 lines
3.0 KiB
HTML
128 lines
3.0 KiB
HTML
<!-- Trigger the Modal -->
|
|
<img id="myImg{{hash_id}}" src="{{thumbnail}}" alt="{{fname}}" align="left" style="width:100%;max-width:200px;max-height:200px;object-fit:contain;border-radius: 5px;">
|
|
|
|
<!-- The Modal -->
|
|
<div id="myModal{{hash_id}}" class="modal">
|
|
|
|
<!-- The Close Button -->
|
|
<span class="close" id="span{{hash_id}}">×</span>
|
|
|
|
<!-- Modal Content (The Image) -->
|
|
<img class="modal-content" loading="lazy" id="img{{hash_id}}">
|
|
|
|
<!-- Modal Caption (Image Text) -->
|
|
<a href="{{original_link}}" id="a{{hash_id}}"><div id="caption{{hash_id}}"></div></a>
|
|
</div>
|
|
|
|
<style>
|
|
/* Style the Image Used to Trigger the Modal */
|
|
#myImg{{hash_id}} {
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
transition: 0.3s;
|
|
}
|
|
|
|
#myImg{{hash_id}}:hover {opacity: 0.7;}
|
|
|
|
/* The Modal (background) */
|
|
.modal {
|
|
display: none; /* Hidden by default */
|
|
position: fixed; /* Stay in place */
|
|
z-index: 1; /* Sit on top */
|
|
padding-top: 100px; /* Location of the box */
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%; /* Full width */
|
|
height: 100%; /* Full height */
|
|
overflow: auto; /* Enable scroll if needed */
|
|
background-color: rgb(0,0,0); /* Fallback color */
|
|
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
|
|
}
|
|
|
|
/* Modal Content (Image) */
|
|
.modal-content {
|
|
margin: auto;
|
|
display: block;
|
|
width: 80%;
|
|
max-width: 700px;
|
|
}
|
|
|
|
/* Caption of Modal Image (Image Text) - Same Width as the Image */
|
|
#caption{{hash_id}} {
|
|
margin: auto;
|
|
display: block;
|
|
width: 80%;
|
|
max-width: 700px;
|
|
text-align: center;
|
|
color: #ccc;
|
|
padding: 10px 0;
|
|
height: 150px;
|
|
}
|
|
|
|
/* Add Animation - Zoom in the Modal */
|
|
.modal-content, #caption {
|
|
animation-name: zoom;
|
|
animation-duration: 0.6s;
|
|
}
|
|
|
|
@keyframes zoom {
|
|
from {transform:scale(0)}
|
|
to {transform:scale(1)}
|
|
}
|
|
|
|
/* The Close Button */
|
|
.close {
|
|
position: absolute;
|
|
top: 15px;
|
|
right: 35px;
|
|
color: #f1f1f1;
|
|
font-size: 40px;
|
|
font-weight: bold;
|
|
transition: 0.3s;
|
|
}
|
|
|
|
.close:hover,
|
|
.close:focus {
|
|
color: #bbb;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* 100% Image Width on Smaller Screens */
|
|
@media only screen and (max-width: 700px){
|
|
.modal-content {
|
|
width: 100%;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
// Get the modal
|
|
var modal = document.getElementById("myModal{{hash_id}}");
|
|
|
|
// Get the image and insert it inside the modal - use its "alt" text as a caption
|
|
var img = document.getElementById("myImg{{hash_id}}");
|
|
var modalImg = document.getElementById("img{{hash_id}}");
|
|
var captionText = document.getElementById("caption{{hash_id}}");
|
|
var captionLink = document.getElementById("a{{hash_id}}");
|
|
img.onclick = function(){
|
|
modal.style.display = "block";
|
|
modalImg.src = "{{preview}}";
|
|
captionText.innerHTML = this.alt.replace("static/","",1);
|
|
captionLink.href = "/"+this.alt;
|
|
}
|
|
|
|
// Get the <span> element that closes the modal
|
|
// var span = document.getElementsByClassName("close")[0];
|
|
var span = document.getElementById("span{{hash_id}}");
|
|
|
|
// When the user clicks on <span> (x), close the modal
|
|
span.onclick = function() {
|
|
modal.style.display = "none";
|
|
}
|
|
|
|
modalImg.onclick = function() {
|
|
modal.style.display = "none";
|
|
}
|
|
|
|
</script> |