Principe PE 1

Puisque l'affichage plein écran semble plaire, à moi et à d'autres, voici un code simple pour une image:

<p><img id="cde1" src="http://ekladata.com/8jScR_HmBuD7OL1Es8pK-auhcBY@307x173.jpg" alt="" /> <img id="zoom1" src="http://ekladata.com/8jScR_HmBuD7OL1Es8pK-auhcBY.jpg" alt="" /></p>
<style><!--
#cde1{position:relative; z-index:1; margin:1vh auto;}
#zoom1{position:fixed; z-index:5; width:100vw; height:0vw; top:0; left:0; transition:all 1s linear;}
#cde1:active ~ #zoom1{height:56.25vw;}
--></style>

qui donne une image au clic maintenu:

La petite image peut être décorée mais restons sur le principe; son adresse est celle de la grande image réduite en 307px par 173px.

La grande image est toujours positionnée à partir de l'angle haut/gauche de votre écran (position:fixed; top:0; left:0;); sa largeur est la largeur de votre écran(width:100vw;) et sa hauteur est nulle (height:0vw;)

Le clic maintenu sur la petite image modifie la hauteur de la grande image qui passe à 56.25vw (ratio 16/9).

Cette écriture permet de ne pas avoir à positionner la petite image dans votre écran pour avoir une grande image bien positionnée.

On peut placer plusieurs petites images, dans des dispositions variables et elles commanderont des grandes images toujours placées de la même façon.

Pour la présentation de ces petites images, vous pouvez reprendre mes propositions de montages (forme, taille, position...)

Pour la présentation des grandes images, vous pouvez également les faire apparaître de différentes façons (haut/gauche+ largeur ou hauteur, centre ...)

Quant à l'affichage plein écran sur votre média, il dépend du système de gestion et du clavier: le but est d'escamoter les barres hautes.