• Principe PE 2

    Exemple de positionnement de 4 vignettes à cliquer pour agrandissement plein écran.


    <p style="width: 60vw; height: 8.5vw; border: 0.1vh solid black; background: #FFE4C4; margin: 0vw auto;"><img id="cde1" src="http://ekladata.com/MHEmvaPkYwU8IRUDyCA2kXsN8EU@307x173.jpg" alt="" /> <img id="cde2" src="http://ekladata.com/UhpW3IvsSekawG1paOKZ6Y2G6wc@307x173.jpg" alt="" /> <img id="cde3" src="http://ekladata.com/woZ4tIJEhdq8VkFda2pyRdYkPcA@307x173.jpg" alt="" /> <img id="cde4" src="http://ekladata.com/GcB-6uF792I_V3cYYjbKNosArxw@307x173.jpg" alt="" /> <img id="zoom1" src="http://ekladata.com/MHEmvaPkYwU8IRUDyCA2kXsN8EU.jpg" alt="" /> <img id="zoom2" src="http://ekladata.com/UhpW3IvsSekawG1paOKZ6Y2G6wc.jpg" alt="" /> <img id="zoom3" src="http://ekladata.com/woZ4tIJEhdq8VkFda2pyRdYkPcA.jpg" alt="" /> <img id="zoom4" src="http://ekladata.com/GcB-6uF792I_V3cYYjbKNosArxw.jpg" alt="" /></p>

    <style><!--
    #cde1,#cde2,#cde3,#cde4{position:relative; z-index:1; width:12vw; height:6.75vw; border:0.4vh solid white; box-shadow:0.4vh 0.4vh 0.6vh black; margin:0.5vw 1.5vw 0 0;}
    #zoom1,#zoom2,#zoom3,#zoom4{position:fixed; z-index:5; width:100vw; height:0vw; top:0; left:0; transition:all 1s linear;}
    #cde1:active ~ #zoom1,#cde2:active ~ #zoom2,#cde3:active ~ #zoom3,#cde4:active ~ #zoom4{height:56.25vw;}
    --></style>

    Le cadre avec bordure et couleur de fond est facultatif.

    Comme vous le voyez, le code n'est pas des plus complexes.

    Par contre, il faut limiter les nombre d'images car le poids de votre article pourrait ralentir son affichage sur des connexions lentes.