• Diapo 9 images défilement click numéro sans javascript

     

    Ce diaporama est prévu pour 9 images de 486 pixels  par 286 px.

    Voilà comment je procède:
    -Insérer les images dans un article avec le bouton "insérer image" de l'éditeur d'article. Si elles ne sont pas aux mêmes dimensions, les redimensionner dans l'éditeur ( en conservant le même rapport largeur/hauteur sinon, elles seront déformées).
    -Passer par le bouton <> code source de l'éditeur d'article et copier dans la source le code donné ci dessous.
    -Toujours dans l'éditeur article coté codesource, récupérer l'adresse des images insérées pour remplacer l'adresse de mes images en rouge ci dessous par l'adresse des vôtres.
    -Par la suite, en enregistrant la page code source, repasser coté normal de l'éditeur, vérifier le fonctionnement du diaporama et supprimer les images insérées hors diapo.

     

     

     

     

    <!--DEBUT HTML DIAPORAMA 9-->

    <div id="css3-slider">

    <ul>

    <li><input id="s1" checked="checked" name="num" type="radio" /> <label for="s1">1</label> <a href="/"> <img src="http://ekladata.com/hor3pKneySR4A3TSgZKxmn2C0I0.jpg" alt="Tabby brun" /> </a></li>

    <li><input id="s2" name="num" type="radio" /> <label for="s2">2</label> <a href="/"> <img src="http://ekladata.com/TGuYhPN8XnaBNwC8e2K8_3hQDhg.jpg" alt="Pigeon" /> </a></li>

    <li><input id="s3" name="num" type="radio" /> <label for="s3">3</label> <a href="/"> <img src="http://ekladata.com/a_Ap6MB27A_vlnYYnOqMC6EsyiQ.jpg" alt="&Eacute;cureuil" /> </a></li>

    <li><input id="s4" name="num" type="radio" /> <label for="s4">4</label> <a href="/"> <img src="http://ekladata.com/QuoWOqbdLN8NZKJGW4a13LuRpPA.jpg" alt="titre image4" /> </a></li>

    <li><input id="s5" name="num" type="radio" /> <label for="s5">5</label> <a href="/"> <img
    src="http://ekladata.com/oOcb7gcY0uzS-Q307aVNdiPJETc.jpg" alt="titre image5" /> </a></li>

    <li><input id="s6" name="num" type="radio" /> <label for="s6">6</label> <a href="/"> <img src="http://ekladata.com/zBW8zms6Ax_I0Zcp40Sw7qCk1NA.jpg" alt="titre image6" /> </a></li>

    <li><input id="s7" name="num" type="radio" /> <label for="s7">7</label> <a href="/"> <img src="http://ekladata.com/hor3pKneySR4A3TSgZKxmn2C0I0.jpg" alt="titre image7" /> </a></li>

    <li><input id="s8" name="num" type="radio" /> <label for="s8">8</label> <a href="/"> <img src="http://ekladata.com/QQVu3dWY_NS21iWwVWEm0EnTLEI@600x200.jpg" alt="titre image8" /> </a></li>

    <li><input id="s9" name="num" type="radio" /> <label for="s9">9</label> <a href="/"> <img
    src="http://ekladata.com/Oj-_QJh0hwc7NDtC2J2jAXOj5o4.jpg" alt="Titre image 9" /> </a></li>

    </ul>

    </div>

    <style><!--

    /****************** CODE CSS*******************/

    #css3-slider {

      margin:30px auto;

      padding:0px 0px;

      width:448px;

      height:286px;

      position:relative;

    }

    #css3-slider li {

      list-style:none;

      margin:0px 0px;

      padding:0px 0px;

    }

    #css3-slider li input + label {

      position:absolute;

      bottom:0px;

      left:10px;

      z-index:100;

      font:bold 11px/16px Arial,Sans-Serif;

      background-color:black;

      color:white;

      padding:0px 0px;

      width:16px;

     border-radius: 8px;

      text-align:center;

      cursor:pointer;

    }

    #css3-slider li:nth-child(1) label {left:28px; }

    #css3-slider li:nth-child(2) label {left:46px; }

    #css3-slider li:nth-child(3) label {left:64px; }

    #css3-slider li:nth-child(4) label {left:82px; }

    #css3-slider li:nth-child(5) label {left:100px; }

    #css3-slider li:nth-child(6) label {left:118px;}

    #css3-slider li:nth-child(7) label {left:136px;}

    #css3-slider li:nth-child(8) label {left:154px;}

    #css3-slider li:nth-child(9) label {left:172px;}

     

    #css3-slider li img {

     border: 10px ridge gray;

      outline:none;

      position:absolute;

      top:50%;

      left:50%;

      width:0px;

      height:0px;

      visibility:hidden;

      opacity:0;

      -webkit-transition:all 2s ease-in-out;

      -moz-transition:all 2s ease-in-out;

      -ms-transition:all 2s ease-in-out;

      -o-transition:all 2s ease-in-out;

      transition:all 2s ease-in-out;

      -webkit-transform:rotate(0deg) scale(0);

      -moz-transform:rotate(0deg) scale(0);

      -ms-transform:rotate(0deg) scale(0);

      -o-transform:rotate(0deg) scale(0);

      transform:rotate(0deg) scale(0);

    }

    #css3-slider a {

      text-decoration:none !important;

    }

     

    #css3-slider li a span {

      cursor:default;

      display:block;

      position:absolute;

      right:0px;

      bottom:0px;

      left:0px;

      background-color:rgba(0,0,0,0.8);

      font:normal 11px/26px Arial,Sans-Serif;

      color:white;

      padding:0px 10px;

      text-align:right;

      opacity:0;

      viibility:hidden;

      -webkit-transition:all 2s ease-in-out;

      -moz-transition:all 2s ease-in-out;

      -ms-transition:all 2s ease-in-out;

      -o-transition:all 2s ease-in-out;

      transition:all 2s ease-in-out;

    }

    #css3-slider li input:checked + label {

      background-color:white;

      color:black;

     box-shadow: 

            -1px 2px 5px 1px rgba(0, 0, 0, 0.7),                      

            -1px 2px 20px yellow inset;

    }

    #css3-slider li input:checked ~ img,

    #css3-slider li input:checked ~ a img {

      top:0%;

      left:0%;

      width:448px;

      height:286px;

      visibility:visible;

      -webkit-transform:rotate(720deg) scale(1);

      -moz-transform:rotate(720deg) scale(1);

      -ms-transform:rotate(720deg) scale(1);

      -o-transform:rotate(720deg) scale(1);

      transform:rotate(720deg) scale(1);

      opacity:1;

      z-index:99;

    }

    #css3-slider li input:checked ~ a span {

      opacity:1;

      z-index:100;

    }

    #css3-slider input {

     display:none;}

    --></style>

    <!-- FIN DIAPORAMA 9-->

    « Contenu du module qui se déroule au survol sourisJolies bordures - image »
    Partager via Gmail Yahoo! Google Bookmarks

    Tags Tags :
  • Commentaires

    1
    Dimanche 15 Mars 2015 à 12:03

    Bonjour,
    Est-ce qu'il serait possible d'avoir les codes html et css utilisés pour ce diaporama ?
    En tout cas le blog est très sympa et rempli d'astuces, merci beaucoup !

    2
    Lundi 16 Mars 2015 à 10:45

    Bonjour Eli Proc, 

    Ce diaporama est prévu pour 9 emplacements d'images au format de 448px de large par 286 px de haut.

    Tu insères tout d'abord les images dans l'article, afin d'avoir sous la main leur adresse http:/ pour remplir la partie html du code à ajouter via le bouton <> code source de l'éditeur d'article.

    Je vais ajouter le code dans l'article.
    Si tu rencontres quelques difficultés, n'hésites pas à en faire part ..

    3
    Samedi 21 Mars 2015 à 16:41

    Merci beaucoup pour la réponse et le code ! :D

    4
    Vendredi 22 Mai 2015 à 22:28

    Bonjour!

    J'ai essayer le code css et il ne marche pas, il dit qu'il y a une erreur es-ce normale? ^^"

    Aprioris c'est les 3 derniers codes qui pose problème...

    Merci pour le diapo! 8D

    5
    Jeudi 28 Mai 2015 à 12:30

    Bonjour Miss louna et désolé pour le retard de réponse,

     

    je viens de faire un essai en copiant le code html dans un article et le dipaorama fonctionne.

    le code donné dans cet article est du html ( avec du CSS mais à l'intérieur du html) donc, pour avoir cet effet diapo, il faut copier coller ce code html dans l'éditeur d'article via le bouton <> "code source".

    Il n'y a rien à ajouter dans le CSS du blog car le style css de ce diapo est dans le code html ( l'éditeur de CSS ekla n'accepte pas certaines propriétés CSS)..

    Pour y mettre tes propres images , il te faut d'abord les héberger dans un article( laissé en hors-ligne) , récupérer leur adresse http et remplir/remplacer les lignes rouges  (adresses de mes images) dans le html donné dans cet article par ces adresses là

     

    6
    Jeudi 28 Janvier 2016 à 19:54

    Bonsoir et bravo pour ce montage.

    Je cherchais une façon simple de faire du onClick en CSS3 et ma recherche m'a amené vers vous.

    Je me suis permis de recopier votre code, dans un article, où je mentionne votre page, par un lien; si vous y voyez un inconvénient, merci de me le faire savoir.

    Partageant moi-même quelques codes, avec mes visiteurs, je pense que votre but est de partager vos montages, donc...

    Utilisant souvent des images en 800x600px, j'en ai modifié les dimensions et allégé les codes pour les différents navigateurs car je crois que cela s'est un peu standardisé.

    Merci encore.

    Gilbert

    7
    Vendredi 29 Janvier 2016 à 10:40

    Bonjour Gilbert, 

    En matière de CSS3 et de Diaporama, je sais que je n'ai rien à t'apprendre, tu ( on se tutoie ?) es le spécialiste et  ma référence.
    Je passe souvent chez toi et j'ai surement fait l'erreur ou l'impolitesse !  de ne pas me manifester ( comme tu le fais ici )
    Sur cet autre article à diaporama 
    http://bleulezard.eklablog.com/diapo-css-sans-javascript-defilement-clic-a108976428
    j'ai piqué un de tes codes en te mentionnant mais sans rien te dire !

    Peux-tu nous donner le lien de ton article car il est certain que tu as du l'optimiser.
    Ainsi, je mettrai à jour mon article qui date de quelques années ( pour les préfixes nav, quels sont ceux qui demeurent aujourd'hui nécessaires ?)
    et le lierai au tien.

    La longueur d'un  code   rebute certains blogueurs et on a tout intérêt à faire le plus court possible...

    A plus et bien sur que c'est toi que je remercie cool

     

     

     

     

     

    8
    Vendredi 5 Février 2016 à 19:05

    J'arrive de chez Gilbert ! merci pour ce code ke je vais testé pour une anie ki voudrait mettre des images pour la St Valentin

    je posterai chez elle le code avec ses images et des kel publiera je te donnerai le lien de son billet pour ke tu vois le résultat

    Encore merci !

    9
    Vendredi 5 Février 2016 à 19:06

    J'allais oublier; bien ton concept de blog , j'aime bien voir ce kon voit pas chez tout le monde ! bravo !!

    10
    Samedi 6 Février 2016 à 09:31

    Bonjour, 

    Merci La Gentille Rebelle pour ton passage et ton  comm sympa.

    Et je suis intéressé de voir ton diapo, enfin ...celui de ton amie.

    A plus donc

    11
    Dimanche 14 Février 2016 à 13:57

    Je te mets lien du billet de mon amie lol pour ki j'ai utilisé ton code mais avec ses images lol

    http://breiz11.eklablog.com/tourbillon-a-en-prerdre-la-tete-a124652628

    bon aprem et merci encore !!!!

    12
    Dimanche 14 Février 2016 à 19:58

    En effet , quel sacré tourbillon et pour la saint-valentin, c'est très à propos.

    Merci pour cet échange

    Bonne soirée

    13
    Dimanche 14 Février 2016 à 20:59

    mdr ! oui kel toubillon ! moi perso j'aurai pas fait avec ce genre d'images, mais yen a ki ose hihi!!!!

    bonne soirée



    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :


//script feuille de style suppl