Standalone (NO JQUERY) Slimbox2 clone

master
vitalif 2013-03-08 23:22:58 +00:00
parent ceef061e49
commit 7f3466995d
10 changed files with 477 additions and 0 deletions

22
autoload.js Normal file
View File

@ -0,0 +1,22 @@
// AUTOLOAD CODE BLOCK (MAY BE CHANGED OR REMOVED)
addListener(window, 'load', function(){
if (!/android|iphone|ipod|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent)) {
var as = document.getElementsByTagName('A');
var links = [];
var w = 100*Math.floor((document.documentElement.offsetWidth*0.8)/100);
var h = 100*Math.floor((document.documentElement.offsetHeight*0.8)/100);
var t;
for (var i = 0; i < as.length; i++) {
if (as[i].getAttribute('rel') == 'lightbox') {
t = as[i].title;
t += ' <a href="'+as[i].href+'" target="_blank">'+(t?'(с':'С')+'м. полный размер'+(t?')':'')+'</a>';
links.push({
element: as[i],
url: as[i].href + (as[i].href.indexOf('?') ? '&' : '?') + ('w='+w+'&h='+h),
title: t
});
}
}
setSlimbox(links);
}
});

BIN
closelabel.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 971 B

BIN
loading.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
next.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
nextlabel.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 354 B

BIN
prev.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
prevlabel.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 371 B

84
slimbox2-rtl.css Normal file
View File

@ -0,0 +1,84 @@
/* SLIMBOX */
#lbOverlay {
position: fixed;
z-index: 9999;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #000;
cursor: pointer;
}
#lbCenter, #lbBottomContainer {
position: absolute;
z-index: 9999;
overflow: hidden;
background-color: #fff;
}
.lbLoading {
background: #fff url(loading.gif) no-repeat center;
}
#lbImage {
position: absolute;
left: 0;
top: 0;
border: 10px solid #fff;
background-repeat: no-repeat;
}
#lbPrevLink, #lbNextLink {
display: block;
position: absolute;
top: 0;
width: 50%;
outline: none;
}
#lbPrevLink {
right: 0;
}
#lbPrevLink:hover {
background: transparent url(prevlabel.gif) no-repeat 100% 15%;
}
#lbNextLink {
left: 0;
}
#lbNextLink:hover {
background: transparent url(nextlabel.gif) no-repeat 0 15%;
}
#lbBottom {
font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
font-size: 10px;
color: #666;
line-height: 1.4em;
text-align: right;
border: 10px solid #fff;
border-top-style: none;
direction: rtl;
}
#lbCloseLink {
display: block;
float: left;
width: 66px;
height: 22px;
background: transparent url(closelabel.gif) no-repeat center;
margin: 5px 0;
outline: none;
}
#lbCaption, #lbNumber {
margin-left: 71px;
}
#lbCaption {
font-weight: bold;
}

83
slimbox2.css Normal file
View File

@ -0,0 +1,83 @@
/* SLIMBOX */
#lbOverlay {
position: fixed;
z-index: 9999;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #000;
cursor: pointer;
}
#lbCenter, #lbBottomContainer {
position: absolute;
z-index: 9999;
overflow: hidden;
background-color: #fff;
}
.lbLoading {
background: #fff url(loading.gif) no-repeat center;
}
#lbImage {
position: absolute;
left: 0;
top: 0;
border: 10px solid #fff;
background-repeat: no-repeat;
}
#lbPrevLink, #lbNextLink {
display: block;
position: absolute;
top: 0;
width: 50%;
outline: none;
}
#lbPrevLink {
left: 0;
}
#lbPrevLink:hover {
background: transparent url(prev.png) no-repeat 0 15%;
}
#lbNextLink {
right: 0;
}
#lbNextLink:hover {
background: transparent url(next.png) no-repeat 100% 15%;
}
#lbBottom {
font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
font-size: 10px;
color: #666;
line-height: 1.4em;
text-align: left;
border: 10px solid #fff;
border-top-style: none;
}
#lbCloseLink {
display: block;
float: right;
width: 66px;
height: 22px;
background: transparent url(closelabel.gif) no-repeat center;
margin: 5px 0;
outline: none;
}
#lbCaption, #lbNumber {
margin-right: 71px;
}
#lbCaption {
font-weight: bold;
}

288
slimbox2.js Normal file
View File

@ -0,0 +1,288 @@
/*
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>
MIT-style license.
*/
window.addListener = (function() {
return window.addEventListener
? function(el, type, fn) { el.addEventListener(type, fn, false); }
: function(el, type, fn) { el.attachEvent('on'+type, fn); };
})();
window.removeListener = (function() {
return window.removeEventListener
? function(el, type, fn) { el.removeEventListener(type, fn, false); }
: function(el, type, fn) { el.detachEvent('on'+type, fn); };
})();
addListener(window, 'load', function() {
// Global variables, accessible to Slimbox only
var options, images, activeImage = -1, activeURL, prevImage, nextImage, compatibleOverlay, middle, centerWidth, centerHeight,
ie6 = !window.XMLHttpRequest, hiddenElements = [], els = {}, css, keyActions,
// Preload images
preload = {}, preloadPrev = new Image(), preloadNext = new Image();
// Initialization
// Append the Slimbox HTML code at the bottom of the document
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">'+
'<a id="lbCloseLink" href="#"></a><div id="lbCaption"></div><div id="lbNumber"></div><div style="clear: both;" />'+
'</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(' ');
for (var i = 0; i < l.length; i++) {
els[l[i]] = document.getElementById('lb'+l[i].substr(0, 1).toUpperCase()+l[i].substr(1));
}
els.prevLink.onclick = previous;
els.nextLink.onclick = next;
els.closeLink.onclick = close;
// Utils
function apply(a, b) {
for (var i in b) {
a[i] = b[i];
}
}
function foreach(a, f) {
for (var i in a) {
f(i, a[i]);
}
}
// API
// Open Slimbox with the specified parameters
window.slimbox = function(_images, startImage, _options) {
options = {
loop: false, // Allows to navigate between first and last images
overlayOpacity: 0.8, // 1 is opaque, 0 is completely transparent (change the color in the CSS file)
overlayFadeDuration: 400, // Duration of the overlay fade-in and fade-out animations (in milliseconds)
initialWidth: 250, // Initial width of the box (in pixels)
initialHeight: 250, // Initial height of the box (in pixels)
imageFadeDuration: 400, // Duration of the image fade-in animation (in milliseconds)
counterText: "Image {x} of {y}", // Translate or change as you wish, or set it to false to disable counter text for image groups
closeKeys: [27, 88, 67], // Array of keycodes to close Slimbox, default: Esc (27), 'x' (88), 'c' (67)
previousKeys: [37, 80], // Array of keycodes to navigate to the previous image, default: Left arrow (37), 'p' (80)
nextKeys: [39, 78] // Array of keycodes to navigate to the next image, default: Right arrow (39), 'n' (78)
};
if (_options) {
apply(options, _options);
}
css = document.createElement('style');
var t1 = 'transition: opacity '+options.overlayFadeDuration+'ms ease;';
var t2 = 'transition: opacity '+options.imageFadeDuration+'ms ease;';
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+' }';
document.head.appendChild(css);
keyActions = {};
for (var i in options.closeKeys) {
keyActions[options.closeKeys[i]] = close;
}
for (var i in options.previousKeys) {
keyActions[options.previousKeys[i]] = previous;
}
for (var i in options.nextKeys) {
keyActions[options.nextKeys[i]] = next;
}
// The function is called for a single image, with URL and Title as first two arguments
if (typeof _images == "string") {
_images = [ { url: _images, title: startImage } ];
startImage = 0;
}
middle = document.documentElement.scrollTop + ((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: ''
});
compatibleOverlay = ie6 || (els.overlay.style && (els.overlay.style.position != "fixed"));
if (compatibleOverlay) els.overlay.style.position = "absolute";
els.overlay.style.display = '';
setTimeout(function() {
els.overlay.className = 'lbvisible';
}, 10);
position();
setup(1);
images = _images;
options.loop = options.loop && (images.length > 1);
return changeImage(startImage);
};
// images = [ { element: clickOnWhatElement, url: imgUrl, title: titleHTML } ];
window.setSlimbox = function(images, options) {
foreach (images, function(i, img) {
if (img.element.nodeName == 'A') {
img.element.target = '';
}
addListener(img.element, 'click', function(ev) {
ev = ev || window.event;
ev.preventDefault();
window.slimbox(images, parseInt(''+i), options);
return false;
});
});
};
// Internal functions
function position() {
var l = document.documentElement.scrollLeft, w = document.documentElement.offsetWidth;
els.center.style.left = els.bottomContainer.style.left = (l + (w / 2))+'px';
if (compatibleOverlay) {
apply(els.overlay.style, {
left: l+'px',
top: document.documentElement.scrollTop+'px',
width: w+'px',
height: document.documentElement.offsetHeight+'px'
});
}
}
function hide(nodes) {
for (var i = 0; i < nodes.length; i++) {
hiddenElements.push([nodes[i], nodes[i].style.visibility]);
nodes[i].style.visibility = "hidden";
}
}
function setup(open) {
if (open) {
hide(document.getElementsByTagName('object'));
hide(document.getElementsByTagName(ie6 ? 'select' : 'embed'));
} else {
for (var i in hiddenElements) {
hiddenElements[i][0].style.visibility = hiddenElements[i][1];
}
hiddenElements = [];
}
var f = (open ? addListener : removeListener);
f(window, 'scroll', position);
f(window, 'resize', position);
f(document, 'keydown', keyDown);
}
function keyDown(event) {
event = event || window.event;
var code = event.keyCode;
// Prevent default keyboard action (like navigating inside the page)
return keyActions[code] ? keyActions[code]() : false;
}
function previous() {
return changeImage(prevImage);
}
function next() {
return changeImage(nextImage);
}
function changeImage(imageIndex) {
if (imageIndex >= 0) {
activeImage = imageIndex;
activeURL = images[activeImage].url;
prevImage = (activeImage || (options.loop ? images.length : 0)) - 1;
nextImage = ((activeImage + 1) % images.length) || (options.loop ? 0 : -1);
els.center.className = "lbLoading";
preload = new Image();
preload.onload = animateBox;
preload.src = activeURL;
}
return false;
}
function animateBox() {
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.prevLink.style.height = preload.height+'px';
els.nextLink.style.height = preload.height+'px';
els.caption.innerHTML = images[activeImage]['title'] || "";
els.number.innerHTML = (((images.length > 1) && options.counterText) || "").replace(/{x}/, activeImage + 1).replace(/{y}/, images.length);
if (prevImage >= 0) preloadPrev.src = images[prevImage]['url'];
if (nextImage >= 0) preloadNext.src = images[nextImage]['url'];
centerWidth = els.image.offsetWidth;
centerHeight = els.image.offsetHeight;
var top = Math.max(0, middle - (centerHeight / 2));
if (els.center.offsetHeight != centerHeight) {
els.center.style.height = centerHeight+'px';
els.center.style.top = top+'px';
}
if (els.center.offsetWidth != centerWidth) {
els.center.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);
if (prevImage >= 0) els.prevLink.style.display = '';
if (nextImage >= 0) els.nextLink.style.display = '';
els.bottomContainer.style.visibility = "";
}
function showImg() {
els.image.className = 'lbvisible';
}
function stop() {
preload.onload = null;
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);
}
function close() {
if (activeImage >= 0) {
stop();
activeImage = prevImage = nextImage = -1;
els.center.style.display = 'none';
els.overlay.className = '';
setTimeout(function() {
els.overlay.style.display = 'none';
document.head.removeChild(css);
}, options.overlayFadeDuration);
}
return false;
}
});