Montage 120

Montage 120

Montage suite à une demande de Vadou, dont vous avez peut-être visité le blog sur mes indications.

Il souhaite qu'au clic maintenu (ça, c'est moi qui l'impose !), sur une vignette de son album photo, l'image s'affiche au centre de l'écran, quelle que soit la position de la vignette.

Cependant, je crois qu'il est sur un Mac et le positionnement en profondeur (z-index) n'est pas accepté.

Ce cadre est uniquement destiné à simuler les parties précédentes de l'article, l'album photo étant supposé être placé en dernière position.
Le clic maintenu sur une vignette affiche son image en grand, dans un cadre positionné où on le souhaite.
Cependant des impératifs des codes nous obligent:
- A écrire l'élément survolé ou cliqué avant l'élément animé ce qui signifie que l'élément animé, ici le cadre de la grande image, sera écrit en dernier, les vignettes le précédant.
- Le point de référence du cadre de la grande image est l'angle haut/gauche de son contenant, c'est à dire le cadre des vignettes, qui est lui-même en fond d'article.
Pour que notre cadre grande image s'affiche en milieu d'écran, il va donc falloir le positionner assez haut.
Pour aider au positonnement de ce cadre, je vous conseille de lui mettre une bordure rouge, par exemple, que vous effacerez ensuite, en rendant le cadre transparent en passant opacity:0.5; (valeur pour les réglages) à opacity:0;.
Comme vous le voyez en vous déplaçant verticalement, l'article se déplace mais pas le cadre grande image.
La commande au clic maintenu est bien adaptée à cet usage.
Le cadre grande image est vide et transparent; le clic sur une vignette le rend opaque et avec l'image de la vignette en fond.
Quelle que soit la position de la vignette, le cadre grande image se positonnera toujours selon vos paramètres.

Cette proposition doit être adaptée à votre article: n'en conservez que le principe.

Je reprends le code proposé car le fait de placer une image invisible au dessus de l'article empêche de pouvoir mettre des liens( au clic ou au survol) dans l'article puisque le lien n'est pas accessible, étant sous l'image invisible.

Exemple, un lien vers le site de Vadou.

On peut donc réduire la largeur du cadre de la grande image et l'élargir seulement au clic sur une vignette.

Comme vous le voyez pour l'exemple, le trait vertical rouge est la bordure du cadre grande image de largeur 0vw; cette bordure est à effacer à la publication de l'article.

J'ai également ajouté ce cadre bleuté pour simuler un autre paragraphe de votre article; il faut donc remonter le cadre de la grande image d'autant.

Paragraphe blanc et bleu de 30vw de haut; cadre grande image de 33.75vw.

Le cadre image est remonté de 30vw + 30vw + 4vw (texte) + 20vw (environ)

<div style="width: 60vw; height: 5vw; border: 0.2vh solid black; text-align: center; margin: 1vh auto;">
<p id="vad1"> </p>
<p id="vad2"> </p>
<p id="vad3"> </p>
<p id="vad4"> </p>
<p id="vad5"> </p>
<p id="vad6"> </p>
<p id="vad0"> </p>
</div>
<style></style>