Slideshow Accordion css intégré ou en Iframe responsive

Un slideshow avec des images "Accordion" en CSS

La proposition ci-dessous est de Rey Wang, on peut la trouver sur ce site.

info licence : https://tympanus.net/codrops/licensing/

Les images présentées dans les deux exemples sont libres de droits et issues de ce site : https://unsplash.com/

Le premier exemple reprend assez fidèlement la proposition, mais il n'est qu'imparfaitement "responsive design". Il faut adapter, dans le code source, les valeurs à plusieurs tailles d'écran. Son avantage est que l'on peut régler certains paramètres directement dans le code source de GuppY.

Le second est parfaitement "responsive design"... mais il est écrit dans un fichier .html appelé dans un Iframe responsive (voir donc impérativement cet article au préalable). Les réglages sont à peu près les mêmes, mais il faut les effectuer dans le fichier .html (avec notepad++ par exemple) et il utilise une unité proportionnelle vw à la largeur de l'affichage de la page : Information trouvée ici.

Toutes les images de ce tutoriel ont comme dimensions : 335 x 480 pixels. Elles sont placées dans un dossier ImagesAccordion mis dans le dossier img à la racine de GuppY (mais vous pouvez adapter tous ces chemins). Le premier exemple contient 7 images et le second contient 8 images. Un dossier contenant toutes ces images, ainsi que les fichiers nécessaires à l'intégration dans un Iframe responsive est disponible au téléchargement ici pour tester ce slideshow.

Premier exemple : dans le code source

Ci-dessous le code du style css et le code source du premier exemple d'Accordion.

Style

figure { /*!!IMPORTANT NE PAS MODIFIER!!*/
    margin: 0;
   -webkit-margin-before: 0;
   -webkit-margin-after: 0;
   -webkit-margin-start: 0;
   -webkit-margin-end: 0;
}

.ia-container { /*attributs du conteneur 705px en tout, ici : 695px + 5px + 5px */
   width: 695px; /*largeur, ici : 335px + 6x60px */
   margin: 20px auto; /*marges extérieures*/
   overflow: hidden;
   box-shadow: 1px 1px 4px rgba(0,0,0,0.08); /*ombre portée*/
   border: 5px solid rgba(194,102,46,0.9); /*largeur nature et couleur bordure*/
}

.ia-container figure {
    position: absolute;
   top: 0;
   left: 60px; /* = largeur parties visibles*/
   width: 335px; /* = largeur image*/
    box-shadow: 0 0 0 1px rgba(255,255,255,0.6); /*ombre portée*/
   -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out; /*temps et nature transition*/
}

.ia-container > figure {
position: relative;
left: 0 !important;
}

.ia-container img {
display: block;
width: 100%;
}

.ia-container input {
   position: absolute;
   top: 0;
   left: 0;
   width: 60px; /* = largeur parties visibles*/
   height: 100%;
   cursor: pointer;
   border: 0;
   padding: 0;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
   z-index: 100;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
}
.ia-container input:checked{
   width: 5px;
   left: auto;
   right: 0px;
}
.ia-container input:checked ~ figure {
   -webkit-transition: all 0.7s ease-in-out;
    -moz-transition: all 0.7s ease-in-out;
    -o-transition: all 0.7s ease-in-out;
    -ms-transition: all 0.7s ease-in-out;
    transition: all 0.7s ease-in-out; /*temps et nature transition*/
   left: 335px; /* = largeur image*/
}

.ia-container figcaption { /*attributs figcaption*/
   width: 100%;
   height: 100%;
   background: rgba(87, 73, 81, 0.3); /*couleur fond bandes images*/
   position: absolute;
   top: 0px;
   -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    transition: all 0.2s linear; /*temps et nature transition*/
}

.ia-container figcaption span { /*attributs du texte span*/
   position: absolute;
   top: 40%; /*position de départ*/
   margin-top: -30px; /*marge extérieure haute*/
   right: 20px; /*positions*/
   left: 20px;
   overflow: hidden;
   text-align: center; /*texte centré*/
   background: rgba(87, 73, 81, 0.5); /*couleur fond*/
    font-size: 20px; /*taille police*/
   -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
   text-transform: uppercase; /*tout en majuscule*/
   letter-spacing: 4px; /*écartement lettres*/
   font-weight: 700; /*gras de la police*/
   padding: 20px; /*marges intérieure*/
   color: #fff; /*couleur police*/
   text-shadow: 1px 1px 1px rgba(0,0,0,0.1); /*ombre portée*/
}

.ia-container input:checked + figcaption,
.ia-container input:checked:hover + figcaption{
background: rgba(87, 73, 81, 0); /*couleur fond de l'image affichée, ici : transparent*/
}

.ia-container input:checked + figcaption span {
   -webkit-transition: all 0.4s ease-in-out 0.5s;
    -moz-transition: all 0.4s ease-in-out 0.5s;
    -o-transition: all 0.4s ease-in-out 0.5s;
    -ms-transition: all 0.4s ease-in-out 0.5s;
    transition: all 0.4s ease-in-out 0.5s; /*temps et nature transition*/
   -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=99)";
    filter: alpha(opacity=99);
   opacity: 1;
   top: 50%; /*position texte affiché*/
}

.ia-container #ia-selector-last:checked + figcaption span {
   -webkit-transition-delay: 0.3s;
   -moz-transition-delay: 0.3s;
   -o-transition-delay: 0.3s;
   -ms-transition-delay: 0.3s;
   transition-delay: 0.3s; /*délai transition*/
}

.ia-container input:hover + figcaption {
background: rgba(87, 73, 81, 0.1); /*couleur fond bandes images au survol*/
}

.ia-container input:checked ~ figure input{
z-index: 1;
}

@media screen and (max-width: 720px) { /*adaptation pour taille max 720px*/
    .ia-container {
       width: 530px; /*largeur, ici : 260px + 6x45px */
   }

   .ia-container figure {
       left: 45px; /* = largeur parties visibles*/
       width: 260px; /* = largeur image*/
   }

   .ia-container input {
       width: 45px; /* = largeur parties visibles*/
   }

   .ia-container input:checked ~ figure {
       left: 260px; /* = largeur image*/
   }

   .ia-container figcaption span {
       font-size: 16px; /*taille police*/
   }
} /*fin adaptation pour taille max 720px*/

@media screen and (max-width: 520px) { /*adaptation pour taille max 520px*/
    .ia-container {
       width: 330px; /*largeur, ici : 180px + 6x25px */
   }

   .ia-container figure {
       left: 25px; /* = largeur parties visibles*/
       width: 180px; /* = largeur image*/
   }

   .ia-container input {
       width: 25px; /* = largeur parties visibles*/
   }

   .ia-container input:checked ~ figure {
       left: 180px; /* = largeur image*/
   }

   .ia-container figcaption span {
       font-size: 12px; /*taille police*/
       letter-spacing: 2px; /*écartement lettres*/
       padding: 10px; /*marges intérieure*/
       margin-top: -20px; /*marge extérieure haute*/
   }
} /*fin adaptation pour taille max 520px*/

Code du corps de l'article

<div class="ia-container">
<figure><img alt="image01" src="img/ImagesAccordion/1.jpg" /> <input checked="checked" name="radio-set" type="radio" />
<figcaption><a href="https://unsplash.com/" target="_blank" title="unsplash.com"><span>Abigail Lynn</span></a></figcaption>

<figure><img alt="image02" src="img/ImagesAccordion/2.jpg" /> <input name="radio-set" type="radio" />
<figcaption><a href="https://unsplash.com/" target="_blank" title="unsplash.com"><span>Brian Kraus</span></a></figcaption>

<figure><img alt="image03" src="img/ImagesAccordion/3.jpg" /> <input name="radio-set" type="radio" />
<figcaption><a href="https://unsplash.com/" target="_blank" title="unsplash.com"><span>Hassan Bashiri</span></a></figcaption>

<figure><img alt="image04" src="img/ImagesAccordion/4.jpg" /> <input name="radio-set" type="radio" />
<figcaption><a href="https://unsplash.com/" target="_blank" title="unsplash.com"><span>Jayden Chong</span></a></figcaption>

<figure><img alt="image05" src="img/ImagesAccordion/5.jpg" /> <input name="radio-set" type="radio" />
<figcaption><a href="https://unsplash.com/" target="_blank" title="unsplash.com"><span>Mark Alexandrovich</span></a></figcaption>

<figure><img alt="image06" src="img/ImagesAccordion/6.jpg" /> <input name="radio-set" type="radio" />
<figcaption><a href="https://unsplash.com/" target="_blank" title="unsplash.com"><span>Pierre Chatel</span></a></figcaption>

<figure><img alt="image07" src="img/ImagesAccordion/7.jpg" /> <input id="ia-selector-last" name="radio-set" type="radio" />
<figcaption><a href="https://unsplash.com/" target="_blank" title="unsplash.com"><span>Simone Hutsch</span></a></figcaption>

</figure>
   </figure>
   </figure>
   </figure>
   </figure>
   </figure>
   </figure>
</div>

Code simplifié pour 3 images

<div class="ia-container">
<figure><img alt="image1" src="img/.../image1.jpg" /> <input checked="checked" name="radio-set" type="radio" />
<figcaption><span>Titre1</span></figcaption>

<figure><img alt="image2" src="img/.../image2.jpg" /> <input name="radio-set" type="radio" />
<figcaption><span>Titre2</span></figcaption>

<figure><img alt="image3" src="img/.../image3.jpg" /> <input id="ia-selector-last" name="radio-set" type="radio" />
               <figcaption><span>Titre3</span></figcaption>

           </figure>
       </figure>
   </figure>
</div>

Le style est à ajouter dans votre fichier styleplus.css ou au début du code source de votre article, et dans ce cas, il faut placer les balises <style type="text/css"> au début du code source et </style> à la fin du style.

La largeur du conteneur avec N images est obtenue en additionnant la largeur d'une image et (N-1) fois la largeur d'une bande, ici 335px + (6 x 60px) pour 7 images dans son affichage le plus large. Et il y a des adaptations à prévoir pour des écrans de largeurs différentes (ici, voir les dimensions dans le style pour max-width 720px et max-width 520px)

Le code du corps de l'article est à placer, dans le code source de l'article ou de la boite libre, à l'endroit où vous souhaitez voir s'afficher ce slideshow. Les parties surlignées en blanc sont à adapter à votre configuration. Notez bien l'imbrication des <figure></figure> dans le code source, et, dans les balises <input... /> :
checked="checked" pour l'image que l'on veut voir déployée à l'affichage
id="ia-selector-last" pour la dernière image du slideshow.

Second exemple : dans un Iframe responsive

Le code du fichier Images-Accordion.html

<!DOCTYPE html>



<html lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
    <title>Images Accordion</title>
    <meta name="description" content="Slideshow, Accordion, css3, css-only">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    

<style>
body {
   background:transparent;
   font-family: sans-serif; /*adapter ou supprimer*/
}
a {
   text-decoration:none;
   color:#DFDFDF; /*couleur lien*/
}
a:hover {
   color:#FFF; /*couleur lien au survol*/
}
figure { /*!!IMPORTANT NE PAS MODIFIER!!*/
    margin: 0;
   -webkit-margin-before: 0;
   -webkit-margin-after: 0;
   -webkit-margin-start: 0;
   -webkit-margin-end: 0;
}

.ia-container { /*attributs du conteneur 100vw en tout, ici : 99vw + 0.5vw + 0.5vw */
   width: 99vw; /*largeur, ici : 50vw + 7x7vw */
   margin:0;
   overflow: hidden;
   border: 0.5vw solid rgba(194,102,46,0.9); /*largeur nature et couleur bordure*/
}

.ia-container figure {
    position: absolute;
   top: 0;
   left: 7vw; /* = largeur parties visibles*/
   width: 50vw; /* = largeur image*/
    box-shadow: 0 0 0 1px rgba(255,255,255,0.6); /*ombre portée*/
   -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out; /*temps et nature transition*/
}

.ia-container > figure {
position: relative;
left: 0 !important;
}

.ia-container img {
display: block;
width: 100%;
}

.ia-container input {
   position: absolute;
   top: 0;
   left: 0;
   width: 7vw; /* = largeur parties visibles*/
   height: 100%;
   cursor: pointer;
   border: 0;
   padding: 0;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
   z-index: 100;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
}
.ia-container input:checked{
   width: 1vw;
   left: auto;
   right: 0vw;
}
.ia-container input:checked ~ figure {
   -webkit-transition: all 0.7s ease-in-out;
    -moz-transition: all 0.7s ease-in-out;
    -o-transition: all 0.7s ease-in-out;
    -ms-transition: all 0.7s ease-in-out;
    transition: all 0.7s ease-in-out; /*temps et nature transition*/
   left: 50vw; /* = largeur image*/
}

.ia-container figcaption { /*attributs figcaption*/
   width: 100%;
   height: 100%;
   background: rgba(74, 74, 74, 0.3); /*couleur fond bandes images*/
   position: absolute;
   top: 0vw;
   -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    transition: all 0.2s linear; /*temps et nature transition*/
}

.ia-container figcaption span { /*attributs du texte span*/
   position: absolute;
   top: 100%; /*position de départ*/
   margin-top: -3vw; /*marge extérieure haute*/
   right: 2vw; /*positions*/
   left: 2vw;
   overflow: hidden;
   text-align: center; /*texte centré*/
   background: rgba(74, 74, 74, 0.5); /*couleur fond*/
   font-size: 4vw; /*taille police*/
   -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
   text-transform: uppercase; /*tout en majuscule*/
   letter-spacing: .2vw; /*écartement lettres*/
   font-weight: 700; /*gras de la police*/
   padding: 2vw; /*marges intérieure*/
   color: #fff; /*couleur police*/
   text-shadow: 1px 1px 1px rgba(0,0,0,0.1); /*ombre portée*/
}

.ia-container input:checked + figcaption,
.ia-container input:checked:hover + figcaption{
background: rgba(74, 74, 74, 0); /*couleur fond de l'image affichée, ici : transparent*/
}

.ia-container input:checked + figcaption span {
   -webkit-transition: all 0.4s ease-in-out 0.5s;
    -moz-transition: all 0.4s ease-in-out 0.5s;
    -o-transition: all 0.4s ease-in-out 0.5s;
    -ms-transition: all 0.4s ease-in-out 0.5s;
    transition: all 0.4s ease-in-out 0.5s;   /*temps et nature transition*/
   -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=99)";
    filter: alpha(opacity=99);
   opacity: 1;
   top: 80%; /*position texte affiché*/
}

.ia-container input:hover + figcaption {
background: rgba(74, 74, 74, 0.1); /*couleur fond bandes images au survol*/
}

.ia-container input:checked ~ figure input{
z-index: 1;
}
</style>
</head>

<body>

<div class="ia-container">
<figure><img alt="image01" src="ImagesAccordion/P1.jpg" /> <input checked="checked" name="radio-set" type="radio" />
<figcaption><span><a href="https://unsplash.com/" target="_blank" title="unsplash.com">Andrik Langfield</a></span></figcaption>

<figure><img alt="image02" src="ImagesAccordion/P2.jpg" /> <input name="radio-set" type="radio" />
<figcaption><span><a href="https://unsplash.com/" target="_blank" title="unsplash.com">Aneta Pawlik</a></span></figcaption>

<figure><img alt="image03" src="ImagesAccordion/P3.jpg" /> <input name="radio-set" type="radio" />
<figcaption><span><a href="https://unsplash.com/" target="_blank" title="unsplash.com">Catarina Carvalho</a></span></figcaption>

<figure><img alt="image04" src="ImagesAccordion/P4.jpg" /> <input name="radio-set" type="radio" />
<figcaption><span><a href="https://unsplash.com/" target="_blank" title="unsplash.com">Isabel Garger</a></span></figcaption>

<figure><img alt="image05" src="ImagesAccordion/P5.jpg" /> <input name="radio-set" type="radio" />
<figcaption><span><a href="https://unsplash.com/" target="_blank" title="unsplash.com">Joshua Hibbert</a></span></figcaption>

<figure><img alt="image06" src="ImagesAccordion/P6.jpg" /> <input name="radio-set" type="radio" />
<figcaption><span><a href="https://unsplash.com/" target="_blank" title="unsplash.com">Juan-Carlos Garces</a></span></figcaption>

<figure><img alt="image07" src="ImagesAccordion/P7.jpg" /> <input name="radio-set" type="radio" />
<figcaption><span><a href="https://unsplash.com/" target="_blank" title="unsplash.com">Kristaps Grundsteins</a></span></figcaption>

<figure><img alt="image08" src="ImagesAccordion/P8.jpg" /> <input id="ia-selector-last" name="radio-set" type="radio" />
<figcaption><span><a href="https://unsplash.com/" target="_blank" title="unsplash.com">Tamara Budai</a></span></figcaption>

</figure>
</figure>
</figure>
</figure>
</figure>
</figure>
</figure>
</figure>
</div>

</body>
</html>

Ce fichier est placé dans le dossier img à la racine de GuppY, l'appel aux images est rédigé en conséquence et il faut l'adapter à votre configuration. Sinon, vous retrouverez exactement les même réglages que pour le premier exemple. Mais il n'y a plus de réglage pour des largeurs d'écran différentes puisque l'affichage est proportionnel.

Et toujours : La largeur du conteneur avec N images est obtenue en additionnant la largeur d'une image et (N-1) fois la largeur d'une bande, et donc ici 50vw + (7 x 7vw) pour 8 images.

Le code d'intégration de l'Iframe dans l'article

Une image transparente ratio690x500.gif est appelée pour fixer le ratio de l'Iframe et ses dimensions minimales sont fixées : 276x200 (de même ratio évidemment). Ces dimensions 690 et 500 correspondent à un peu plus que la largeur et la hauteur en pixels du conteneur, peut-être vous faudra-t-il tâtonner un peu... wink

Rappel : un dossier contenant toutes les images de ce tutoriel, le fichier Images-Accordion.html, et l'image ratio690x500.gif est disponible au téléchargement ici.

Me contacter sur le forum de ce site pour toute question ou aide pour utiliser ces procédures.

Date de création : 05/12/2018 @ 13:23
Catégorie : - Carousels
Page lue 88158 fois

Bienvenue !

Et les navigateurs ?

Skins série "Transparences" présentées avec Camera !

Camera : slider développé par Manuel Masia

À quoi servent ces iFrames ?

Des bandeaux avec des cellules (tuiles) indépendantes

Trois AudioPlayers

Quelques exemples d'effets obtenus au survol

... et bien d'autres encore, suivez ces liens...

Astuces en pur CSS

Slideshow Accordion css intégré ou en Iframe responsive

Style

Code du corps de l'article

Code simplifié pour 3 images

Préférences

Lettre d'information

Webmaster - Infos