Lightbox Centering in jquery

Question

Recently I tried to make the images in lightbox. If you click the image it show off in lightbox effect. But Some of the Reason, Lightbox is not centering properly in a window size. For Example if you click the image it loaded in lightbox but for the first time it lightbox load in bottom of the site and again you click the image it align properly. here is the screenshot what i exactly saying. First Screenshot looks when you click the image when page load.

First Time Click the Image:

First Image

Second Time Click the Image:

After Second Time For the First Time it getting alignment problem. For the Second Time it not getting alignment problem(Without Page Load) Javascript:

 <script>
                jQuery(document).ready(function() {
                    jQuery("img").click(function() {
                          var img_path;               
            if ($(this).parent('a').length) {

                           img_path = $(this).parent('a').prop('href');
                            }
                        else
                            {
                         img_path = $(this).attr('src');
                            }

                        jQuery(".cplightbox1").html(jQuery("<img>").attr("src", img_path));
                        jQuery(".cpoutter").css('display', 'block');
                        jQuery('.cpoutter').animate({'opacity': '1'});
                        //jQuery('.lightbox').animate({'opacity':'1.00'});
                        var cplightbox = document.getElementsByClassName('cplightbox')[0];
                        var cpoutter = document.getElementsByClassName('cpoutter')[0];
                        cplightbox.style.marginTop = ((cpoutter.offsetHeight / 2) - (cplightbox.offsetHeight / 2)) + "px";
                        return false;
                    });
    });
    </script>

HTML CODE:

Here is the Fiddle http://jsfiddle.net/rCUGD/7/

But Some How this Script is working properly in jsfiddle.net. May Be I messup with script or css

I am Not where i made a mistake

EDITED:

Now After @JustAnil Here is the Screenshot: enter image description here

After the second click it should show like this normal

enter image description here

score 1 · Accepted Answer · edited May 23 '17 at 12:05

1

Checkout this working JSFiddle.

You need to change the following lines (where you calculate the offset).

Change the following lines:

 var cplightbox = document.getElementsByClassName('cplightbox')[0];
 var cpoutter = document.getElementsByClassName('cpoutter')[0];
 cplightbox.style.marginTop = ((cpoutter.offsetHeight / 2) - (cplightbox.offsetHeight / 2)) + "px";

To:

var cplightbox = document.getElementsByClassName('cplightbox')[0];

// We need the actual height of the image so grab it from the "inner" container
var cplightbox1 = document.getElementsByClassName('cplightbox1')[0]; // New Line

var cpoutter = document.getElementsByClassName('cpoutter')[0];

// Calculate the (negative) offset from the width & height
cplightbox.style.marginLeft = "-"+$(cplightbox1).width() / 2 + "px";
cplightbox.style.marginTop = "-"+$(cplightbox1).height() / 2 + "px";
// ^ Negative offset so we can vertically and horizontally center it.

Finally

Change your CSS from:

.cplightbox {
    margin-left: auto;
    margin-right:auto;
    width:auto;
    height:auto;
    display:inline-block;
}

To:

.cplightbox {
     position:fixed;
     top:50%;
     left:50%;
     display:inline-block;
 }

Checkout this question CSS Vertically & Horizontally Center Div (Thats how to center a div to the middle of the screen).

Then alter your javascript to calculate the negative offset (dependant on how big the picture is [ie 50% of the width & height])

View this working JSFiddle.

edited May 23 '17 at 12:05

Community

1
1

answered Jul 10 '13 at 10:37

Anil

21,730
9
73
100

Thanks @JustAnil I tried your code but unfortunately it getting alignment here and there. I added the screenshot about this I edited this question take a look at the screenshot after adding your jsfiddle script – Vignesh Pichamani Jul 10 '13 at 10:51
1

Hmm, seems to work on all browsers for me, on all clicks it centers to the window. Can you try it on your site?, perhaps its just a JSfiddle issue? Else I can't help you, it seems to work fine for me, just tinker with the javascript, the logic seems fine. – Anil Jul 10 '13 at 10:57
See In your Jsfiddle If you refresh and click the second image it shows what i mentioned in screenshot and after again you click it shows in center. Is any thing happen in jsfiddle or that script only doing this prob – Vignesh Pichamani Jul 10 '13 at 11:06
In My fiddle what i mentioned is if you deeply notice when you click the second image it show off slightly down.and after you click it shows middle – Vignesh Pichamani Jul 10 '13 at 11:12
Yeah Its work thanks, But i think you are using console why you using this and what is the problem? – Vignesh Pichamani Jul 10 '13 at 11:38
1

Remove the `console.log` statements, they are there for debugging only. You can print variables to `console.log` and view them in your inspector, thats all I used them for, you can safely delete them. – Anil Jul 10 '13 at 13:04
Thanks @JustAnil Thank you so Much. based on the setTimeout is executes the given function after the time given as second parameter passed? – Vignesh Pichamani Jul 10 '13 at 13:29
Glad you are the one of them in Stack Overflow to resolve my doubts. – Vignesh Pichamani Jul 10 '13 at 13:50

Lightbox Centering in jquery

1 Answers1