Exemple 139

L'affichage d'une image en lien, en plein écran et dans la même page peut se faire, d'au moins deux façons.

Soit l'image est présentée en vignette cliquable et occupe tout l'écran au clic dessus; inconvénient: pour revenir en position de départ, il faut ajouter un bouton (X), comme le fait Ekla lorsque nous saisissons une image par l'icône "Image": la taille de la vignette est à définir et si nous ajoutons le lien vers l'image d'origine, l'agrandissement ne s'affiche pas en plein écran et avec une croix X dans l'angle haut/droit pour le retour.

Soit, l'image agrandie s'affiche en plein écran par un clic sur un autre élément (vignette, image, mot...); l'avantage est qu'on revient au départ par un clic sur l'image en plein  écran car le second clic annule l'action du premier, s'il n'est pas sur le même élément.

Ne pas oublier que, dans les lignes de code CSS (entre <style><!-- et --></style>), le programme doit trouver la ligne de l'élément cliqué avant celle de l'élément animé même si, en lignes HTML, cela n'a pas d'importance; nous verrons un exemple plus loin.

Concernant les unités Viewport que j'utilise et qui ne sont qu'une autre écriture que l'unité %, il y a deux unités: 100vw représente 100% de la largeur de l'écran de lecture et 100vh représente 100% de la hauteur de l'écran de lecture. Cette unité est plus simple, à mon avis, que les % qui ne "passent" pas partout; quant aux px, si votre largeur de blog n'est pas paramétrée en 100%, l'affichage sera différent sur différents écrans.

Pour me simplifier mes écritures, je n'utilise que l'unité vw et je fais le rapport en vw/vh pour écran en 16/9; ceci complique sans doute la lecture de mes codes car 100vh sont transformés en 56.25vw. (16 ->100vw et 9 ->56.25vw.)

J'héberge mes images en 1920x1080px sur Ekla.

Voyons des exemples.

Image saisie par l'icône "image" en 800px par 450px, avec lien vers l'image d'origine, au clic.

En ouvrant le code source (<>), je trouve la ligne de code générée:

<p style="text-align: center;"><a href="http://ekladata.com/xGxRxqPAjt98s7LGO5fzqR24Nm8.jpg"><img src="http://ekladata.com/xGxRxqPAjt98s7LGO5fzqR24Nm8@800x450.jpg" alt="Exemple 139" /></a></p>

L'image affichée au clic n'est pas en plein écran et pour revenir au départ, il faut cliquer sur la croix, en haut à gauche.

 Pour obtenir une image affichée en plein écran, il faut la faire ouvrir dans un autre onglet, en modifiant la ligne de code:

<p style="text-align: center;"><a style="width: 100%; height: 100%;" href="http://ekladata.com/xGxRxqPAjt98s7LGO5fzqR24Nm8.jpg" target="_blank"><img style="border: 0.4vh solid grey;" src="http://ekladata.com/xGxRxqPAjt98s7LGO5fzqR24Nm8@800x450.jpg" alt="Exemple 139" /></a></p>

L'image s'affiche d'abord en grand format et en cliquant dessus, elle passe en plein écran.

********************************** 

Voilà pour la première façon de faire; regardons maintenant pour faire ouvrir la grande image dans la même page et dans le même cadre (div) que l'élément du lien.

Pour cela, nous allons créer une vignette cliquable, en plaçant notre dans une balise "input".

Puis, nous allons positionner la grande image dans le même cadre mais en le rendant invisible; nous pouvons, par exemple, lui donner, une dimension égale à zéro (largeur ou hauteur); nous pouvons également la faire ne pas s'afficher par display:none; mais nous n'aurons pas, dans ce cas, d'effet de transition (display:block;): affichage brutal.

Le positionnement de la grande image sera réglable; pour mon exemple, je vais placer la vignette cliquable et la grande image invisible dans un cadre div. pour que le haut de cette div soir le haut de l'affichage de la grande image.

La saisie de l'image peut se faire par l'icône "image" pour en récupérer l'adresse ou l'héberger dans un album. Clic sur l'image ci-dessous.

<div style="width: 32vw; height: 18vw; text-align: left; margin:1vh auto;"><input id="zc1" src="http://ekladata.com/lro6BpRiZn4niIOz1SWtWT_imP4@600x450.jpg" type="image" /> <img id="zc2" src="http://ekladata.com/lro6BpRiZn4niIOz1SWtWT_imP4.jpg" alt="" /></div>

<style><!--
#zc1{position:absolute; z-index:1; width:32vw; height:18vw; border:none; margin:1vh auto;}
#zc2{position:absolute; z-index:100; width:100vw; height:0vw; left:0; transition:height 1s linear;}
#zc1:focus ~ #zc2{height:56.25vw;}
--></style>

La div est ici, des dimensions de l'élément cliquable; je proposerai d'autres exemples dans une autre page.

Le positionnement text-align:left; est parce que le texte est paramétré centré, dans la structure de mon blog et que je dois le modifier ponctuellement pour que l'élément input soit centré dans la div.

La vignette cliquable et la grande image sont positionnées en absolute;

Le positionnement en profondeur (z-index) est de 100 pour la grande image zc2 afin de s'afficher au dessus des colonnes latérales.

Son animation est ici sur la hauteur qui passe de 0vw à 56.25vw en 1 seconde.