0

I have created a custom lightbox, and I am trying to center the DIV to the screen, DIV is in FIXED position, I am able to center it from left and right but not vertically. To center it vertically I am doing following by JS:

  1. Getting the height of the image via JS
  2. Divide the height by 2
  3. fixed div position is from top 50%, and adding negative margin top in the div (negative margin top is the value which is divided by 2)

But its not centering, what approach it should have?

This is the JSFiddle example (Please view in full screen)

Here is the JS code

$(document).ready(function() {  
  //Open light box on click
  $(".gall-info").click(function(){
    //show lightbox
    $(".gallFullView").css({"opacity":"1", "visibility":"visible"});
    $(".galleryShade").fadeIn();
    $(".gall-info").css("bottom","0");

    //Get the heigh of image
    var gallFullViewImgHeight = $(".gallFullView-image > img").height();
    //Divide the height by 2
    var gallFullViewHalf = gallFullViewImgHeight / 2;
    //Apply the value of above in negative margin top to center the wrapper
    $(".gallFullView").css("margin-top", - gallFullViewHalf);
  });
});

thanks

Red
  • 5,189
  • 7
  • 32
  • 62
Sanjeev Kumar
  • 2,897
  • 2
  • 27
  • 62
  • its a bit different from this, as in my case I am trying to center based on the height of the image..because image height is going to be different. – Sanjeev Kumar Apr 21 '17 at 09:59
  • or just use css - `top:50%; left:50%; transform: translate(-50%);` There are a million posts out there about how to vertically center stuff – Pete Apr 21 '17 at 10:00

0 Answers0