0

私は回転する画像のカルーセルに取り組んでいます.1つをクリックすると、jQueryを使用して「ポップアップ」します。方法は次のとおりです。

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();

popUp div がクリックされた画像 (すべての画像が同じサイズ) に応じて場所を変更し、クリックされた画像の 1 つだけを正しく中央に配置することを除いて、これはうまく機能します。

配置を実現するために使用される CSS は次のとおりです。

#popUp
 {
    display: none;
    width: 300px;
    height: 200px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -150px; 
    margin-top: -100px;
    z-index: 9999;
}

親要素のスタイル:

#carousel1
{
width:1000px;
height:200px;
overflow:scroll;
}

どの画像がクリックされても、すべて画面の中央に表示されるように設定することはできますか?

4

2 に答える 2

1

コンセプトのデモンストレーション

jQuery を使用してこの問題に対処する方法の 1 つを次に示します。

拡大画像を表示するポップアップ ウィンドウ (ビュー ポートに対して水平および垂直方向に中央揃え) を作成する方法を説明します。また、画面の残りの部分を部分的に覆い隠すオーバーレイも作成します。

たとえば、HTML は次のようになります。

<div class="carousel">
    <img src="http://placekitten.com/200/200">
    <img src="http://placekitten.com/220/220">
    <img src="http://placekitten.com/230/230">
    <img src="http://placekitten.com/240/240">
</div>
<div class="popup"></div>

ポップアップ/オーバーレイとして機能する要素 (最初は非表示) を明示的に定義します。

CSS は次のようになります。

の場合.carousel、親コンテナーの中央にテキストが配置された一連のインライン ブロック イメージがあります。

.carousel {
    border: 2px solid gray;
    padding: 10px;
    text-align: center;
    height: auto; /* set this to 1000px and see how it behaves with scrolling */
}
.carousel img {
    display: inline-block;
    width: 100px;
    vertical-align: middle;
}

ポップアップ/オーバーレイの場合:

.popup {
    display: none;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(125,125,125,0.5);
}
.popup .wrap {
    width: 300px;
    height: 200px;
    background-color: white;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -150px;
    margin-top: -100px;
}
.popup .wrap img {
    height: 100%;
    vertical-align: top;
}

.popup要素は固定され、ビューポート (ウィンドウ) を埋めるようにサイズ設定されます。幅と高さが固定された内部ラッパー コンテナ ( .wrap) があり、これは固定配置された親に対して絶対的に配置されます。左/上余白を調整して中央に配置しました。

画像は高さが.wrap要素を満たすようにスケーリングされます。 がtext-align: centerオンになっているため.wrap、画像は水平方向の中央に配置されます。

最後に、jQuery:

function showPopup(imgSrc) {
    var theImg = '<div class="wrap"><img src="'+imgSrc+'"></div>';
    $(".popup").empty().append(theImg).fadeIn();
}

$(".carousel img").on('click',function (){
    var theSrc = $(this).attr('src');
    showPopup(theSrc);
});
$(".popup").on('click', ".wrap", function(){
    $(".popup").fadeOut();
})

サムネイルをクリックすると、ポップアップ/オーバーレイがフェードインし、画像またはその周囲の左右の空白をクリックするとフェードアウトします。

http://jsfiddle.net/audetwebdesign/rQdZR/で実際のデモを見ることができます。

他のコメント

このデモの周りにいくつかのバリエーションを開発できます。たとえば、サムネイルを直接クリックできるようにオーバーレイを除外できます。ビューポートの中心以外にポップアップが表示される位置を固定することもできます。

于 2013-06-25T23:47:27.347 に答える