Lorsque vous cliquez sur un centre d'image dans la fenêtre/fenêtre globale (JS ou CSS)

Question

Je voudrais l'avoir lorsque je clique sur une image centrée dans la fenêtre d'affichage (comme un effet de visionneuse).

J'ai mis en place un stylo ici http://codepen.io/emilychews/pen/OpXKGd et j'ai essayé de trouver la meilleure façon de le faire mais j'ai l'impression d'avoir frappé un mur.

J'ai inclus plusieurs éléments dans la démo parce que je l'aime, donc il utilise la fenêtre comme conteneur de centrage, pas seulement l'élément parent. Je vais l'utiliser sur un site wordpress en disant simplement ajouter un emballage n'est pas viable pour moi.

De plus, si vous regardez la démo, les éléments évoluent en douceur pour l'instant et je voudrais l'aligner de manière centralisée sur l'objet window dans le cadre de la transition quand il est mis à l'échelle.

J'apprécie que cela ne soit possible qu'avec JS/jQuery et j'en ai inclus dans mon exemple.

Mon code de référence rapide est:

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

    }); 

}); 

Toute aide/solution serait incroyable.

Emily :)

Answer 1

Je crois que ce que vous cherchez est de définir une propriété left sur l'image en taille réelle. Notez que vous devrez également utiliser position: absolute afin de compenser chaque élément du même montant (en les centralisant).

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

J'ai créé une CodePen mise à jour mettant en vedette cette here.

Notez que vous pouvez également leur donner un index z plus élevé, car les éléments .fullsize sont parfois masqués derrière les images normales.

Espérons que cela aide! :)

Answer 2

Essayez ceci. C'est un peu nerveux et a besoin de jouer du violon, mais ça te donne ce que tu veux.

Changement .Support à:

.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; 
} 

Changement .fullsize à:

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

et changer votre JQuery pour

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

    }); 

}); 

Réglage de la mise à l'échelle dans la JQuery place pourrait vous donner une transition plus douce.