0

ユーザーがカルーセル内の画像をクリックすると、ポップアップの大きな画像を作成しています。私はこれを達成しましたが、カルーセル内の位置によって画像の位置が異なります。私が今持っているCSSは次のとおりです。

#carousel1{
    width:1000px;
    height:200px;
    overflow:scroll;
}
#popUp{ 
    display: none;
    position: fixed !important;
    width: 580px !important;
    height: 350px !important;
    z-index: 9999;
}

関連する HTML は次のとおりです。

<div id = "carousel1">
    <img class="cloudcarousel" src="1.png" alt="1" title="Flag 1 Title" />
    <img class="cloudcarousel" src="2.png" alt="2" title="Flag 2 Title" />
    <img class="cloudcarousel" src="3.png" alt="3" title="Flag 3 Title" />
    <img class="cloudcarousel" src="4.png" alt="4" title="Flag 4 Title" />
    <img class="cloudcarousel" src="5.png" alt="5" title="Flag 5 Title" />
</div>
<div id = "popUp"></div>

関連するjQueryは次のとおりです。

this.imagePop = function () {
    if (options.imagePop !== 'no') {

        $(container).bind('click', this, function (event) {

            clearInterval(event.data.autoRotateTimer); // Stop auto rotation if mouse over.
            clearInterval(event.data.intervalLeft);
            clearInterval(event.data.intervalRight);
            var text = $(event.target).attr('alt');
            // If we have moved over a carousel item, then show the alt and title text.

            var $img = $(event.target);
            $('#popUp').html($img.clone().height(200).width(300)).add($('#overLay')).fadeIn();
            $('#popUp').add($('#overLay')).click(function () {
                $('#popUp').add($('#overLay')).fadeOut(function () {
                    $('#popUp').empty();
                });
            });
        });
    };
};

問題の実際の例については、www.bingetech.com/carousel を参照してください。

複製された画像で popUp div を画面の中央に配置することは可能ですか?

4

2 に答える 2

0

現在のメインのロゴ画像を、ユーザーがカルーセルでクリックするものに置き換える必要がありますか?

拡大画像の配置について詳しく教えてください。または何が望まれるかのスナップショット？

于 2013-06-26T04:02:16.867 に答える
0

.clone() メソッドと関係があると思います。画像のクローンを作成すると、クローンされたターゲットと同じ値にアクセスすることになるため、ポップアップ画像のプロパティのみを設定していることを確認できます。

#popUp img {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -175px;
  margin-left: -290px;
}

注: これが css の .cloudcarousel クラスの下で宣言されていることを確認してください

于 2013-06-26T03:53:09.123 に答える