Standalone (NO JQUERY) Slimbox2 clone
parent
ceef061e49
commit
7f3466995d
|
@ -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);
|
||||||
|
}
|
||||||
|
});
|
Binary file not shown.
After Width: | Height: | Size: 971 B |
Binary file not shown.
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
After Width: | Height: | Size: 354 B |
Binary file not shown.
After Width: | Height: | Size: 371 B |
|
@ -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;
|
||||||
|
}
|
|
@ -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;
|
||||||
|
}
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
Loading…
Reference in New Issue