Hello Developers, Greetings of the day!

Today, I am going to show you how to solve issue with align lightbox vertically in center of page.

Sometimes , when we use the lightbox, the image is not align vertically in center of page.

Like below screenshot.

At that time just add below lines of code in original lightbox.jsfile.

In lightbox.js file , Inside changeImage function at around 232 line after below declaration

  self.sizeContainer($image.width(), $image.height());

Add below lines of code,

   var window_height = windowHeight;
   var img_height = $image.height();
   var scroll_offset  = $(window).scrollTop();
   var view_offset = window_height/2 - img_height/2;
   var top_distance = scroll_offset + view_offset;
   self.$lightbox.css('top', top_distance+'px');

It will align lightbox vertically in page. Please see below screenshot.

I hope you will enjoy this blog.

Thanks and keep visiting 🙂