Add close link

This commit is contained in:
Knah Tsaeb 2020-10-12 12:00:15 +02:00
parent a40d8a260b
commit 81d87d906c
3 changed files with 22 additions and 111 deletions

View file

@ -1,96 +0,0 @@
diff --git a/css/mediaboxBlack.css b/css/mediaboxBlack.css
index 9213688..752c704 100644
--- a/css/mediaboxBlack.css
+++ b/css/mediaboxBlack.css
@@ -38,9 +38,21 @@
-khtml-box-shadow: 0px 5px 20px rgba(0,0,0,0.50);
-moz-box-shadow: 0px 5px 20px rgba(0,0,0,0.50);
box-shadow: 0px 5px 20px rgba(0,0,0,0.50);
+ width: 100%;
+ height: 100%;
}
#mbCenter img{
+ width:auto;
+ height:auto;
+ max-width:100%;
+ max-height:95%;
border-radius: 4px;
+ image-orientation: from-image;
+ position: absolute;
+ margin: auto;
+ top: 0;
+ left: 0;
+ right: 0;
}
#mbCenter.mbLoading {
diff --git a/css/mediaboxWhite.css b/css/mediaboxWhite.css
index de9d439..832911e 100644
--- a/css/mediaboxWhite.css
+++ b/css/mediaboxWhite.css
@@ -38,10 +38,22 @@
-khtml-box-shadow: 0px 5px 20px rgba(0,0,0,0.50);
-moz-box-shadow: 0px 5px 20px rgba(0,0,0,0.50);
box-shadow: 0px 5px 20px rgba(0,0,0,0.50);
+ width: 100%;
+ height: 100%;
}
#mbCenter img{
+ width:auto;
+ height:auto;
+ max-width:100%;
+ max-height:95%;
border-radius: 4px;
+ image-orientation: from-image;
+ position: absolute;
+ margin: auto;
+ top: 0;
+ left: 0;
+ right: 0;
}
#mbCenter.mbLoading {
diff --git a/js/mediabox1.5.4.js b/js/mediabox1.5.4.js
index 821e599..e47a138 100644
--- a/js/mediabox1.5.4.js
+++ b/js/mediabox1.5.4.js
@@ -815,6 +815,16 @@ var Mediabox;
if (mediaType == "img"){
mediaWidth = preload.width;
mediaHeight = preload.height;
+
+ // Hack jn@hz6.de: make lightbox squared to make room for the image (that will be properly rotated by the browser [at least FF since v26])
+ if (mediaWidth > mediaHeight) {
+ mediaHeight = mediaWidth
+ }
+
+ if (mediaWidth < mediaHeight) {
+ mediaWidth = mediaHeight
+ }
+
if (options.imgBackground) {
media.setStyles({backgroundImage: "url("+URL+")", display: ""});
} else { // Thanks to Dusan Medlin for fixing large 16x9 image errors in a 4x3 browser
@@ -827,11 +837,14 @@ var Mediabox;
mediaHeight = preload.height = parseInt((mediaWidth/preload.width)*mediaHeight, 10);
preload.width = mediaWidth;
}
+
if (Browser.ie) preload = document.id(preload);
if (options.clickBlock) preload.addEvent('mousedown', function(e){ e.stop(); }).addEvent('contextmenu', function(e){ e.stop(); });
+
media.setStyles({backgroundImage: "none", display: ""});
preload.inject(media);
}
+
// mediaWidth += "px";
// mediaHeight += "px";
} else if (mediaType == "inline") {
@@ -973,4 +986,4 @@ Mediabox.scanPage = function() {
});
};
-window.addEvents({domready: Mediabox.scanPage, resize: Mediabox.recenter}); // to recenter the overlay while scrolling, add "scroll: Mediabox.recenter" to the object
\ No newline at end of file
+window.addEvents({domready: Mediabox.scanPage, resize: Mediabox.recenter}); // to recenter the overlay while scrolling, add "scroll: Mediabox.recenter" to the object

View file

@ -1,11 +0,0 @@
You access your MinigalNano exclusively with firefox >v26 (for example
on your home server)?
If you apply this patch, the images in the lightbox are properly rotated
by the browser itself using the information from the EXIF data.
To fit the images, I made the lightbox squared so there are white
stripes either on the sides or the top and the bottom.
Jan
(jn@hz6.de)

View file

@ -153,6 +153,18 @@
.fas { .fas {
font-size: 2.5em; font-size: 2.5em;
} }
.closeModal {
font-size: 2.5em;
font-weight: bolder;
text-align: right;
margin: 0;
padding: 0;
}
.closeModal a {
text-decoration: none;
}
</style> </style>
</head> </head>
@ -181,7 +193,8 @@
<% page_navigation %> <% page_navigation %>
</div> </div>
<div id="modal01" class="w3-modal w3-animate-zoom" onclick="this.style.display='none'"> <div id="modal01" class="w3-modal w3-animate-zoom">
<p class="closeModal"><a href="#" onclick="closeModal(); return false;">X</a></p>
<div class="modal-content"> <div class="modal-content">
<div id="modal-content-img"><img id="img01"></div> <div id="modal-content-img"><img id="img01"></div>
<div id="video01"></div> <div id="video01"></div>
@ -205,13 +218,18 @@
<script src="<% gallery_root %>js/lazy.js"></script> <script src="<% gallery_root %>js/lazy.js"></script>
<script src="<% gallery_root %>js/script.js"></script> <script src="<% gallery_root %>js/script.js"></script>
<script> <script>
function closeModal() {
document.getElementById("modal01").style.display = "none"
document.getElementById("video01").innerHTML = null;
}
function onClick(element) { function onClick(element) {
document.getElementById("img01").src = null; document.getElementById("img01").src = null;
document.getElementById("comment01").innerHTML = null; document.getElementById("comment01").innerHTML = null;
document.getElementById("video01").innerHTML = null; document.getElementById("video01").innerHTML = null;
document.getElementById("comment01").innerHTML = element.dataset.desc; document.getElementById("comment01").innerHTML = element.dataset.desc;
document.getElementById("thumburl").innerHTML = "Thumbnail : "+element.firstElementChild.currentSrc; document.getElementById("thumburl").innerHTML = "Thumbnail : " + element.firstElementChild.currentSrc;
document.getElementById("fullurl").innerHTML = "Full : "+element.href; document.getElementById("fullurl").innerHTML = "Full : " + element.href;
if (typeof element.dataset.video !== 'undefined') { if (typeof element.dataset.video !== 'undefined') {
document.getElementById("img01").style.display = "none"; document.getElementById("img01").style.display = "none";