Some time you need show image in middle of screen. Currently lightbox do not support. You need modify js. Open lightbox.js and add code in function Lightbox.prototype.sizeContainer.
$image = $lightbox.find('.lb-image');
$top = ($(window).height() - $image.height())/2 - 30;
if($top < 20)
$top = 20
$('#lightbox').css('top', $top + $(window).scrollTop());
Add before line if (newWidth !== oldWidth && newHeight !== oldHeight) {
Good luck to you.
Showing posts with label Lightbox2. Show all posts
Showing posts with label Lightbox2. Show all posts
Monday, July 29, 2013
Monday, July 15, 2013
Set max-width for Lightbox2
Some time we need set max-width for image when use lightbox2
1. Change css.
Go to lightbox.css add line
/* line 24, ../sass/lightbox.sass */
/*#lightbox img {*/
/*width: auto;*/
/*height: auto;*/
/*}*/
#lightbox img {
width: auto;
height: auto;
max-width: 600px;
}
2. Change JS.
Go to lightbox.js. Add some red lines.
preloader.onload = function () {
$image.attr('src', _this.album[imageNumber].link);
$image.width = preloader.width;
$image.height = preloader.height;
if (preloader.width > 600) {
preloader.height = preloader.height / preloader.width * 600;
preloader.width = 600;
}
return _this.sizeContainer(preloader.width, preloader.height);
};
Good luck to you
1. Change css.
Go to lightbox.css add line
/* line 24, ../sass/lightbox.sass */
/*#lightbox img {*/
/*width: auto;*/
/*height: auto;*/
/*}*/
#lightbox img {
width: auto;
height: auto;
max-width: 600px;
}
2. Change JS.
Go to lightbox.js. Add some red lines.
preloader.onload = function () {
$image.attr('src', _this.album[imageNumber].link);
$image.width = preloader.width;
$image.height = preloader.height;
if (preloader.width > 600) {
preloader.height = preloader.height / preloader.width * 600;
preloader.width = 600;
}
return _this.sizeContainer(preloader.width, preloader.height);
};
Good luck to you
Subscribe to:
Posts (Atom)