var lightBox = {};
var data = [
{alt: 'Les pod sněhem',description: 'Les pod sněhem', small: {url: 'http://jak.seznam.cz/img/lightbox/tn_01.jpg'}, big: {url: 'http://jak.seznam.cz/img/lightbox/01.jpg'} },
{alt: 'Osvětim',description: 'Osvětim', small: {url: 'http://jak.seznam.cz/img/lightbox/tn_02.jpg'}, big: {url: 'http://jak.seznam.cz/img/lightbox/02.jpg'} },
{alt: 'MIG-15 ve vojenském muzeu Kbely',description: 'MIG-15 ve vojenském muzeu Kbely', small: {url: 'http://jak.seznam.cz/img/lightbox/tn_03.jpg'}, big: {url: 'http://jak.seznam.cz/img/lightbox/03.jpg'} },
{alt: 'Rozhledna',description: 'Rozhledna', small: {url: 'http://jak.seznam.cz/img/lightbox/tn_04.jpg'}, big: {url: 'http://jak.seznam.cz/img/lightbox/04.jpg'} },
{alt: 'Beruška',description: 'Beruška', small: {url: 'http://jak.seznam.cz/img/lightbox/tn_05.jpg'}, big: {url: 'http://jak.seznam.cz/img/lightbox/05.jpg'} },
{alt: 'Česká kotlina',description: 'Česká kotlina', small: {url: 'http://jak.seznam.cz/img/lightbox/tn_06.jpg'}, big: {url: 'http://jak.seznam.cz/img/lightbox/06.jpg'} },
{alt: 'Mochomůrka červená - houba nejedlá',description: 'Mochomůrka červená - houba nejedlá', small: {url: 'http://jak.seznam.cz/img/lightbox/tn_07.jpg'}, big: {url: 'http://jak.seznam.cz/img/lightbox/07.jpg'} },
{alt: 'Surikata - nejfotogeničtější zvířátko v ZOO',description: 'Surikata - nejfotogeničtější zvířátko v ZOO', small: {url: 'http://jak.seznam.cz/img/lightbox/tn_08.jpg'}, big: {url: 'http://jak.seznam.cz/img/lightbox/08.jpg'} }
];
var opt = {
galleryClassName: "lightBox",
zIndex: 10,
galleryId: 'lightBox',
useShadow: true,
usePageShader: false,
imagePath: 'http://jak.seznam.cz/img/widgets/lightbox/shadow-',
components: {
strip: JAK.LightBox.Strip.Scrollable,
navigation: JAK.LightBox.Navigation.Basic,
anchorage: JAK.LightBox.Anchorage.Fixed,
main: JAK.LightBox.Main.CenteredScaled,
description: JAK.LightBox.Description.Basic,
transition: JAK.LightBox.Transition.Fade
},
stripOpt: {
orientation: 'horizontal',
activeBorder: 'outer'
}
};
JAK.Photos = JAK.ClassMaker.makeClass({
NAME: 'JAK.Photos',
VERSION: '1.0',
CLASS: 'class',
IMPLEMENT: [JAK.ISignals]
});
/**
* konstruktor
*/
JAK.Photos.prototype.$constructor = function(owner) {
this.owner = owner;
this._render();
};
/**
* privátní metoda starající se o vyrenderování komponenty
*/
JAK.Photos.prototype._render = function() {
var c = JAK.cel('div', 'image-browser-photo-count');
var n = this.owner.data.length;
var text = n > 0 && n < 5 ? 'fotografie' : 'fotografií';
c.innerHTML = n+' '+text;
this.owner.dom.content.appendChild(c);
};
opt.components.others = [];
opt.components.others.push({name: 'photos', part: JAK.Photos});
lightBox.g = new JAK.LightBox(data, opt);
lightBox.openGallery = function (e, elm) {
lightBox.g.show(0);
}
JAK.Events.addListener(JAK.gel("showGallery"),"click", lightBox,"openGallery");
<p><a href="#" id="showGallery">Zobrazení galerie</a>.</p>
body { color: #000000; font-family: Arial,sans-serif; font-size: 81.5%; }
p { margin-top: 6px; }
/*galerie s obrazky dole*/
/*rozmery galerie*/
#lightBox {background-color: black; width: 800px; <strong>height: 547px;</strong> padding-top:10px; padding-left: 10px; padding-right: 10px;}
#lightBox .image-browser-image {width: 800px; height: 450px; border: 1px solid #333; overflow: hidden; padding: 0px; float: left; position: relative;}
/*nahledovy pas*/
#lightBox .image-browser-thumbs {width: 800px;height: 81px; overflow-x:scroll; clear: both;}
#lightBox .image-browser-thumbs table {border-collapse:separate; border-spacing:3px 3px;}
#lightBox .image-browser-thumbs td {padding: 0px; border: 1px solid #333;}
#lightBox .image-browser-thumbs .image-browser-thumb-box {height: 55px; width: 100px; padding: 0px; margin: 3px; border: 1px solid #333; }
/*ramecek okolo aktivniho nahledu*/
#lightBox .image-browser-active {border: 3px solid red;}
/*zasednuti pod galerii*/
div.image-browser-root { _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://jak.seznam.cz/img/widgets/lightbox/bg.png', sizingMethod='scale' );}
div[class~="image-browser-root"] { background: url(http://jak.seznam.cz/img/widgets/lightbox/bg.png); }
/*ovladaci tlacitka*/
#lightBox .image-browser-prev { position: absolute; top: 20px; left: 20px; display: block; width: 42px; height: 36px; cursor: pointer; background: url(http://jak.seznam.cz/img/widgets/lightbox/lb-previous-active.png); _background: none; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://jak.seznam.cz/img/widgets/lightbox/lb-previous-active.png'));}
#lightBox .image-browser-prev:hover { background: url(http://jak.seznam.cz/img/widgets/lightbox/lb-previous-hover.png); _background: none; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://jak.seznam.cz/img/widgets/lightbox/lb-previous-hover.png')); }
#lightBox .image-browser-next { position: absolute; top: 20px; left: 66px; display: block; width: 42px; height: 36px; cursor: pointer; background: url(http://jak.seznam.cz/img/widgets/lightbox/lb-next-active.png); _background: none; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://jak.seznam.cz/img/widgets/lightbox/lb-next-active.png')); }
#lightBox .image-browser-next:hover { background: url(http://jak.seznam.cz/img/widgets/lightbox/lb-next-hover.png); _background: none; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://jak.seznam.cz/img/widgets/lightbox/lb-next-hover.png')); }
#lightBox .image-browser-prev-disabled { position: absolute; top: 20px; left: 20px; display: block; width: 42px; height: 36px; cursor: pointer; background: url(http://jak.seznam.cz/img/widgets/lightbox/lb-previous-inactive.png); _background: none; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://jak.seznam.cz/img/widgets/lightbox/lb-previous-inactive.png')); }
#lightBox .image-browser-next-disabled { position: absolute; top: 20px; left: 66px; display: block; width: 42px; height: 36px; cursor: pointer; background: url(http://jak.seznam.cz/img/widgets/lightbox/lb-next-inactive.png); _background: none; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://jak.seznam.cz/img/widgets/lightbox/lb-next-inactive.png')); }
#lightBox .image-browser-close { position: absolute; top: 20px; left: 760px; display: block; width: 42px; height: 36px; cursor: pointer; background: url(http://jak.seznam.cz/img/widgets/lightbox/lb-close-active.png); _background:none ;_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://jak.seznam.cz/img/widgets/lightbox/lb-close-active.png'));}
#lightBox .image-browser-close:hover { background: url(http://jak.seznam.cz/img/widgets/lightbox/lb-close-hover.png); _background:none; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://jak.seznam.cz/img/widgets/lightbox/lb-close-hover.png'));}
#lightBox .image-browser-photo-count { width: 100px; height: 50px; margin-right: 15px; padding-top: 7px; text-align: center; float: right; color: #999; font-family:Arial, Helvetica, sans-serif; line-height:140%; font-size: 12px;/*napevno protoze je to v tabulce*/ }
External resources loaded into this fiddle: