vitalif-js
/
slimbox
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Remove image jitter during window resize

master
vitalif 2015-04-30 10:20:36 +00:00
parent a9f6830f39
commit 8fa7365699
3 changed files with 17 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
slimbox2-rtl.css
View File

@ -1,4 +1,4 @@
/* SLIMBOX version 2015-04-19 */
/* SLIMBOX version 2015-04-30 */
#lbOverlay {
position: fixed;
@ -43,6 +43,8 @@
#lbWindow {
position: relative;
border: 10px solid white;
height: 0px;
width: 0px;
overflow: hidden;
}

4
slimbox2.css
View File

@ -1,4 +1,4 @@
/* SLIMBOX version 2015-04-19 */
/* SLIMBOX version 2015-04-30 */
#lbOverlay {
position: fixed;
@ -43,6 +43,8 @@
#lbWindow {
position: relative;
border: 10px solid white;
height: 0px;
width: 0px;
overflow: hidden;
}

21
slimbox2.js
View File

@ -3,7 +3,7 @@
Based on and mostly compatible with Slimbox2 <http://www.digitalia.be/software/slimbox2>
(c) 2012+ Vitaliy Filippov <http://yourcmc.ru/wiki>
MIT-style license.
Version 2015-04-19
Version 2015-04-30
*/
window.addListener = (function() {
@ -87,15 +87,13 @@ addListener(window, 'load', function() {
var D1 = options.overlayFadeDuration+'ms ease';
var D2 = options.imageFadeDuration+'ms ease';
var t1 = 'transition: opacity '+D1+';';
var t2 = 'transition: opacity '+D2+';';
var t3 = 'transition: all '+D2+';';
var t4 = 'transition: width '+D2+', height '+D2+';';
css.type = 'text/css';
css.innerHTML =
'#lbOverlay { opacity: 0; '+t1+' -moz-'+t1+' -o-'+t1+' -webkit-'+t1+' }\n\
#lbOverlay.lbvisible { opacity: '+options.overlayOpacity+'; '+t1+' -moz-'+t1+' -o-'+t1+' -webkit-'+t1+' }\n\
#lbImage { opacity: 0; '+t4+' -moz-'+t4+' -o-'+t4+' -webkit-'+t4+' }\n\
#lbImage.lbvisible { opacity: 1; '+t2+' -moz-'+t2+' -o-'+t2+' -webkit-'+t2+' }\n\
#lbImage { opacity: 0; }\n\
#lbImage.lbvisible { opacity: 1; '+t1+' -moz-'+t1+' -o-'+t1+' -webkit-'+t1+' }\n\
#lbWindow, #lbCenter { '+t3+' -moz-'+t3+' -o-'+t3+' -webkit-'+t3+' }';
document.head.appendChild(css);
@ -124,9 +122,12 @@ addListener(window, 'load', function() {
marginLeft: (-centerWidth/2)+'px',
display: ''
});
// Animate padding instead of width so all edges move synchronously
apply(els.window.style, {
width: centerWidth+'px',
height: centerHeight+'px',
paddingLeft: (centerWidth/2)+'px',
paddingRight: (centerWidth/2)+'px',
paddingTop: (centerHeight/2)+'px',
paddingBottom: (centerHeight/2)+'px'
});
var cs = curStyle(els.overlay);
noFixed = ie6 || cs && cs.position != "fixed";
@ -250,13 +251,13 @@ addListener(window, 'load', function() {
centerWidth = preload.width;
centerHeight = preload.height;
var top = Math.max(0, middle - (centerHeight / 2));
if (els.window.offsetHeight != centerHeight) {
els.window.style.height = centerHeight+'px';
var top = Math.max(0, middle - (centerHeight / 2));
els.window.style.paddingTop = els.window.style.paddingBottom = (centerHeight/2)+'px';
els.center.style.top = top+'px';
}
if (els.window.offsetWidth != centerWidth) {
els.window.style.width = centerWidth+'px';
els.window.style.paddingLeft = els.window.style.paddingRight = (centerWidth/2)+'px';
els.center.style.marginLeft = (-centerWidth/2)+'px';
}
els.image.className = '';