En poursuivant votre visite de ce site, vous acceptez l'utilisation de cookies pour permettre ses différents services. Voir les Mentions légales.
 
 
  • Sur ce site, vous trouverez : Camera ! Évidemment...

    ...mais aussi des carousels : WaterwheelCarousel par exemple...

  • ... des informations sur les iFrames responsives

    Une solution élégante pour rendre les iFrames (cadres, dans lesquels on intègre d'autres pages) "responsive design" : Ils s'adapteront automatiquement et de manière proportionnelle à la dimension de la page.

    Lisez le tutoriel

    Lisez également ce tutoriel et aussi celui-là.

    pour créer un bandeau "responsive design", constitué de cellules indépendantes, au contenu varié, à placer en haut, en bas, dans la boite édito, dans un article...de votre site.

  • ...un Audio Player dans un Iframe... ...un autre, simple, intégré dans Guppy... et... JPlayer ... intégré, lui aussi.

  • ...des images qui changent au survol de la souris... ...par exemple :

    ...mais bien d'autres effets à découvrir, notamment celui que vous êtes en train d'utiliser...

  • ...et bien sûr des skins pour habiller vos sites GuppY V5...la série "Transparences" avec ici FeatureCarousel

  • Camera

    Camera

    ¤ Camera est un slider développé par Manuel Masia. On peut l'utiliser très facilement dans GuppY.

    Dans ses différentes options possibles, on peut faire varier les transitions, les apparitions de titres, les vignettes de pagination. Camera peut même intégrer des vidéos !

    Sur ce site quelques tutoriels pour mieux maitriser Camera.

    Informations Camera

    ¤ Deux carousels de Brian Osborne sont disponibles lisez les tutoriels dédiés : WaterwheelCarousel et FeatureCarousel.

  • iFrames

    iFrames responsives

    Une solution élégante pour rendre les iFrames (cadres, dans lesquels on intègre d'autres pages) "responsive design" : Ils s'adapteront automatiquement et de manière proportionnelle à la dimension de la page.

    Lisez le tutoriel

    Lisez également ce tutoriel et aussi celui-là.

    pour créer un bandeau "responsive design", constitué de cellules indépendantes, au contenu varié, à placer en haut, en bas, dans la boite édito, dans un article...de votre site.

  • Audio-Players

    Audio-Players

    ¤ Un Audio-player à mettre en place dans un iFrame. Léger et "customisable", quelques skins en téléchargement lui sont destinées.

    Lisez le tutoriel

    ¤ Un Audio-player simple avec playlist également peut être intégré directement dans GuppY.

    Lisez le tutoriel

    ¤ Un autre Audio-player (JPlayer) avec playlist également peut être intégré directement dans GuppY.

    Lisez le tutoriel

  • Effets au survol

    Effets au survol

    Des astuces amusantes, surtout en CSS, pour agrémenter les sites.

    Au survol de la souris : des images qui changent, qui pivotent et font apparaitre un nouveau contenu, les boutons déroulants offrant de nouvelles informations, une boîte-menu déroulante (celle-là même que vous utilisez)... et d'autres, à venir, sans doute.

    La possibilité aussi de personnaliser des infobulles dans une image mappée cliquable générée par Gimp (traitement d'image libre et gratuit). Lisez le tutoriel

    Des liens vers des tutoriels sont disponibles dans le menu "Astuces>Changements au survol"

  • Skins

    Skins pour GuppY V5

    Quelques skins sont disponibles en téléchargement pour habiller les sites GuppY. Elles sont toutes compatibles "Config Look" et adaptées aux dernières versions (GuppY 5.02.05 et +) moyennant quelques champs à compléter dans "Config Look". Elles peuvent être testées sur Démo-skins.

    Démo-skins

    Zone de téléchargement

 
Vous êtes ici :   Accueil » Slideshow Accordion css intégré ou en Iframe responsive
 
Prévisualiser...  Imprimer...  Imprimer la page...
Prévisualiser...  Imprimer...  Imprimer la section...
Recherche
 
Fermer

Calendrier

Astuces

Nouveau  Slideshow Accordion css intégré ou en Iframe responsive

rss Cet article est disponible en format standard RSS pour publication sur votre site web :
http://www.71site.fr/data/fr-articles.xml

Un slideshow avec des images "Accordion" en CSS

La proposition ci-dessous est de Rey Wang, on peut la trouver ici :
https://tympanus.net/codrops/2012/06/06/image-accordion-with-css3/

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
  • Code du corps de l'article
  • Code simplifié pour 3 images

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

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><!-- fin 3 -->
        </figure><!-- fin 2 -->
    </figure><!-- fin 1 -->
</div><!-- fin ia-container -->

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 http://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
Catégorie : Astuces - Carousels
Page lue 95 fois


Réactions à cet article


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

Vous êtes ici :   Accueil » Slideshow Accordion css intégré ou en Iframe responsive

Préférences


Se reconnecter :
Votre nom (ou pseudo) :
Votre mot de passe
<O>


  Nombre de membres 41 membres
Connectés :
( personne )
Snif !!!

Lettre d'information

Pour avoir des nouvelles de ce site, inscrivez-vous à notre Newsletter.

Avant de soumettre ce formulaire, veuillez lire et accepter les Mentions légales.

J'accepte :
Recopier le code :
15 Abonnés