クリックしたときにグローバルウィンドウ/ビューポートに画像センターがある（JSまたはCSS）

Question

ライトボックスエフェクトのようなビューポートを中心とする画像をクリックしたいと思っています。

私はここにペンを設定しましたhttp://codepen.io/emilychews/pen/OpXKGdとこれを行うための最良の方法を試してみましたが、私は壁に当たったようです。

デモには複数の要素が含まれています。親要素だけでなく、中央のコンテナとしてウィンドウを使用するようにしたいからです。私はこれをWordPressのサイトで使用していますので、ラッパーを追加するだけでは私にとって実行可能ではありません。

またデモを見ると、要素がスムーズにスケールアップされ、スケールアップ時にウィンドウオブジェクトの中央にウィンドウオブジェクトの位置を合わせることができます。

これはJS/jQueryでのみ可能であり、私の例にいくつか含まれています。

クイックリファレンスのための私のコードは次のとおりです。

HTML

<div class="wrapper"> 
    <div class="holder image1">Image 1</div> 
    <div class="holder image2">Image 2</div> 
    <div class="holder image3">Image 3</div> 
    <div class="holder image4">Image 4</div> 
    <div class="holder image5">Image 5</div> 
</div> 

CSS：

.holder { 
width: 20vw; 
height: 400px; 
background: red; 
position: relative; 
display: inline-block; 
margin-bottom: 5px; 
transition: all .75s ease-out; 
} 

// ======== THIS IS THE CLASS THAT IS ADDED WITH JQUERY 
.fullsize { 
background: blue; 
z-index: 2; 
position: relative; 
transform: scale(1.75); 
transform-origin: center center; 
transition: all .75s ease-out; 
} 

のjQuery：

$(document).ready (function(){ 

    $('.holder').click(function() { 

     $(this).toggleClass('fullsize'); 
     $(this).css('z-index', '+=1'); 

    }); 

}); 

すべてのヘルプ/ソリューションは素晴らしいだろう。

エミリーは:)

Answer 1

私はあなたがフルサイズの画像にleftプロパティを設定することです探しているものと信じています。また、各要素を同じ量だけオフセットするために（それらを集中させるために）position: absoluteを使用する必要があることに注意してください。

.fullsize { 
    position: absolute; 
    left: 40vw; 
} 

私は、このhereを示す最新のCodePenを作成しました。

.fullsize要素が通常の画像の後ろに隠れていることがあるため、Zインデックスを高くすることもできます。

希望すると便利です。 :)

Answer 2

これを試してください。それは少し不安定で、いくつかの手品を必要とするが、それはあなたが望むものを与える。

.holder.fullsize { 
background: blue; 
z-index: 200; 
transform: scale(1.75); 
transition: all .75s ease-out; 
    position:absolute; 
} 

し、代わりにあなたを与えるかもしれないjQueryのでスケーリングを設定

$(document).ready (function(){ 

    $('.holder').click(function() { 
    var $scaleFactor = 1.75; 
     $(this).toggleClass('fullsize'); 
    var $winWidth = $(window).width(); 
    var $myWidth = $(this).width(); 
    var $newWidth = $myWidth*$scaleFactor; 
    var $left = $winWidth/2-$newWidth/2; 
    $(".holder").text($left); 
    $(this).animate({  
     left:$left+"px" 
    },200); 

    }); 

}); 

にあなたのjQueryを変更します。

.holder { 
width: 20vw; 
height: 100px; 
background: red; 
position: static; 
display: inline-block; 
margin-bottom: 5px; 
transition: all .75s ease-out; 
z-index:0; 
    transform-origin: top left; 
} 

変更.fullsizeへ：

変更.holderへよりスムーズな移行。