Showing posts with label Lightbox2. Show all posts
Showing posts with label Lightbox2. Show all posts

Monday, July 29, 2013

Lightbox - Middle image in ligghtbox 2

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.

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