Add box animations, make position fixed, simplify layout
vitalif
parent
0e6c2b913a
commit
a9f6830f39
|
|
@ -1,4 +1,4 @@
|
|||
/* SLIMBOX */
|
||||
/* SLIMBOX version 2015-04-19 */
|
||||
|
||||
#lbOverlay {
|
||||
position: fixed;
|
||||
|
|
@ -11,23 +11,39 @@
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
#lbCenter, #lbBottomContainer {
|
||||
position: absolute;
|
||||
#lbCenter {
|
||||
position: fixed;
|
||||
z-index: 9999;
|
||||
overflow: hidden;
|
||||
background-color: #fff;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
.lbLoading {
|
||||
#lbCenter.lbLoading {
|
||||
background: #fff url(loading.gif) no-repeat center;
|
||||
}
|
||||
|
||||
#lbCenter.lbLoading, #lbCenter.lbLoading #lbWindow {
|
||||
transition: none;
|
||||
-moz-transition: none;
|
||||
-o-transition: all 0s ease;
|
||||
-webkit-transition: none;
|
||||
}
|
||||
|
||||
#lbImage {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
border: 10px solid #fff;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
#lbWindow {
|
||||
position: relative;
|
||||
border: 10px solid white;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#lbPrevLink, #lbNextLink {
|
||||
|
|
@ -43,15 +59,15 @@
|
|||
}
|
||||
|
||||
#lbPrevLink:hover {
|
||||
background: transparent url(prevlabel.gif) no-repeat 100% 15%;
|
||||
background: transparent url(prev.png) no-repeat 0 15%;
|
||||
}
|
||||
|
||||
#lbNextLink {
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
#lbNextLink:hover {
|
||||
background: transparent url(nextlabel.gif) no-repeat 0 15%;
|
||||
background: transparent url(next.png) no-repeat 100% 15%;
|
||||
}
|
||||
|
||||
#lbBottom {
|
||||
|
|
@ -62,15 +78,14 @@
|
|||
text-align: right;
|
||||
border: 10px solid #fff;
|
||||
border-top-style: none;
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
#lbCloseLink {
|
||||
display: block;
|
||||
float: left;
|
||||
width: 66px;
|
||||
width: 79px;
|
||||
height: 22px;
|
||||
background: transparent url(closelabel.gif) no-repeat center;
|
||||
background: transparent url(close.png) no-repeat center;
|
||||
margin: 5px 0;
|
||||
outline: none;
|
||||
}
|
||||
|
|
|
|||
34
slimbox2.css
34
slimbox2.css
|
|
@ -1,4 +1,4 @@
|
|||
/* SLIMBOX */
|
||||
/* SLIMBOX version 2015-04-19 */
|
||||
|
||||
#lbOverlay {
|
||||
position: fixed;
|
||||
|
|
@ -11,23 +11,39 @@
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
#lbCenter, #lbBottomContainer {
|
||||
position: absolute;
|
||||
#lbCenter {
|
||||
position: fixed;
|
||||
z-index: 9999;
|
||||
overflow: hidden;
|
||||
background-color: #fff;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
.lbLoading {
|
||||
#lbCenter.lbLoading {
|
||||
background: #fff url(loading.gif) no-repeat center;
|
||||
}
|
||||
|
||||
#lbCenter.lbLoading, #lbCenter.lbLoading #lbWindow {
|
||||
transition: none;
|
||||
-moz-transition: none;
|
||||
-o-transition: all 0s ease;
|
||||
-webkit-transition: none;
|
||||
}
|
||||
|
||||
#lbImage {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
border: 10px solid #fff;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
#lbWindow {
|
||||
position: relative;
|
||||
border: 10px solid white;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#lbPrevLink, #lbNextLink {
|
||||
|
|
@ -67,9 +83,9 @@
|
|||
#lbCloseLink {
|
||||
display: block;
|
||||
float: right;
|
||||
width: 66px;
|
||||
width: 79px;
|
||||
height: 22px;
|
||||
background: transparent url(closelabel.gif) no-repeat center;
|
||||
background: transparent url(close.png) no-repeat center;
|
||||
margin: 5px 0;
|
||||
outline: none;
|
||||
}
|
||||
|
|
|
|||
71
slimbox2.js
71
slimbox2.js
|
|
@ -1,8 +1,9 @@
|
|||
/*
|
||||
Standalone (no jQuery) lightweight Lightbox implementation with minimal CSS3 animations
|
||||
Based on and compatible with Slimbox2 <http://www.digitalia.be/software/slimbox2>
|
||||
(c) 2012 Vitaliy Filippov <http://yourcmc.ru/wiki>
|
||||
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
|
||||
*/
|
||||
|
||||
window.addListener = (function() {
|
||||
|
|
@ -31,15 +32,15 @@ addListener(window, 'load', function() {
|
|||
var d = document.createElement('div');
|
||||
d.innerHTML = '<div id="lbOverlay" style="display: none"></div>'+
|
||||
'<div id="lbCenter" style="display:none">'+
|
||||
'<div id="lbImage"><div id="lbSizer" style="position: relative;">'+
|
||||
'<a id="lbPrevLink" href="#"></a><a id="lbNextLink" href="#"></a></div></div>'+
|
||||
'</div><div id="lbBottomContainer" style="display:none"><div id="lbBottom">'+
|
||||
'<div id="lbWindow"><div id="lbImage"><div id="lbSizer" style="position: relative;">'+
|
||||
'<a id="lbPrevLink" href="#"></a><a id="lbNextLink" href="#"></a></div></div></div>'+
|
||||
'<div><div id="lbBottom">'+
|
||||
'<a id="lbCloseLink" href="#"></a><div id="lbCaption"></div><div id="lbNumber"></div><div style="clear: both;" />'+
|
||||
'</div></div>';
|
||||
'</div></div></div>';
|
||||
while (d.childNodes.length) {
|
||||
document.body.appendChild(d.childNodes[0]);
|
||||
}
|
||||
var l = 'overlay center image sizer prevLink nextLink bottomContainer bottom closeLink caption number'.split(' ');
|
||||
var l = 'overlay center window image sizer prevLink nextLink bottom closeLink caption number'.split(' ');
|
||||
for (var i = 0; i < l.length; i++) {
|
||||
els[l[i]] = document.getElementById('lb'+l[i].substr(0, 1).toUpperCase()+l[i].substr(1));
|
||||
}
|
||||
|
|
@ -83,14 +84,19 @@ addListener(window, 'load', function() {
|
|||
apply(options, _options);
|
||||
}
|
||||
css = document.createElement('style');
|
||||
var t1 = 'transition: opacity '+options.overlayFadeDuration+'ms ease;';
|
||||
var t2 = 'transition: opacity '+options.imageFadeDuration+'ms ease;';
|
||||
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; }\n\
|
||||
#lbImage.lbvisible { opacity: 1; '+t2+' -moz-'+t2+' -o-'+t2+' -webkit-'+t2+' }';
|
||||
#lbImage { opacity: 0; '+t4+' -moz-'+t4+' -o-'+t4+' -webkit-'+t4+' }\n\
|
||||
#lbImage.lbvisible { opacity: 1; '+t2+' -moz-'+t2+' -o-'+t2+' -webkit-'+t2+' }\n\
|
||||
#lbWindow, #lbCenter { '+t3+' -moz-'+t3+' -o-'+t3+' -webkit-'+t3+' }';
|
||||
document.head.appendChild(css);
|
||||
|
||||
keyActions = {};
|
||||
|
|
@ -110,17 +116,18 @@ addListener(window, 'load', function() {
|
|||
startImage = 0;
|
||||
}
|
||||
|
||||
middle = (document.documentElement.scrollTop || document.body.scrollTop) +
|
||||
((window.innerHeight || document.documentElement.offsetHeight) / 2);
|
||||
middle = ((window.innerHeight || document.documentElement.offsetHeight) / 2);
|
||||
centerWidth = options.initialWidth;
|
||||
centerHeight = options.initialHeight;
|
||||
apply(els.center.style, {
|
||||
top: Math.max(0, middle - (centerHeight / 2))+'px',
|
||||
width: centerWidth+'px',
|
||||
height: centerHeight+'px',
|
||||
marginLeft: (-centerWidth/2)+'px',
|
||||
display: ''
|
||||
});
|
||||
apply(els.window.style, {
|
||||
width: centerWidth+'px',
|
||||
height: centerHeight+'px',
|
||||
});
|
||||
var cs = curStyle(els.overlay);
|
||||
noFixed = ie6 || cs && cs.position != "fixed";
|
||||
if (noFixed) els.overlay.style.position = "absolute";
|
||||
|
|
@ -128,7 +135,7 @@ addListener(window, 'load', function() {
|
|||
els.overlay.style.display = '';
|
||||
setTimeout(function() {
|
||||
els.overlay.className = 'lbvisible';
|
||||
}, 10);
|
||||
}, 15);
|
||||
|
||||
position();
|
||||
setup(1);
|
||||
|
|
@ -160,7 +167,6 @@ addListener(window, 'load', function() {
|
|||
|
||||
function position() {
|
||||
var l = document.documentElement.scrollLeft, w = document.documentElement.offsetWidth;
|
||||
els.center.style.left = els.bottomContainer.style.left = (l + (w / 2))+'px';
|
||||
if (noFixed) {
|
||||
apply(els.overlay.style, {
|
||||
left: l+'px',
|
||||
|
|
@ -230,8 +236,10 @@ addListener(window, 'load', function() {
|
|||
els.center.className = "";
|
||||
els.image.style.backgroundImage = "url(" + activeURL + ")";
|
||||
els.image.style.display = '';
|
||||
els.sizer.style.width = preload.width+'px';
|
||||
els.sizer.style.height = preload.height+'px';
|
||||
els.image.style.marginLeft = (-preload.width/2)+'px';
|
||||
els.image.style.marginTop = (-preload.height/2)+'px';
|
||||
els.image.style.width = preload.width+'px';
|
||||
els.image.style.height = preload.height+'px';
|
||||
els.prevLink.style.height = preload.height+'px';
|
||||
els.nextLink.style.height = preload.height+'px';
|
||||
els.caption.innerHTML = images[activeImage]['title'] || "";
|
||||
|
|
@ -240,29 +248,21 @@ addListener(window, 'load', function() {
|
|||
if (prevImage >= 0) preloadPrev.src = images[prevImage]['url'];
|
||||
if (nextImage >= 0) preloadNext.src = images[nextImage]['url'];
|
||||
|
||||
centerWidth = els.image.offsetWidth;
|
||||
centerHeight = els.image.offsetHeight;
|
||||
centerWidth = preload.width;
|
||||
centerHeight = preload.height;
|
||||
var top = Math.max(0, middle - (centerHeight / 2));
|
||||
if (els.center.offsetHeight != centerHeight) {
|
||||
els.center.style.height = centerHeight+'px';
|
||||
if (els.window.offsetHeight != centerHeight) {
|
||||
els.window.style.height = centerHeight+'px';
|
||||
els.center.style.top = top+'px';
|
||||
}
|
||||
if (els.center.offsetWidth != centerWidth) {
|
||||
els.center.style.width = centerWidth+'px';
|
||||
if (els.window.offsetWidth != centerWidth) {
|
||||
els.window.style.width = centerWidth+'px';
|
||||
els.center.style.marginLeft = (-centerWidth/2)+'px';
|
||||
}
|
||||
apply(els.bottomContainer.style, {
|
||||
width: centerWidth+'px',
|
||||
top: (top+centerHeight)+'px',
|
||||
marginLeft: (-centerWidth/2)+'px',
|
||||
visibility: 'hidden',
|
||||
display: ''
|
||||
});
|
||||
els.image.className = '';
|
||||
setTimeout(showImg, 10);
|
||||
setTimeout(showImg, 15);
|
||||
if (prevImage >= 0) els.prevLink.style.display = '';
|
||||
if (nextImage >= 0) els.nextLink.style.display = '';
|
||||
els.bottomContainer.style.visibility = "";
|
||||
}
|
||||
|
||||
function showImg() {
|
||||
|
|
@ -274,8 +274,6 @@ addListener(window, 'load', function() {
|
|||
preload.src = preloadPrev.src = preloadNext.src = activeURL;
|
||||
els.prevLink.style.display = 'none';
|
||||
els.nextLink.style.display = 'none';
|
||||
els.image.style.display = 'none';
|
||||
els.bottomContainer.style.display = 'none';
|
||||
setup(0);
|
||||
}
|
||||
|
||||
|
|
@ -284,6 +282,7 @@ addListener(window, 'load', function() {
|
|||
stop();
|
||||
activeImage = prevImage = nextImage = -1;
|
||||
els.center.style.display = 'none';
|
||||
els.image.style.width = els.image.style.height = '1px';
|
||||
els.overlay.className = '';
|
||||
setTimeout(function() {
|
||||
els.overlay.style.display = 'none';
|
||||
|
|
|
|||
Loading…
Reference in New Issue