• Album photos

     

    Une visite sur les belles pages de Vadou, un fidèle visiteur, me fait vous proposer cette structure pour vos albums photos.


    Le système automatique fonctionne au clic sur une même page, dans son cas; résultat, en cliquant sur une vignette, vous l'agrandissez en plein écran et devez revenir en arrière pour afficher l'album photos et cliquer sur une autre vignette et ainsi de suite.

    Avec ce code, vous agrandissez la vignette par un clic maintenu; la taille de l'affichage en grand et à votre convenance (ici, 60% de la largeur de votre écran), de même que son positionnement et le nombre de vignettes.


    Vous devrez adapter ce positionnement en fonction de votre article pour que l'image se superpose à votre texte en restant dans les limites de votre article: la vignette doit remonter sur ce qui précède ou descendre sur ce qui suit, selon votre article.

    En relâchant le clic, vous revenez sur l'album pour cliquer sur une autre vignette.

    Dans cet exemple, j'ai placé 10 images au ratio 16/9 horizontale mais on peut faire ce que l'on veut puisque chaque image est placée en indépendant (position:absolute).

    Clic maintenu

     

    <div style="width: 60vw; height: 13.5vw; margin: 1vh auto; text-align: left;">
    <p style="width: 60vw; height: 13.5vw;"><img id="vad1" class="vad" src="http://ekladata.com/lwI3v-a2cQDC_DwhzwXAJMfXtuQ.jpg" alt="" /><img id="vad2" class="vad" src="http://ekladata.com/4F-_ASuY0eAGZhbzPbunjEvm3yU.jpg" alt="" /><img id="vad3" class="vad" src="http://ekladata.com/5ZYCYkI3PRDRTm-x0-yrJzI_bj0.jpg" alt="" /><img id="vad4" class="vad" src="http://ekladata.com/YkFc1QsJmL9p_uNqDM_ER5Lw8KQ.jpg" alt="" /><img id="vad5" class="vad" src="http://ekladata.com/twAFJE63wiLJcF6lNla64KwsF6Y.jpg" alt="" /><img id="vad6" class="vad" src="http://ekladata.com/QS7B20dxPZn632vQ7o6wQrO_QAs.jpg" alt="" /><img id="vad7" class="vad" src="http://ekladata.com/3NYdKVf5n67NzlcOUI35BKRgCwc.jpg" alt="" /><img id="vad8" class="vad" src="http://ekladata.com/1hJMtwksF8t3z2Fh3AaN7g9zKdc.jpg" alt="" /><img id="vad9" class="vad" src="http://ekladata.com/TU2eQbyuasr4IuZxYMEo76GafMY.jpg" alt="" /><img id="vad10" class="vad" src="http://ekladata.com/BwzvyPgXq5g9QJ0y9te_RCfrVZA.jpg" alt="" /></p>
    </div>
    <style><!--
    .vad{position:absolute; z-index:1; width:12vw; height:6.75vw; border:0.4vh solid white; transition:all 1s linear;}
    #vad1{transform:translate(0vw,0vw); box-sizing:border-box;}
    #vad2{transform:translate(12vw,0vw);box-sizing:border-box; }
    #vad3{transform:translate(24vw,0vw); box-sizing:border-box;}
    #vad4{transform:translate(36vw,0vw); box-sizing:border-box;}
    #vad5{transform:translate(48vw,0vw); box-sizing:border-box;}
    #vad6{transform:translate(0vw,6.75vw); box-sizing:border-box;}
    #vad7{transform:translate(12vw,6.75vw); box-sizing:border-box;}
    #vad8{transform:translate(24vw,6.75vw); box-sizing:border-box; }
    #vad9{transform:translate(36vw,6.75vw); box-sizing:border-box; }
    #vad10{transform:translate(48vw,6.75vw); box-sizing:border-box; }
    #vad1:active,#vad2:active,#vad3:active,#vad4:active,#vad5:active,#vad6:active,#vad7:active,#vad8:active,#vad9:active,#vad10:active{z-index:5; width:60vw; height:33.75vw; transform:translate(0vw,-20vw);}
    --></style>