Knah-Tsaeb/Minigalnano
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

adds lightbox image autorotation (FF >v26)

Browse source 
Firefox respects the CSS3 property "image-rotation". This makes the
lightbox squared and centeres the browser-rotated image therein.
This commit is contained in:
Jan Niggemann 2015-02-23 16:34:25 +01:00
parent 4b7ce9dbec
commit 3fc42c02b3
3 changed files with 30 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
css/mediaboxBlack.css
View file

@ -41,10 +41,17 @@
} }
#mbCenter img{ #mbCenter img{
border-radius: 4px; border-radius: 4px;
image-orientation: from-image;
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
} }
#mbCenter.mbLoading { #mbCenter.mbLoading {
background: #000 url(../images/loading-dark.gif) no-repeat center; background: #000 url(../images/loading2.gif) no-repeat center;
/* This style is applied only during animation. */ /* This style is applied only during animation. */
/* For example, the next lines turn off shadows */ /* For example, the next lines turn off shadows */
/* improving browser performance on slow systems. */ /* improving browser performance on slow systems. */

9
css/mediaboxWhite.css
View file

@ -42,10 +42,17 @@
#mbCenter img{ #mbCenter img{
border-radius: 4px; border-radius: 4px;
image-orientation: from-image;
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
} }
#mbCenter.mbLoading { #mbCenter.mbLoading {
background: #fff url(../images/loading-light.gif) no-repeat center; background: #fff url(../images/WhiteLoading.gif) no-repeat center;
/* This style is applied only during animation. */ /* This style is applied only during animation. */
/* For example, the next lines turn off shadows */ /* For example, the next lines turn off shadows */
/* improving browser performance on slow systems. */ /* improving browser performance on slow systems. */

16
js/mediabox1.5.4.js
View file

@ -815,6 +815,16 @@ var Mediabox;
if (mediaType == "img"){ if (mediaType == "img"){
mediaWidth = preload.width; mediaWidth = preload.width;
mediaHeight = preload.height; 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) { if (options.imgBackground) {
media.setStyles({backgroundImage: "url("+URL+")", display: ""}); media.setStyles({backgroundImage: "url("+URL+")", display: ""});
} else { // Thanks to Dusan Medlin for fixing large 16x9 image errors in a 4x3 browser } else { // Thanks to Dusan Medlin for fixing large 16x9 image errors in a 4x3 browser
@ -829,7 +839,9 @@ var Mediabox;
} }
if (Browser.ie) preload = document.id(preload); if (Browser.ie) preload = document.id(preload);
if (options.clickBlock) preload.addEvent('mousedown', function(e){ e.stop(); }).addEvent('contextmenu', function(e){ e.stop(); }); if (options.clickBlock) preload.addEvent('mousedown', function(e){ e.stop(); }).addEvent('contextmenu', function(e){ e.stop(); });
media.setStyles({backgroundImage: "none", display: ""});
// Hack jn@hz6.de: Make position relative to work together with centered image (which is absolutely placed)
media.setStyles({backgroundImage: "none", display: "", position: "relative"});
preload.inject(media); preload.inject(media);
} }
// mediaWidth += "px"; // mediaWidth += "px";
@ -973,4 +985,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 window.addEvents({domready: Mediabox.scanPage, resize: Mediabox.recenter}); // to recenter the overlay while scrolling, add "scroll: Mediabox.recenter" to the object