En poursuivant votre visite de ce site, vous acceptez l'utilisation de cookies pour permettre ses différents services. Voir les Mentions légales.
 
 
 
Vous êtes ici :   Accueil » Slideshow Accordion css intégré ou en Iframe responsive
 
 
 
    Imprimer la page...
    Imprimer la section...

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.

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>
<!-- https://tympanus.net/codrops/2012/06/06/image-accordion-with-css3/ par Rey Wang -->
<!-- info licence : https://tympanus.net/codrops/licensing/ -->
<!-- Aménagements pour intégration dans un Iframe Responsive par JeanDenis https://www.71site.fr/ 2018 -->
<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">
    
    <!--///////////////////////////////////////////////////////////////////////////////////////////////////
    //        Styles
    ///////////////////////////////////////////////////////////////////////////////////////////////////-->
    
<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 #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(74, 74, 74, 0.1); /*couleur fond bandes images au survol*/
}

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

    <!--////////////////////////////////////////////////////////////////
    //        Corps de la page -  Source des images / Liens hypertextes
    //////////////////////////////////////////////////////////////////-->

<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><!-- ia-container -->


</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

<div style="margin: auto; width:90%; text-align:center;">
    <div class="iframe-responsive-wrapper">
        <img class="iframe-ratio" src="img/ratio690x500.gif" />
        <iframe frameborder="0" height="200" marginheight="0" marginwidth="0" scrolling="no" src="img/Images-Accordion.html" width="276"></iframe>
    </div>
</div>

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 : Astuces - Carousels
Page lue 60696 fois


Réactions à cet article


Personne n'a encore laissé de commentaire.
Soyez donc le premier !