我如何將圖像放置在我的畫廊的中心

Question

我為我的站點制作了一個簡單的滑塊庫，但是發現當我單擊下一步時，圖像更新，但是直到完成整個圖像周期后，它才會居中

我如何才能從一開始就對齊圖像？

這是JS平台> http://jsfiddle.net/8pScd/4

HTML

<div class="view_gallery">view gallery</div>

<div class="prev control"><<</div>
<div class="next control">>></div>

<div class="gallery">

</div>

<div class="overlay"></div> 

CSS

.overlay{
    display: none;
    position: absolute; top: 0; right: 0; bottom: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.8);
    z-index: 100;
}

.gallery{
    z-index: 200;
    padding: 10px;
    position: absolute;
    left: 50%; 
    background: #fff;
}

.control{
    position: absolute;
    top: 200px;
    z-index: 300;
    color: #fff;
    text-transform: capitalize;
    font-size: 2em;
    cursor: pointer;
}

.prev{left: 0;}
.next{right:0;}

JQUERY

    //images
    var pics = new Array();
    pics[0] = "cars.jpg";
    pics[1] = "cats.png";
    pics[2] = "dogs.png";
    pics[3] = "bus.jpg"

    //total amount of pictures to display
    var pictot = pics.length-1;

    var nxt = $(".next"),
        prv = $(".prev"),
        view = $(".view_gallery"),
        gal = $(".gallery"),
        overlay = $(".overlay"),
        num = 0;

    //view gallery
    view.click(function(){
        overlay.show();
        gal.show();
        // Start gallery off on the first image
        gal.html('<img src="' + pics[0] + '" />');
    });

    nxt.click(function(){
        // If on the last image set value to 0. Else add 1
        if (num == pictot){num = 0;}else{num++;};
        update();
    });

    prv.click(function(){
        // If on first image set value to last image number. Else minus 1
        if (num == 0){num = pictot;}else{num--;}
        update();
    });

    function update () {
        // update image with next/previous
        gal.html('<img src="' + pics[num] + '" />');
        //center image (not working very well)
        var x = gal.width()/2;
        gal.css("marginLeft", -x);
    };

    //hide
    overlay.click(function(){
        gal.hide();
        $(this).hide();
    });

Answer 1

您遇到的問題是，單擊prev / next后立即調用“更新”功能。 該圖像尚未加載，因此代碼實際上還不知道新的gal.width。 這就是為什么它在一整輪之后都可以工作的原因：圖像現在在緩存中，因此已經可用。

最好的解決方案是使用javascript的Image對象預加載圖片。 一種更簡單但可能有問題的方法是使用“加載”事件（它可能無法在所有瀏覽器中正常運行）。

Answer 2

您可以將庫div與一些簡單的CSS hack對齊。

1）首先定義寬度。 （您可以使用jquery定義動態寬度）。

2）添加位置：絕對；

3）添加left：0，right：0;

4）增加保證金：0自動;

最終代碼如下所示。

.gallery {
    background: none repeat scroll 0 0 #FFFFFF;
    left: 0;
    margin: 0 auto !important;
    padding: 10px;
    position: absolute;
    right: 0;
    width: 600px;
    z-index: 200;
}

Answer 3

您的數學錯誤，請看下面的示例http://jsfiddle.net/8pScd/6/

我只需要更改您的數學

 var x = $('body').width()/2 - gal.width()/2;
 gal.css("margin-left", x + 'px');    

我在您的CSS 左側刪除了這行：50％;

.gallery{
    z-index: 200;
    padding: 10px;
    position: absolute;
    background: #fff;
}

Answer 4

知道.gallery為920px寬時，請left: 50%; margin-left: -470px設置left: 50%; margin-left: -470px left: 50%; margin-left: -470px 。 還要刪除javascript中更新圖庫容器左邊距的行gal.css("marginLeft", -x);