50 lines
1.6 KiB
HTML
50 lines
1.6 KiB
HTML
<img id="myImg{{item_hash}}" src="{{url_for('static',filename=file_jpg)}}" alt="" style="width:100%;max-width:200px;max-height:200px;object-fit: contain">
|
|
|
|
<style>
|
|
<style>
|
|
body {font-family: Arial, Helvetica, sans-serif;}
|
|
|
|
#myImg{{item_hash}} {
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
transition: 0.3s;
|
|
}
|
|
|
|
#myImg{{item_hash}}:hover {opacity: 0.7;}
|
|
</style>
|
|
|
|
<!-- The Modal -->
|
|
<div id="myModal{{item_hash}}" class="modal">
|
|
<span id="sp{{item_hash}}" class="close">×</span>
|
|
<a href="{{uri.replace("_.jpg",".mp4")}}" id="a{{item_hash}}"><video src="{{uri}}" loading="lazy" class="modal-content" id="img01{{item_hash}}" controls></a>
|
|
<div id="caption"></div>
|
|
</div>
|
|
|
|
<script>
|
|
// Get the modal
|
|
var modal{{item_hash}} = document.getElementById("myModal{{item_hash}}");
|
|
var a = document.getElementById("a{{item_hash}}");
|
|
|
|
// Get the image and insert it inside the modal - use its "alt" text as a caption
|
|
var img = document.getElementById("myImg{{item_hash}}");
|
|
var modalImg = document.getElementById("img01{{item_hash}}");
|
|
var captionText = document.getElementById("caption");
|
|
img.onclick = function(){
|
|
modal{{item_hash}}.style.display = "block";
|
|
modalImg.src = "{{uri}}";
|
|
a.href = this.src.replace(".jpg",".mp4")
|
|
a.target = "_blank"
|
|
captionText.innerHTML = this.alt;
|
|
}
|
|
|
|
// Get the <span> element that closes the modal
|
|
var span = document.getElementById("sp{{item_hash}}");
|
|
|
|
// When the user clicks on <span> (x), close the modal
|
|
modal{{item_hash}}.onclick = function() {
|
|
modal{{item_hash}}.style.display = "none";
|
|
}
|
|
span.onclick = function() {
|
|
modal{{item_hash}}.style.display = "none";
|
|
}
|
|
</script> |