Compare commits

...

2 Commits

Author SHA1 Message Date
Knah Tsaeb 81d87d906c Add close link 2020-10-12 12:00:15 +02:00
Knah Tsaeb a40d8a260b Add link to thumb and full image 2020-10-09 11:48:53 +02:00
3 changed files with 26 additions and 110 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 {
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>
</head>
@ -170,7 +182,7 @@
<div class="w3-bar w3-center">
<% page_navigation %>
</div>
<main id="container" class="w3-container w3-black">
<div id="gallery" class="w3-row-padding w3-section w3-margin-top">
<% thumbnails %>
@ -181,11 +193,15 @@
<% page_navigation %>
</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 id="modal-content-img"><img id="img01"></div>
<div id="video01"></div>
<div id="comment01" class="w3-theme-d3 w3-shadow">
<div class="w3-theme-d3 w3-shadow">
<p id="comment01"></p>
<p id="thumburl"></p>
<p id="fullurl"></p>
</div>
</div>
</div>
@ -202,11 +218,18 @@
<script src="<% gallery_root %>js/lazy.js"></script>
<script src="<% gallery_root %>js/script.js"></script>
<script>
function closeModal() {
document.getElementById("modal01").style.display = "none"
document.getElementById("video01").innerHTML = null;
}
function onClick(element) {
document.getElementById("img01").src = null;
document.getElementById("comment01").innerHTML = null;
document.getElementById("video01").innerHTML = null;
document.getElementById("comment01").innerHTML = element.dataset.desc;
document.getElementById("thumburl").innerHTML = "Thumbnail : " + element.firstElementChild.currentSrc;
document.getElementById("fullurl").innerHTML = "Full : " + element.href;
if (typeof element.dataset.video !== 'undefined') {
document.getElementById("img01").style.display = "none";