Skip to content

Instantly share code, notes, and snippets.

@Soullighter
Last active June 28, 2016 04:14
Show Gist options
  • Save Soullighter/bc3fbe6991552a36664a3df5eb85df9f to your computer and use it in GitHub Desktop.
Save Soullighter/bc3fbe6991552a36664a3df5eb85df9f to your computer and use it in GitHub Desktop.
How to center image vertically in lightbox
// STEP 1:
// Inside the start function, at around line 170 I commented out the assignation of the 'top' property, like this:
// Position Lightbox
var top = $window.scrollTop() + this.options.positionFromTop;
var left = $window.scrollLeft();
this.$lightbox.css({
// top: top + 'px', // comment out this line
left: left + 'px'
}).fadeIn(this.options.fadeDuration);
// STEP 2:
// Then inside the changeImage function, at line 232, after this declaration
self.sizeContainer($image.width(), $image.height());
// STEP 3:
// I added those lines:
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');
// More details
// https://github.com/lokesh/lightbox2/issues/172#issuecomment-228747592
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment