Grand agrandissement

J'ai déjà proposé cette page mais pour finir le menu de Février ...

Comment publier une photo à agrandir au clic, dans une nouvelle page puis à agrandir encore au clic, une fois agrandie ?

Il faut d'abord avoir pris une photo de grandes dimensions: mon exemple fait 5184px par 2920px, soit 7.4 Mo.

Le début commence comme beaucoup ont l'habitude de publier leurs photos, en allant la choisir dans vos fichiers, par l'icône "Image"/parcourir.

Conservez la taille proposée, le lien pour ouvrir l'originale; le positionnement dans l'article est à votre choix.

Vous obtenez ceci qui, au clic, va ouvrir l'image dans la même page et dans une taille définie par le programme, en fonction de votre écran, avec une croix en haut à droite pour l'effacer.

*****

Ouvrez maintenant le code source de votre article et cherchez les lignes de votre image à agrandir au clic.

La ligne qui nous intéresse est: (au dessus de *****)

<p style="text-align: center;"><a href="http://ekladata.com/768U-BdYSf9SSKrQ4lf70EmnAAs.jpg"><img src="http://ekladata.com/768U-BdYSf9SSKrQ4lf70EmnAAs@500x282.jpg" alt="Grand agrandissement" /></a></p>

<p style="text-align: center;">...</p> est ce qui centre l'image publiée.

<a href="http://ekladata.com/768U-BdYSf9SSKrQ4lf70EmnAAs.jpg">...</a> est ce qui fait un lien au clic pour agrandir l'image.

<img src="http://ekladata.com/768U-BdYSf9SSKrQ4lf70EmnAAs@500x282.jpg" alt="Grand agrandissement" /> est l'image affichée dans le format choisi: 500x282px.

*****

Nous allons modifier cette ligne pour obtenir:

<p style="text-align: center;"><a href="http://ekladata.com/768U-BdYSf9SSKrQ4lf70EmnAAs.jpg" target="blank"><img style="width:60vw; border:0.4vh ridge white;" src="http://ekladata.com/768U-BdYSf9SSKrQ4lf70EmnAAs   .jpg" alt="Grand agrandissement" /></a></p>

Le centrage ou non de l'image dans l'article est à votre convenance: ici, rien de modifié à ce niveau.

L'image en lien, en rouge: on ajoute: target="blank" qui va faire s'ouvrir l'image en lien dans une nouvelle page.

L'image affichée, en vert: on ajoute les attributs de taille et éventuellement de décoration: taille adaptative de 60% de la largeur de votre écran:style:"width:60vw;" la hauteur s'adapte automatiquement.

Il ne faut surtout pas oublier de supprimer la taille définie par le cadre image, de 500x282px, qui s'est ajoutée à la fin de l'adresse de l'image: @500x282  juste avant .jpg

*****

Voyons le résultat ci-dessous en recopiant la ligne modifiée dans la fenêtre CSS, en cliquant une fois (comme en Belgique) puis une seconde fois, une fois agrandie dans la nouvelle page.

Vous n'aurez pas à faire ça puisque vous aurez modifié la ligne dans le CSS; ce n'est ici que pour l'exemple afin que vous fassiez la différence entre le lien automatique et celui modifié.