• Frise 1

    Sur le principe de l'Album Photos déjà présenté, nous avons vu que nous pouvions présenter les vignettes sous différentes formes; ici, en losange.

    Le nombre de vignettes et leur taille est à votre convenance mais attention au poids total de votre article, pour les connexions lentes.

    Si l'agrandissement est en plein écran, le survol convient . Comme l'agrandissement plein écran se fait avec comme référence l'angle haut/gauche de votre écran, vous devrez positionner le montage sur le côté gauche de votre page.

    Si l'agrandissement est en taille plus réduite et centré dans la page, le clic maintenu est nécessaire. Avec cette commande, vous pouvez centrer votre montage dans votre page.

    Un rappel: lorsque vous maintenez le clic usr un vignette, déplacez légèrement votre souris: la vignette apparaît en surimpression et l'image agrandie reste affichée sans avoir à maintenir le clie.

    Un second clic dessus la réduit.

    <div style="width: 60vw; height: 8vw; border: 0.1vh solid black; text-align: left; margin:1vh auto;">
    <img id="dis1" class="dis" src="http://ekladata.com/YmQYB0uelJtANifszQg0AEPcDT0.jpg" alt="" />
    <img id="dis2" class="dis" src="http://ekladata.com/2VZVbaYrxN-lvzwLD_mBmAoxzW8.jpg" alt="" />
    <img id="dis3" class="dis" src="http://ekladata.com/Bqgwsdb4aako8d7IeirX7bBE5mM.jpg" alt="" />
    <img id="dis4" class="dis" src="http://ekladata.com/NWqSelXeSICFY74MGBGnrW_AuFo.jpg" alt="" />
    <img id="dis5" class="dis" src="http://ekladata.com/CHqnarDoERsvKWoyaZ0hFV-lzG4.jpg" alt="" />
    <img id="dis6" class="dis" src="http://ekladata.com/7PjW1c8mECaTXomLOtehwL4t9Yw.jpg" alt="" />
    <img id="dis7" class="dis" src="http://ekladata.com/Bti8FU3x4eQVOwPFdYWOgqXu6MU.jpg" alt="" />
    </div>
    <style><!--
    .dis{position:absolute; z-index:1; width:8vw; height:4.5vw; border:0.4vh solid white; transition:all 1s linear;}
    #dis1{box-sizing:border-box; transform:translate(0vw,2vw) skewy(20deg);}
    #dis2{box-sizing:border-box; transform:translate(8vw,2vw) skewy(-20deg);}
    #dis3{box-sizing:border-box; transform:translate(16vw,2vw) skewy(20deg);}
    #dis4{box-sizing:border-box; transform:translate(24vw,2vw) skewy(-20deg);}
    #dis5{box-sizing:border-box; transform:translate(32vw,2vw) skewy(20deg);}
    #dis6{box-sizing:border-box; transform:translate(40vw,2vw) skewy(-20deg);}
    #dis7{box-sizing:border-box; transform:translate(48vw,2vw) skewy(20deg);}
    #dis1:hover,#dis2:hover,#dis3:hover,#dis4:hover,#dis5:hover,#dis6:hover,#dis7:hover{z-index:5; width:100vw; height:56.25vw; border:none; transform:translate(0vw,-12vw) skewy(0deg);}
    --></style>