灯箱以jquery为中心

Question

最近我试图在灯箱中制作图像。如果单击它在灯箱效果中显示的图像。但有些原因，Lightbox没有在窗口大小中正确居中。例如，如果您单击它在灯箱中加载的图像，但是第一次将灯箱加载到站点底部，并再次单击它正确对齐的图像。 这是我正在说的截图。 当页面加载时单击图像时，将显示第一个屏幕截图。

首次点击图片：

第二次点击图片：

第一次出现对齐问题。 第二次没有对齐问题（没有页面加载） 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：

                                                                                                

这是小提琴 http://jsfiddle.net/rCUGD/7/

但有些脚本如何在jsfiddle.net中正常工作。可能是我用脚本或css搞砸了

我不是我犯错的地方

编辑：

现在 @JustAnil 以下是屏幕截图：

第二次点击后，它应该显示为正常

Answer 1

结帐此工作JSFiddle 。

您需要更改以下行（计算偏移量的位置）。

更改以下行：

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

要：

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.

<强>最后

更改您的CSS：

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

要

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

---

查看此问题CSS Vertically & Horizontally Center Div（这就是如何将div居中到屏幕中间）。

然后改变你的javascript来计算负偏移量（取决于图片的大小[即宽度和高度的50％]）

查看此工作JSFiddle 。