adds lightbox image autorotation (FF >v26)
Firefox respects the CSS3 property "image-rotation". This makes the lightbox squared and centeres the browser-rotated image therein.
This commit is contained in:
parent
4b7ce9dbec
commit
3fc42c02b3
3 changed files with 30 additions and 4 deletions
|
@ -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. */
|
||||||
|
|
|
@ -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. */
|
||||||
|
|
|
@ -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";
|
||||||
|
|
Loading…
Reference in a new issue