SlidesShow Accueil

Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu SlidesShow Accueil

Message par Desolation Dim 15 Fév - 14:27

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome, Internet Explorer, Opera, Safari
Personnes concernées par le problème : Moi uniquement ( Car n'est pas encore déployé sur le forum)
Lien du forum : http://crazymocs.com

Description du problème


Bonjour le forum,
Voila je me suis lancé dans le projet de mettre en place un "Slideshow" avec ce topic sur mon forum seulement je rencontre un petit probleme dans le script (Script en Action) :

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml">
          <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>CRAZY MOCS</title>

            <style type="text/css">

    /**
       Juizy Slideshow
       @author: Geoffrey Crofte
       @date: 2011-12-07
       @from: self work http://creativejuiz.fr/trytotry
       @license: CreativeCommons (BY)
      
      
       ************* Changelog *************
      
       ** v.1.1.1 - 2012-02-27
       - Figcaption element hidden when you take the control
      
       ** v.1.1.0 - 2011-12-31
       - Caption of figure (figcaption element) display improvement
      
       ** v.1.0.0 - 2011-12-07
       - First version
      
    */



    body {
       width: 800px;
       margin: 0 auto;
       color:#777;
    }
    h1, h2 {
       text-align:center;
       margin-top:0;
    }
    h1 {
       padding: 1em 0;
       margin-left: 1.5em;
       font-size: 2.5em;
       font-family: 'Amaranth', Arial, Verdana, sans-serif;
    }
    h1 span {
       display:block;
       margin: 0.75em 0 0 -2em;
       line-height: 1em;
       font-size: 0.55em;
    }
    h1 .cursive {
       margin: 0 0 0 -3em;
       font-size: 1.1em;
       line-height:0.5em;
       color: #bd9b83;
    }
    figure {
       display: inline-block;
    }
    a {
       text-decoration: none;
       border-bottom: 1px solid #bc9d88;
       color: #8f6b51;
    }
    a:hover,
    a:focus {
       border-bottom: 1px dashed #bc9d88;
    }
    .sread {
       position: absolute;
       left:-9999px;
    }
    .cursive {
       font-family: 'Mr Dafoe', cursive;
    }
    .center {
       text-align: center;
    }

    #slideshow {
       position: relative;
       width: 640px;
       height: 310px;
       padding: 15px;
       margin: 0 auto 2em;
       border: 1px solid #ddd;
       background: #FFF;
       background: -webkit-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
       background: -moz-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
       background: -ms-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
       background: -o-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
       background: linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
      
       -webkit-border-radius: 2px 2px 2px 2px;
       -moz-border-radius: 2px 2px 2px 2px;
       border-radius: 2px 2px 2px 2px;
      
       -webkit-box-shadow: 0 0 3px rgba(0,0,0, 0.2);
       -moz-box-shadow: 0 0 3px rgba(0,0,0, 0.2);
       box-shadow: 0 0 3px rgba(0,0,0, 0.2);
    }

    /* avanced box-shadow : http://www.creativejuiz.fr/blog/les-tutoriels/ombre-avancees-avec-css3-et-box-shadow */
    #slideshow:before,
    #slideshow:after {
       content: " ";
       position: absolute;
       bottom:16px;
       width: 50%;
       height: 20px;
       background: rgba(0,0,0,0.1);
      
       -webkit-border-radius: 50%;
       -moz-border-radius: 50%;
       border-radius: 50%;
      
       -webkit-box-shadow: 0 0 3px rgba(0,0,0, 0.4), 0 20px 10px rgba(0,0,0, 0.7);
       -moz-box-shadow: 0 0 3px rgba(0,0,0, 0.4), 0 20px 10px rgba(0,0,0, 0.7);
       box-shadow: 0 0 3px rgba(0,0,0, 0.4), 0 20px 10px rgba(0,0,0, 0.7);
      
       z-index: -10;
    }
    #slideshow:before {
       left:0;
       -webkit-transform: rotate(-4deg);
       -moz-transform: rotate(-4deg);
       -ms-transform: rotate(-4deg);
       -o-transform: rotate(-4deg);
       transform: rotate(-4deg);
    }
    #slideshow:after {
       right:0;
       -webkit-transform: rotate(4deg);
       -moz-transform: rotate(4deg);
       -ms-transform: rotate(4deg);
       -o-transform: rotate(4deg);
       transform: rotate(4deg);
    }
    #slideshow .commands {
       position: absolute;
       top: 45%;
       padding: 5px 13px;
       border-bottom:0;
       font-family: 'Amaranth', Arial, Verdana, sans-serif;
       font-size: 1.3em;
       color: #aaa;
       text-decoration:none;
       background-color: #eee;
       background-image: -webkit-linear-gradient(#fff,#ddd);
       background-image: -moz-linear-gradient(#fff,#ddd);
       background-image: -ms-linear-gradient(#fff,#ddd);
       background-image: -o-linear-gradient(#fff,#ddd);
       background-image: linear-gradient(#fff,#ddd);
       text-shadow: 0 0 1px #aaa;
      
       -webkit-border-radius: 50%;
       -moz-border-radius: 50%;
       border-radius: 50%;
      
       -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
       -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
       box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    }
    #slideshow .commands:after {
       position: absolute;
       bottom: 65px; left:-18px;
       content: attr(title);
       width: 50px;
       padding: 12px;
       background: #fff;
       font-family: Georgia, Times, serif;
       font-size: 14px;
       text-align:center;
       text-shadow: 0 0 0;
       opacity: 0;
      
       -webkit-border-radius: 12px;
       -moz-border-radius: 12px;
       border-radius: 12px;
      
       -webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.4);
       -moz-box-shadow: 1px 1px 4px rgba(0,0,0,0.4);
       box-shadow: 1px 1px 4px rgba(0,0,0,0.4);
      
       -webkit-transition: opacity 0.7s, bottom 0.7s;
       -moz-transition: opacity 0.7s, bottom 0.7s;
       transition: opacity 0.7s, bottom 0.7s;
    }
    #slideshow .commands:before {
       position: absolute;
       bottom: 55px; left: 13px;
       content: " ";
       width: 1px; height: 1px;
       border-top: 10px solid #fff;
       border-left: 5px solid transparent;
       border-right: 5px solid transparent;
       z-index:100;
       opacity: 0;
      
       -webkit-transition: opacity 0.7s, bottom 0.7s;
       -moz-transition: opacity 0.7s, bottom 0.7s;
       transition: opacity 0.7s, bottom 0.7s;
    }
    #slideshow .commands:hover:before {
       bottom: 35px;
       opacity: 1;
    }
    #slideshow .commands:hover:after {
       bottom: 45px;
       opacity: 1;
    }
    #slideshow .commands:focus {
       outline: 0;
       -webkit-transform: translate(1px, 2px);
       -moz-transform: translate(1px, 2px);
       -ms-transform: translate(1px, 2px);
       -o-transform: translate(1px, 2px);
       transform: translate(1px, 2px);
    }
    #slideshow .commands:active {
       -webkit-transform: translate(0, 1px);
       -moz-transform: translate(0, 1px);
       -ms-transform: translate(0, 1px);
       -o-transform: translate(0, 1px);
       transform: translate(0, 1px);
    }
    #slideshow .prev {
       left: -48px;
    }
    #slideshow .next {
       right: -48px;
    }
    #slideshow .prev,
    #slideshow .next {
       display:none;
    }
    #slideshow .prev,
    #slideshow .next {
       display:none;
    }
    #slideshow .commands1 {
       display: block;
    }

    /* play/pause commands */
    .play_commands {
       position: absolute;
       width: 22px; height: 22px;
       top: 25px; right: 25px;
       z-index: 10;
       text-indent: -9999px;
       border:0 none;
       opacity: 0;

       -webkit-transition: opacity 1s, right 1s;
       -moz-transition: opacity 1s, right 1s;
       transition: opacity 1s, right 1s;
    }
    .play { right: 55px; cursor: default; }

    .pause:hover { border:0 none; }
    .play_commands:focus { outline:0; }

    #slideshow:hover .pause,
    #sl_play:target ~ #slideshow:hover .pause,
    .play_commands:focus {
       opacity: 1;
    }
    .sl_command:target ~ #slideshow:hover .pause,
    #sl_pause:target ~ #slideshow:hover .pause {
       opacity: 0;
    }
    .pause:after,
    .pause:before {
       position: absolute;
       display: block;
       content: " ";
       top:0;
       width:38%;
       height: 22px;
       background: #fff;
       background: rgba(255,255,255,0.5);
    }
    .pause:after {
       right:0;
    }
    .pause:before {
       left:0;
    }
    .play {
       width: 1px;
       height: 1px;
       border-top: 10px solid transparent;
       border-left: 20px solid #fff;
       border-left: 20px solid rgba(255,255,255,0.5);
       border-bottom: 10px solid transparent;
       opacity: 0;
    }
    .play:hover,
    .play:focus {
       border-bottom: 10px solid transparent;
    }

    #slideshow .container {
       position:relative;
       width: 640px;
       height: 310px;
       overflow: hidden;
    }
    /* timeline base */
    #slideshow .container:after {
       position:absolute;
       bottom: 0; left:0;
       content: " ";
       background: #999;
       width: 100%;
       height: 1px;
    }

    @-webkit-keyframes slider {
       0%, 20%, 100%   { left: 0 }
       25%, 45%      { left: -100% }
       50%, 70%      { left: -200% }
       75%, 95%      { left: -300% }
    }
    @-moz-keyframes slider {
       0%, 20%, 100%   { left: 0 }
       25%, 45%      { left: -100% }
       50%, 70%      { left: -200% }
       75%, 95%      { left: -300% }
    }
    @keyframes slider {
       0%, 20%, 100%   { left: 0 }
       25%, 45%      { left: -100% }
       50%, 70%      { left: -200% }
       75%, 95%      { left: -300% }
    }

    #slideshow .slider {
       position: absolute;
       left:0; top:0;
       width: 400%;
       height: 310px;
      
       -webkit-animation: slider 32s infinite;
       -moz-animation: slider 32s infinite;
       animation: slider 32s infinite;
    }
    .sl_i:target ~ #slideshow .slider {
       -webkit-transition: left 1s;
       -moz-transition: left 1s;
       transition: left 1s;
    }
    .sl_command:target ~ #slideshow .slider {
       -webkit-transition: opacity 1s;
       -moz-transition: opacity 1s;
       transition: opacity 1s;
    }
    #slideshow .c_slider {
       position: absolute;
       left:0; top:0;
       width: 400%;
       height: 310px;
       background: url(img/dummy-640x310-1.jpg) 0 0 no-repeat, url(img/dummy-640x310-2.jpg) 640px 0 no-repeat, url(img/dummy-640x310-3.jpg) 1280px 0 no-repeat, url(img/dummy-640x310-4.jpg) 1920px 0 no-repeat;
    }
    .sl_i:target ~ #slideshow .c_slider {
       -webkit-transition: background 1s;
       -moz-transition: background 1s;
       transition: background 1s;
    }

    #slideshow figure {
       position:relative;
       padding:0; margin:0;
    }

    @-webkit-keyframes figurer {
       0%, 25%, 50%, 75%, 100%                  { -webkit-box-shadow: 0 0 65px rgba(0,0,0, 0) inset; box-shadow: 0 0 65px rgba(0,0,0, 0) inset;   }
       5%, 20%, 30%, 45%, 55%, 70%, 80%, 95%      { -webkit-box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;   box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset; }
    }
    @-moz-keyframes figurer {
       0%, 25%, 50%, 75%, 100%                  { -moz-box-shadow: 0 0 65px rgba(0,0,0, 0) inset; box-shadow: 0 0 65px rgba(0,0,0, 0) inset;   }
       5%, 20%, 30%, 45%, 55%, 70%, 80%, 95%      { -moz-box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;   box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset; }
    }
    @keyframes figurer {
       0%, 25%, 50%, 75%, 100%                  { -moz-box-shadow: 0 0 65px rgba(0,0,0, 0) inset; box-shadow: 0 0 65px rgba(0,0,0, 0) inset;   }
       5%, 20%, 30%, 45%, 55%, 70%, 80%, 95%      { -moz-box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;   box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset; }
    }
    #slideshow figure:after {
       position: absolute;
       display:block;
       content: " ";
       top:0; left:0;
       width: 100%; height: 100%;
       -webkit-box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;
       -moz-box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;
       box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;
      
       -webkit-animation: figurer 32s infinite;
       -moz-animation: figurer 32s infinite;
       animation: figurer 32s infinite;
    }

    @-webkit-keyframes figcaptionner {
       0%, 25%, 50%, 75%, 100%                  { bottom: -55px;   }
       5%, 20%, 30%, 45%, 55%, 70%, 80%, 95%      { bottom: 5px;      }
    }
    @-moz-keyframes figcaptionner {
       0%, 25%, 50%, 75%, 100%                  { bottom: -55px;   }
       5%, 20%, 30%, 45%, 55%, 70%, 80%, 95%      { bottom: 5px;      }
    }
    @keyframes figcaptionner {
       0%, 25%, 50%, 75%, 100%                  { bottom: -55px;   }
       5%, 20%, 30%, 45%, 55%, 70%, 80%, 95%      { bottom: 5px;      }
    }

    #slideshow figcaption {
       position:absolute;
       padding: 20px 20px; margin:0;
       left:0; right:0; bottom: 5px;
       text-align:center;
       letter-spacing: 0.05em;
       word-spacing: 0.05em;
       font-family: Georgia, Times, serif;
       background: #000;
       background: rgba(255,255,255,0.7);
       border-top: 1px solid rgb(225,225,225);
       color: #555;
       text-shadow: -1px -1px 0 rgba(255,255,255,0.3);
      
       -webkit-animation: figcaptionner 32s infinite;
       -moz-animation: figcaptionner 32s infinite;
       animation: figcaptionner 32s infinite;
    }

    @-webkit-keyframes timeliner {
       0%, 25%, 50%, 75%, 100%   { width: 0;      }
       20%, 45%, 70%, 90%      { width: 640px;   }
    }
    @-moz-keyframes timeliner {
       0%, 25%, 50%, 75%, 100%   { width: 0;      }
       20%, 45%, 70%, 90%      { width: 640px;   }
    }
    @keyframes timeliner {
       0%, 25%, 50%, 75%, 100%   { width: 0;      }
       20%, 45%, 70%, 90%      { width: 640px;   }
    }

    #timeline {
       position: absolute;
       background: #999;
       bottom: 15px;
       left: 15px;
       height: 1px;
       background: rgb(214,98,13);
       background: rgba(214,98,13,.<img src="http://2img.net/i/fa/i/smiles/icon_cool.gif" alt="Cool" longdesc="6" />;
       width: 0;
      
       -webkit-animation: timeliner 32s infinite;
       -moz-animation: timeliner 32s infinite;
       animation: timeliner 32s infinite;
    }

    /* dots styles */
    .dots_commands  {
       position: relative;
       top: 32px;
       padding:0; margin:0;
       text-align:center;
    }
    .dots_commands li {
       display:inline;
       padding:0; margin:0;
       list-style:none;
    }
    .dots_commands a {
       position: relative;
       display:inline-block;
       height:8px; width: 8px;
       margin: 0 5px;
       text-indent: -9999px;
       background: #fff;
       border-bottom:0;
      
       -webkit-border-radius: 50%;
       -moz-border-radius: 50%;
       border-radius: 50%;
      
       -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;
       -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;
       box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;
      
       z-index:25;
    }
    .dots_commands a:focus { outline: none; background: orange;}
    .dots_commands li + li a {
       z-index:10;
    }
    @-moz-keyframes dotser {
       0%, 100%    { opacity: 1; left: 0;       }
      
       20%         { opacity: 1; left: 0;      }
       22%         { opacity: 0; left: 0;      }
       23%         { opacity: 0; left: 18px;   }
       25%         { opacity: 1; left: 18px;   }
      
       45%         { opacity: 1; left: 18px;   }
       47%         { opacity: 0; left: 18px;   }
       48%         { opacity: 0; left: 36px;   }
       50%         { opacity: 1; left: 36px;   }
      
       70%         { opacity: 1; left: 36px;   }
       72%         { opacity: 0; left: 36px;   }
       73%         { opacity: 0; left: 54px;   }
       75%         { opacity: 1; left: 54px;   }
      
       95%         { opacity: 1; left: 54px;   }
       97%         { opacity: 0; left: 54px;   }
       98%         { opacity: 0; left: 0;   }
    }
    @-webkit-keyframes dotser {
       0%, 100%    { opacity: 1; left: 0;       }
      
       20%         { opacity: 1; left: 0;      }
       22%         { opacity: 0; left: 0;      }
       23%         { opacity: 0; left: 18px;   }
       25%         { opacity: 1; left: 18px;   }
      
       45%         { opacity: 1; left: 18px;   }
       47%         { opacity: 0; left: 18px;   }
       48%         { opacity: 0; left: 36px;   }
       50%         { opacity: 1; left: 36px;   }
      
       70%         { opacity: 1; left: 36px;   }
       72%         { opacity: 0; left: 36px;   }
       73%         { opacity: 0; left: 54px;   }
       75%         { opacity: 1; left: 54px;   }
      
       95%         { opacity: 1; left: 54px;   }
       97%         { opacity: 0; left: 54px;   }
       98%         { opacity: 0; left: 0;   }
    }
    @keyframes dotser {
       0%, 100%    { opacity: 1; left: 0;       }
      
       20%         { opacity: 1; left: 0;      }
       22%         { opacity: 0; left: 0;      }
       23%         { opacity: 0; left: 18px;   }
       25%         { opacity: 1; left: 18px;   }
      
       45%         { opacity: 1; left: 18px;   }
       47%         { opacity: 0; left: 18px;   }
       48%         { opacity: 0; left: 36px;   }
       50%         { opacity: 1; left: 36px;   }
      
       70%         { opacity: 1; left: 36px;   }
       72%         { opacity: 0; left: 36px;   }
       73%         { opacity: 0; left: 54px;   }
       75%         { opacity: 1; left: 54px;   }
      
       95%         { opacity: 1; left: 54px;   }
       97%         { opacity: 0; left: 54px;   }
       98%         { opacity: 0; left: 0;   }
    }
    .dots_commands li:first-child a:after,
    .dots_commands li:first-child a:before {
       position: absolute;
       top: 0; left: 0;
       content: " ";
       width: 8px; height: 8px;
       background: #bd9b83;
       z-index:20;
       -webkit-border-radius: 50%;
       -moz-border-radius: 50%;
       border-radius: 50%;
      
       -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;
       -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;
       box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;
    }
    .dots_commands li:first-child a:after {
       -webkit-animation: dotser 32s infinite; /* webkit can't animate pseudo-element =_= :L: */
       -moz-animation: dotser 32s infinite; /* thanks moz ! <img src="http://2img.net/i/fa/i/smiles/icon_biggrin.png" alt="Very Happy" longdesc="1" /> */
       animation: dotser 32s infinite;
    }
    .dots_commands li:first-child a:before {
       display:none;
    }




    /* need a stop ! */

    /* actions when target ! */
    .sl_command { display: none; }

    .sl_command:target ~ #slideshow .slider,
    .sl_command:target ~ #slideshow figure:after,
    .sl_command:target ~ #slideshow figcaption,
    .sl_command:target ~ #slideshow #timeline,
    .sl_command:target ~ #slideshow .dots_commands li:first-child a:after {
       -webkit-animation-play-state: paused;
       -moz-animation-play-state: paused;
       animation-play-state: paused;
    }

    #sl_play:target ~ #slideshow .slider,
    #sl_play:target ~ #slideshow figure:after,
    #sl_play:target ~ #slideshow figcaption,
    #sl_play:target ~ #slideshow #timeline,
    #sl_play:target ~ #slideshow .dots_commands li:first-child a:after {
       -webkit-animation-play-state: running;
       -moz-animation-play-state: running;
       animation-play-state: running;
    }

    .sl_command:target ~ #slideshow .pause    { opacity:0; }
    .sl_command:target ~ #slideshow .play    { opacity:1; right: 25px; cursor: pointer; }
    #sl_play:target ~ #slideshow .pause    { opacity:0; }
    #sl_play:target ~ #slideshow .play       { opacity:0; right: 55px; cursor: default;}

    .sl_i:target ~ #slideshow .slider                           { visibility: hidden }
    .sl_i:target ~ #slideshow .slider figcaption                  { visibility: hidden }
    .sl_i:target ~ #slideshow .dots_commands li:first-child a:after      { display:none; }
    .sl_i:target ~ #slideshow .dots_commands li:first-child a:before   { display:block; }}

    #sl_i1:target ~ #slideshow .commands                        { display: none; }
    #sl_i1:target ~ #slideshow .commands1                        { display: block; }
    #sl_i1:target ~ #slideshow .c_slider                        { background-position: 0 0, 640px 0, 1280px 0, 1920px 0; }
    #sl_i1:target ~ #slideshow .dots_commands li:first-child a:before   { left:0; }

    #sl_i2:target ~ #slideshow .commands                        { display: none; }
    #sl_i2:target ~ #slideshow .commands2                        { display: block; }
    #sl_i2:target ~ #slideshow .c_slider                        { background-position: -640px 0, 0 0, 640px 0, 1280px 0; }
    #sl_i2:target ~ #slideshow .dots_commands li:first-child a:before   { left:18px; }

    #sl_i3:target ~ #slideshow .commands                        { display: none; }
    #sl_i3:target ~ #slideshow .commands3                        { display: block; }
    #sl_i3:target ~ #slideshow .c_slider                        { background-position: -1280px 0, -640px 0, 0 0, 640px 0; }
    #sl_i3:target ~ #slideshow .dots_commands li:first-child a:before   { left:36px; }

    #sl_i4:target ~ #slideshow .commands                        { display: none; }
    #sl_i4:target ~ #slideshow .commands4                        { display: block; }
    #sl_i4:target ~ #slideshow .c_slider                        { background-position: -1920px 0, -1280px 0, -640px 0, 0 0; }
    #sl_i4:target ~ #slideshow .dots_commands li:first-child a:before   { left:54px; }





    /* EXPLANATIONS */


    #main .download {
       text-align: center;
       margin: 3em 0 1em;
       line-height: 1.35em;
    }
    #main .download a {
       position: relative;
       display:inline-block;
       padding: 8px 22px 14px;
       border: 0;
       color: #fff;
       background:#8a796d;
       text-shadow: -1px -1px 0 #60544c;
       font-weight:bold;
       overflow: hidden;
      
       -moz-box-shadow: 0 6px 0 #403c3a;
       box-shadow: 0 6px 0 rgba(0,0,0,0.7), 0 7px 6px -5px rgba(255,255,255,0.40) inset;
       border-radius: 12px;
      
       -webkit-transition: color .5s;
       -moz-transition: color .5s;
       transition: color .5s;
    }
    #main .download .arrow {
       position: relative;
       top: 5px;
       display: inline-block;
       padding: 1px 6px;
       margin-right: 10px;
       color: #cabfb6;
       font-size: 22px;
       background: rgba(0,0,0,0.1);
       border: 1px solid rgba(0,0,0,0.2);
       -webkit-border-radius: 50%;
       -moz-border-radius: 50%;
       border-radius: 50%;
       -webkit-transition: all .5s;
       -moz-transition: all .5s;
       transition: all .5s;
    }
    @-webkit-keyframes downloader {
       0% { top:5px; }
       45% { top:60px; }
       49% { opacity: 0; }
       50% { top: -60px; }
       51% { opacity: 1; }
       100% { top:5px; color: #cbbfb5; text-shadow: 1px 1px #777; background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.5); }
      
    }
    @-moz-keyframes downloader {
       0% { top:5px; }
       45% { top:60px; }
       49% { opacity: 0; }
       50% { top: -60px; }
       51% { opacity: 1; }
       100% { top:5px; color: #cbbfb5; text-shadow: 1px 1px #777; background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.5); }
      
    }
    @keyframes downloader {
       0% { top:5px; }
       45% { top:60px; }
       49% { opacity: 0; }
       50% { top: -60px; }
       51% { opacity: 1; }
       100% { top:5px; color: #cbbfb5; text-shadow: 1px 1px #777; background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.5); }
      
    }
    #main .download a:hover,
    #main .download a:focus {
       color: #cbbfb5;
    }
    #main .download a:hover .arrow,
    #main .download a:focus .arrow {
       -webkit-animation: downloader .4s forwards;
       -moz-animation: downloader .4s forwards;
       animation: downloader .4s forwards;
    }

    #main .download .file {
       display: block;
       font-weight:normal;
       font-size: 0.6em;
       margin-left: 40px;
       line-height: 0.55em;
    }
    #main .download .already {
       font-size: 0.7em;
       line-height: 2.4em;
    }
    #main .download .nb {
       font-weight:bold;
    }

    #main {
       padding: 10px;
       color: #8a796d;
       font-family: Helvetica, Arial, sans-serif;
       text-align:left;
       text-shadow: -1px -1px 0 rgba(255,255,255,0.1);
    }
    #main h2, #main h3 {
       margin-top: 45px;
       font-size: 2em;
       font-family: "Amaranth", cursive;
       text-align:left;
    }
    #main h3 {
       margin-top: 25px;
       font-size: 1.4em;
    }
    #main p {
       line-height: 1.85em;
       margin-top: 2em;
    }
    #main  .col2,
    #main .col2 {
       position: relative;
       margin-top: 1em;
       -webkit-column-count: 2;
       -webkit-column-gap: 3em;
       -moz-column-count: 2;
       -moz-column-gap: 3em;
       column-count: 2;
       column-gap: 3em;
    }
    #main .col2 + .col2 {
       margin-top: 3em;
    }
    #main p + p:before {
       position: absolute;
       content: "*";
       width: 100%;
       text-align: center;
       top: -1.2em;
       font-size: 2em;
       color: #e1d7cf;
       text-shadow: 1px 1px 0 rgba(0,0,0,0.15);
    }
    footer {
       padding: 25px;
       margin-bottom: 38px;
       border: 1px solid rgba(0,0,0,0.1);
       background: rgba(0,0,0,0.1);
       color: #777;
       text-align: center;
    }
    footer p {
       margin:0.5em 0;
    }
    footer .sep {
       display: inline-block;
       margin: 0 1em;
    }


    /*
    **    Sharre, bouton design by Sacha Greif
    **    improvement by Geoffrey Crofte
    */

    #sharrre {
       float: left;
       margin: 0 22%;
       padding: 45px 0;
       padding-left: 20px;
       overflow: hidden;
    }
    .sharrre {
       margin: 0 25px;
       float:left;
    }
    .sharrre .box {
       float:left;
       width:80px;
       height:75px;
       margin-bottom: 4px;
       background: #dee7ea; /* Old browsers */
       background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eee), color-stop(20%,#eee), color-stop(100%,#e5eef2)); /* Chrome,Safari4+ */
       background: -webkit-linear-gradient(top, #eee 0%,#eee 20%,#e5eef2 100%); /* Chrome10+,Safari5.1+ */
       background: -moz-linear-gradient(top, #eee 0%, #eee 20%, #e5eef2 100%); /* FF3.6+ */
       background: -o-linear-gradient(top, #eee 0%,#eee 20%,#e5eef2 100%); /* Opera 11.10+ */
       background: -ms-linear-gradient(top, #eee 0%,#eee 20%,#e5eef2 100%); /* IE10+ */
       background: linear-gradient(top, #eee 0%,#eee 20%,#e5eef2 100%); /* W3C */
       filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#e5eef2',GradientType=0 ); /* IE6-9 */
      
       -webkit-border-radius:7px;
       -moz-border-radius:7px;
       border-radius:7px;
      
       -webkit-box-shadow:0 1px 0 #C3C3C3, 0 6px 0 #54a2bc, 0px 2px 3px 0px rgba(47, 58, 61, 0.25), inset 0px 1px 0px 0px rgba(255, 255, 255, 1);
       -moz-box-shadow:0 1px 0 #C3C3C3, 0 6px 0 #54a2bc, 0px 2px 3px 0px rgba(47, 58, 61, 0.25), inset 0px 1px 0px 0px rgba(255, 255, 255, 1);
       box-shadow:0 1px 0 #C3C3C3, 0 6px 0 #54a2bc, 0px 2px 3px 0px rgba(47, 58, 61, 0.25), inset 0px 2px 0px 0px rgba(255, 255, 255, 1);
    }
    #facebook .box {
       -webkit-box-shadow:0 1px 0 #C3C3C3, 0 6px 0 #28437a, 0px 2px 3px 0px rgba(47, 58, 61, 0.25), inset 0px 1px 0px 0px rgba(255, 255, 255, 1);
       -moz-box-shadow:0 1px 0 #C3C3C3, 0 6px 0 #28437a, 0px 2px 3px 0px rgba(47, 58, 61, 0.25), inset 0px 1px 0px 0px rgba(255, 255, 255, 1);
       box-shadow:0 1px 0 #C3C3C3, 0 6px 0 #28437a, 0px 2px 3px 0px rgba(47, 58, 61, 0.25), inset 0px 2px 0px 0px rgba(255, 255, 255, 1);
    }
    #googleplus .box {
       -webkit-box-shadow:0 1px 0 #C3C3C3, 0 6px 0 #404040, 0px 2px 3px 0px rgba(47, 58, 61, 0.25), inset 0px 1px 0px 0px rgba(255, 255, 255, 1);
       -moz-box-shadow:0 1px 0 #C3C3C3, 0 6px 0 #404040, 0px 2px 3px 0px rgba(47, 58, 61, 0.25), inset 0px 1px 0px 0px rgba(255, 255, 255, 1);
       box-shadow:0 1px 0 #C3C3C3, 0 6px 0 #404040, 0px 2px 3px 0px rgba(47, 58, 61, 0.25), inset 0px 2px 0px 0px rgba(255, 255, 255, 1);
    }
    .sharrre .box:active,
    #facebook .box:active,
    #googleplus .box:active {
       margin-top:4px;
       margin-bottom: 0;
       -webkit-box-shadow:0 0 2px #777;
       -moz-box-shadow:0 0 2px #777;
       box-shadow:0 0 2px #777;
    }
    .sharrre .count,
    .sharrre .share {
       display:inline-block;
       width:78px;
       text-align:center;
       font-weight:bold;
    }
    .sharrre .count {
       position:relative;
       height:40px;
       border:1px solid #b9b9b9;
       border-width:1px 1px 0 1px;
       font-size:20px;
       color:#444444;
       text-shadow: 0px 1px 0px #ffffff;
       line-height:40px;
      
       -webkit-border-radius:7px 7px 0 0;
       -moz-border-radius:7px 7px 0 0;
       border-radius:7px 7px 0 0;
      
       filter: dropshadow(color=#ffffff, offx=0, offy=1);
    }
    .sharrre .count:before,
    .sharrre .count:after {
       content:'';
       position:absolute;
       display:block;
       left:49%;
       width:0; height:0;
    }
    .sharrre .count:before {
       margin-left:-7px;
       bottom: -14px;
       border:solid 7px transparent;
       border-top-color:#b2c6cc;
    }
    .sharrre .count:after {
       margin-left:-6px;
       bottom:-12px;
       border:solid 6px transparent;
       border-top-color:#e5eef2;
    }
    .sharrre .share {
       height:34px;
       line-height:34px;
       color:#ffffff;
       font-size:13px;
       text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.35);
       border:1px solid #6fa4b5;
       border-width:0 1px 1px 1px;
       background-color:#7ac5df;
      
       -webkit-border-radius:0 0 7px 7px;
       -moz-border-radius:0 0 7px 7px;
       border-radius:0 0 7px 7px;
      
       -webkit-box-shadow:inset 0px 1px 0px 0px rgba(105, 164, 185, 1), inset 0px -1px 2px 0px rgba(255, 255, 255, 0.6), inset 0px 2px 1px 0px rgba(255, 0, 0, 0.15);
       -moz-box-shadow:inset 0px 1px 0px 0px rgba(105, 164, 185, 1), inset 0px -1px 2px 0px rgba(255, 255, 255, 0.6), inset 0px 2px 1px 0px rgba(255, 0, 0, 0.15);
       box-shadow:inset 0px 1px 0px 0px rgba(105, 164, 185, 1), inset 0px -1px 2px 0px rgba(255, 255, 255, 0.6), inset 0px 2px 1px 0px rgba(255, 0, 0, 0.15);
       filter: dropshadow(color=#d1d1d1, offx=0, offy=1);
    }
    .sharrre .share span {
       display: inline-block;
       width:18px;
       height:10px;
       background:url("img/sharrre_icons.png") no-repeat scroll 0 0 transparent;
    }
    #facebook .share span {
       height:12px;
       background-position:0 -35px;
    }
    #facebook .share {
       border-color:#35538f;
       background: #637fbb; /* Old browsers */
       background: -moz-linear-gradient(top, #637fbb 0%, #49649e 100%); /* FF3.6+ */
       background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#637fbb), color-stop(100%,#49649e)); /* Chrome,Safari4+ */
       background: -webkit-linear-gradient(top, #637fbb 0%,#49649e 100%); /* Chrome10+,Safari5.1+ */
       background: -o-linear-gradient(top, #637fbb 0%,#49649e 100%); /* Opera 11.10+ */
       background: -ms-linear-gradient(top, #637fbb 0%,#49649e 100%); /* IE10+ */
       background: linear-gradient(top, #637fbb 0%,#49649e 100%); /* W3C */

       -webkit-box-shadow:inset 0px 1px 0px 0px rgba(74, 95, 138, 1), inset 0px -1px 2px 0px rgba(255, 255, 255, 0.4), inset 0px 2px 1px 0px rgba(255, 0, 0, 0.15);
       -moz-box-shadow:inset 0px 1px 0px 0px rgba(74, 95, 138, 1), inset 0px -1px 2px 0px rgba(255, 255, 255, 0.4), inset 0px 2px 1px 0px rgba(255, 0, 0, 0.15);
       box-shadow:inset 0px 1px 0px 0px rgba(74, 95, 138, 1), inset 0px -1px 2px 0px rgba(255, 255, 255, 0.4), inset 0px 2px 1px 0px rgba(255, 0, 0, 0.15);
       filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#637fbb', endColorstr='#49649e',GradientType=0 ); /* IE6-9 */
    }
    #googleplus .share {
       border-color:#303030;
       background: #626263; /* Old browsers */
       background: -moz-linear-gradient(top, #626263 0%, #424244 100%); /* FF3.6+ */
       background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#626263), color-stop(100%,#424244)); /* Chrome,Safari4+ */
       background: -webkit-linear-gradient(top, #626263 0%,#424244 100%); /* Chrome10+,Safari5.1+ */
       background: -o-linear-gradient(top, #626263 0%,#424244 100%); /* Opera 11.10+ */
       background: -ms-linear-gradient(top, #626263 0%,#424244 100%); /* IE10+ */
       background: linear-gradient(top, #626263 0%,#424244 100%); /* W3C */

       -webkit-box-shadow:inset 0px 1px 0px 0px rgba(74, 95, 138, 1), inset 0px -1px 2px 0px rgba(255, 255, 255, 0.4), inset 0px 2px 1px 0px rgba(255, 0, 0, 0.15);
       -moz-box-shadow:inset 0px 1px 0px 0px rgba(74, 95, 138, 1), inset 0px -1px 2px 0px rgba(255, 255, 255, 0.4), inset 0px 2px 1px 0px rgba(255, 0, 0, 0.15);
       box-shadow:inset 0px 1px 0px 0px rgba(74, 95, 138, 1), inset 0px -1px 2px 0px rgba(255, 255, 255, 0.4), inset 0px 2px 1px 0px rgba(255, 0, 0, 0.15);
       filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#626263', endColorstr='#424244',GradientType=0 ); /* IE6-9 */
    }

            </style>

          </head>

              <body>

                
              
              
              
              
              
                <span id="sl_play" class="sl_command"> </span>
       <span id="sl_pause" class="sl_command"> </span>
       <span id="sl_i1" class="sl_command sl_i"> </span>
       <span id="sl_i2" class="sl_command sl_i"> </span>
       <span id="sl_i3" class="sl_command sl_i"> </span>
       <span id="sl_i4" class="sl_command sl_i"> </span>
       <span id="sl_i5" class="sl_command sl_i"> </span>
       <span id="sl_i6" class="sl_command sl_i"> </span>      
       <span id="sl_i7" class="sl_command sl_i"> </span>      
       <span id="sl_i8" class="sl_command sl_i"> </span>
       <span id="sl_i9" class="sl_command sl_i"> </span>
       <span id="sl_i10" class="sl_command sl_i"> </span>
                
                
       <section id="slideshow">
      
          <a class="commands prev commands1" href="#sl_i10" title="Go sur la Dernière News"><</a>
          <a class="commands next commands1" href="#sl_i2" title="Go sur la 2 News">></a>
          <a class="commands prev commands2" href="#sl_i1" title="Go sur la 1 News"><</a>
          <a class="commands next commands2" href="#sl_i3" title="Go sur la 3 News">></a>
          <a class="commands prev commands3" href="#sl_i2" title="Go sur la 2 News"><</a>
          <a class="commands next commands3" href="#sl_i4" title="Go sur la 4 News">></a>
          <a class="commands prev commands4" href="#sl_i3" title="Go sur la 3 News">></a>
          <a class="commands prev commands4" href="#sl_i5" title="Go sur la 5 News">></a>
          <a class="commands prev commands5" href="#sl_i4" title="Go sur la 4 News"><</a>
          <a class="commands next commands5" href="#sl_i6" title="Go sur la 6 News">></a>
          <a class="commands prev commands6" href="#sl_i5" title="Go sur la 5 News"><</a>
          <a class="commands next commands6" href="#sl_i7" title="Go sur la 7 News">></a>            
          <a class="commands prev commands7" href="#sl_i6" title="Go sur la 6 News"><</a>
          <a class="commands next commands7" href="#sl_i8" title="Go sur la 8 News">></a>            
          <a class="commands prev commands8" href="#sl_i7" title="Go sur la 7 News"><</a>
          <a class="commands next commands8" href="#sl_i9" title="Go sur la 9 News">></a>            
          <a class="commands prev commands9" href="#sl_i8" title="Go sur la 8 News"><</a>
          <a class="commands next commands9" href="#sl_i10" title="Go sur la 10 News">></a>            
          <a class="commands prev commands10" href="#sl_i9" title="Go sur la 9 News"><</a>
          <a class="commands next commands10" href="#sl_i1" title="Go sur la Première News">></a>            
            
            
            
          <a class="play_commands pause" href="#sl_pause" title="Maintain paused">Pause</a>
          <a class="play_commands play" href="#sl_play" title="Play the animation">Play</a>
          
          <div class="container">
             <div class="c_slider"></div>
             <div class="slider">
               <!--Lien1-->
                        <a href="http://www.crazymocs.com/t4654-ucs-75095-tie-fighter">
                    <figure>
                      <img src="https://scontent-cdg.xx.fbcdn.net/hphotos-xfp1/v/t1.0-9/10383951_909506472415236_7991889518309825571_n.jpg?oh=bbd6041ffa2a20e156cc6b5fd11fa236&oe=5551E5A5" alt="" width="640" height="310" />
                      <figcaption><span style="color: #188707;">UCS 75095 TIE Fighter™️ </span></figcaption>
                    </figure>        </a>  
               <!--Lien2-->
                   <a href="http://www.crazymocs.com/t4644-lego-new-york-toy-fair-2015">
                    <figure>
                      <img src="http://farm8.staticflickr.com/7339/16420640706_07a4d1ef97_z.jpg" alt="" width="640" height="310" />
                      <figcaption> <span style="color: #FFFFFF;">LEGO®️ NYTF 2015 </span></figcaption>
                    </figure>        </a>
               <!--Lien3-->
                    <a href="http://www.crazymocs.com/t4599-jurassic-world-video">
                    <figure>
                      <img src="http://i38.servimg.com/u/f38/17/81/21/62/b9ctb410.jpg" alt="" width="640" height="310" />
                      <figcaption><span style="color: #ED008A;">Jurassic World Video</span></figcaption>
                    </figure>        </a>  
               <!--Lien4-->
                  <a href="http://www.crazymocs.com/t4593-lego-ideas-wall-e-doctor-who-bientot-chez-lego">
                    <figure>
                      <img src="https://dp1eoqdp1qht7.cloudfront.net/community/blogs/1/1781843-wall-e-watermark.png" alt="" width="640" height="310" />
                      <figcaption><span style="color: #F5DD00;">LEGO®️ Ideas Wall-E</span></figcaption>
                    </figure>        </a>
               <!--Lien5-->
                   <a href="http://www.crazymocs.com/t4530p15-lego-nouvelle-polemique#59096">
                    <figure>
                      <img src="http://i38.servimg.com/u/f38/17/81/21/62/10933810.jpg" alt="" width="640" height="310" />
                      <figcaption><span style="color: #00EEF2;">News Plaques LEGO®️</span></figcaption>
                    </figure>        </a>
               <!--Lien6-->
            <a href="http://www.crazymocs.com/t4584-city-2015-news-sets">
                    <figure>
                      <img src="http://images.brickset.com/sets/images/60095-1.jpg" alt="" width="640" height="310" />
                      <figcaption><span style="color: #A6A6A6;">City 2015 News</span></figcaption>
                    </figure>        </a>
               <!--Lien7-->
            <a href="http://www.crazymocs.com/t4547-greenpeace-nous-avons-reussi">
                    <figure>
                      <img src="http://static2.greenpeace.fr/blog/uploads/2014/10/bounce-640x426.jpg" alt="" width="640" height="310" />
                      <figcaption><span style="color: #F29500;">Greenpeace et LEGO®️</span></figcaption>
                    </figure>        </a>
               <!--Lien8-->
            <a href="http://www.crazymocs.com/t4539-76042-ucs-helicarrier#58390">
                    <figure>
                      <img src="http://farm8.staticflickr.com/7413/16207511818_266dfe7943_z.jpg" alt="" width="640" height="310" />
                      <figcaption><span style="color: #FF0000;">Bientôt UCS Helicarrier !</span></figcaption>
                    </figure>        </a>
               <!--Lien9-->
           <a href="http://www.crazymocs.com/t4530-lego-des-plaques-remplaces">
                    <figure>
                      <img src="http://i38.servimg.com/u/f38/17/81/21/62/lego-g10.jpg" alt="" width="640" height="310" />
                      <figcaption><span style="color: #000000;">LEGO®️ Polémique ??? </span></figcaption>
                    </figure>         </a>
               <!--Lien10-->
           <a href="http://www.crazymocs.com/t4522-newsletter-fevrier-2015">
                    <figure>
                      <img src="http://i38.servimg.com/u/f38/17/81/21/62/sans_t12.jpg" alt="" width="640" height="310" />
                      <figcaption><span style="color: #0003A1;">Newsletter Février 2015</span></figcaption>
                    </figure>         </a>
             </div>
          </div>
          
          <span id="timeline"></span>
          
          <ul class="dots_commands"><!--
             --><li><a title="Show slide 1" href="#sl_i1">Slide 1</a></li><!--
             --><li><a title="Show slide 2" href="#sl_i2">Slide 2</a></li><!--
             --><li><a title="Show slide 3" href="#sl_i3">Slide 3</a></li><!--
             --><li><a title="Show slide 4" href="#sl_i4">Slide 4</a></li><!--
        --><li><a title="Show slide 5" href="#sl_i5">Slide 5</a></li><!--
             --><li><a title="Show slide 6" href="#sl_i6">Slide 6</a></li><!--
             --><li><a title="Show slide 7" href="#sl_i7">Slide 7</a></li><!--            
             --><li><a title="Show slide 8" href="#sl_i8">Slide 8</a></li><!--            
             --><li><a title="Show slide 9" href="#sl_i9">Slide 9</a></li><!--          
             --><li><a title="Show slide 10" href="#sl_i10">Slide 10</a></li>      

            </ul>
            
               </section>

          </body>

    </html>

Je pense comprendre que le probleme viens de "l'Animation du conteneur" le temps de 32s ainsi que le pourcentage sont surement mal réglés pour 10 images car initialement reglé pour 4 images Wink .

Seulement voila je suis perdu et je ne comprends pas comme résoudre le probleme car n’étant pas encore un As la dedans j'ai réussi a me perdre donc si une petite âme pouvait m'aider je serais ravis.

Merci d'avance pour votre aide.

Cdlt Desolation.


Dernière édition par Desolation le Mer 18 Fév - 11:05, édité 1 fois
Desolation

Desolation
***

Masculin
Messages : 126
Inscrit(e) le : 13/10/2012

http://crazymocs.forumgratuit.org/
Desolation a été remercié(e) par l'auteur de ce sujet.

Résolu Re: SlidesShow Accueil

Message par Desolation Dim 15 Fév - 20:56

Une petite âme passe par ici ?????
Desolation

Desolation
***

Masculin
Messages : 126
Inscrit(e) le : 13/10/2012

http://crazymocs.forumgratuit.org/
Desolation a été remercié(e) par l'auteur de ce sujet.

Résolu Re: SlidesShow Accueil

Message par Desolation Lun 16 Fév - 15:53

Personne ????
Desolation

Desolation
***

Masculin
Messages : 126
Inscrit(e) le : 13/10/2012

http://crazymocs.forumgratuit.org/
Desolation a été remercié(e) par l'auteur de ce sujet.

Résolu Re: SlidesShow Accueil

Message par Desolation Lun 16 Fév - 19:02

Bonjour les Geeks Wink :

Voila j'ai presque résolu le probleme Wink il ne me reste que un seul j'ai mis en place des liens sur les images seulement cela ne fonctionne pas.

Voici le Code Général :

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml">
          <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>CRAZY MOCS V3</title>

            <style type="text/css">

    /**
       Juizy Slideshow
       @author: Geoffrey Crofte
       @date: 2011-12-07
       @from: self work http://creativejuiz.fr/trytotry
       @license: CreativeCommons (BY)
      
      
       ************* Changelog *************
      
       ** v.1.1.1 - 2012-02-27
       - Figcaption element hidden when you take the control
      
       ** v.1.1.0 - 2011-12-31
       - Caption of figure (figcaption element) display improvement
      
       ** v.1.0.0 - 2011-12-07
       - First version
      
    */



    body {
       width: 800px;
       margin: 0 auto;
       color:#777;
    }
    h1, h2 {
       text-align:center;
       margin-top:0;
    }
    h1 {
       padding: 1em 0;
       margin-left: 1.5em;
       font-size: 2.5em;
       font-family: 'Amaranth', Arial, Verdana, sans-serif;
    }
    h1 span {
       display:block;
       margin: 0.75em 0 0 -2em;
       line-height: 1em;
       font-size: 0.55em;
    }
    h1 .cursive {
       margin: 0 0 0 -3em;
       font-size: 1.1em;
       line-height:0.5em;
       color: #bd9b83;
    }
    figure {
       display: inline-block;
    }
    a {
       text-decoration: none;
       border-bottom: 1px solid #bc9d88;
       color: #8f6b51;
    }
    a:hover,
    a:focus {
       border-bottom: 1px dashed #bc9d88;
    }
    .sread {
       position: absolute;
       left:-9999px;
    }
    .cursive {
       font-family: 'Mr Dafoe', cursive;
    }
    .center {
       text-align: center;
    }

    #slideshow {
       position: relative;
       width: 640px;
       height: 310px;
       padding: 15px;
       margin: 0 auto 2em;
       border: 1px solid #ddd;
       background: #FFF;
       background: -webkit-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
       background: -moz-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
       background: -ms-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
       background: -o-linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
       background: linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
      
       -webkit-border-radius: 2px 2px 2px 2px;
       -moz-border-radius: 2px 2px 2px 2px;
       border-radius: 2px 2px 2px 2px;
      
       -webkit-box-shadow: 0 0 3px rgba(0,0,0, 0.2);
       -moz-box-shadow: 0 0 3px rgba(0,0,0, 0.2);
       box-shadow: 0 0 3px rgba(0,0,0, 0.2);
    }


    /* avanced box-shadow : http://www.creativejuiz.fr/blog/les-tutoriels/ombre-avancees-avec-css3-et-box-shadow */
        #slideshow:before,
        #slideshow:after {
          content: " ";
          position: absolute;
          bottom:16px;
          width: 50%;
          height: 20px;
          background: rgba(0,0,0,0.1);
        
          -webkit-border-radius: 50%;
          -moz-border-radius: 50%;
          border-radius: 50%;
        
          -webkit-box-shadow: 0 0 3px rgba(0,0,0, 0.4), 0 20px 10px rgba(0,0,0, 0.7);
          -moz-box-shadow: 0 0 3px rgba(0,0,0, 0.4), 0 20px 10px rgba(0,0,0, 0.7);
          box-shadow: 0 0 3px rgba(0,0,0, 0.4), 0 20px 10px rgba(0,0,0, 0.7);
        
          z-index: -10;
        }
        #slideshow:before {
          left:0;
          -webkit-transform: rotate(-4deg);
          -moz-transform: rotate(-4deg);
          -ms-transform: rotate(-4deg);
          -o-transform: rotate(-4deg);
          transform: rotate(-4deg);
        }
        #slideshow:after {
          right:0;
          -webkit-transform: rotate(4deg);
          -moz-transform: rotate(4deg);
          -ms-transform: rotate(4deg);
          -o-transform: rotate(4deg);
          transform: rotate(4deg);
        }


    #slideshow .container {
       position:relative;
       width: 640px;
       height: 310px;
       overflow: hidden;
    }
            
            
            
    /* timeline base */
    #slideshow .container:after {
       position:absolute;
       bottom: 0; left:0;
       content: " ";
       background: #999;
       width: 100%;
       height: 1px;
    }

    @-webkit-keyframes slider {
       0%, 20%, 100%   { left: 0 }
       25%, 45%      { left: -100% }
       50%, 70%      { left: -200% }
       75%, 95%      { left: -300% }
    }
    @-moz-keyframes slider {
       0%, 20%, 100%   { left: 0 }
       25%, 45%      { left: -100% }
       50%, 70%      { left: -200% }
       75%, 95%      { left: -300% }
    }
    @keyframes slider {
       0%, 20%, 100%   { left: 0 }
       25%, 45%      { left: -100% }
       50%, 70%      { left: -200% }
       75%, 95%      { left: -300% }
    }

    #slideshow .slider {
       position: absolute;
       left:0; top:0;
       width: 400%;
       height: 310px;
      
       -webkit-animation: slider 32s infinite;
       -moz-animation: slider 32s infinite;
       animation: slider 32s infinite;
    }
    .sl_i:target ~ #slideshow .slider {
       -webkit-transition: left 1s;
       -moz-transition: left 1s;
       transition: left 1s;
    }
    .sl_command:target ~ #slideshow .slider {
       -webkit-transition: opacity 1s;
       -moz-transition: opacity 1s;
       transition: opacity 1s;
    }
    #slideshow .c_slider {
       position: absolute;
       left:0; top:0;
       width: 400%;
       height: 310px;
       background: url(img/dummy-640x310-1.jpg) 0 0 no-repeat, url(img/dummy-640x310-2.jpg) 640px 0 no-repeat, url(img/dummy-640x310-3.jpg) 1280px 0 no-repeat, url(img/dummy-640x310-4.jpg) 1920px 0 no-repeat;
    }
    .sl_i:target ~ #slideshow .c_slider {
       -webkit-transition: background 1s;
       -moz-transition: background 1s;
       transition: background 1s;
    }

    #slideshow figure {
       position:relative;
       padding:0; margin:0;
    }

    @-webkit-keyframes figurer {
       0%, 25%, 50%, 75%, 100%                  { -webkit-box-shadow: 0 0 65px rgba(0,0,0, 0) inset; box-shadow: 0 0 65px rgba(0,0,0, 0) inset;   }
       5%, 20%, 30%, 45%, 55%, 70%, 80%, 95%      { -webkit-box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;   box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset; }
    }
    @-moz-keyframes figurer {
       0%, 25%, 50%, 75%, 100%                  { -moz-box-shadow: 0 0 65px rgba(0,0,0, 0) inset; box-shadow: 0 0 65px rgba(0,0,0, 0) inset;   }
       5%, 20%, 30%, 45%, 55%, 70%, 80%, 95%      { -moz-box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;   box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset; }
    }
    @keyframes figurer {
       0%, 25%, 50%, 75%, 100%                  { -moz-box-shadow: 0 0 65px rgba(0,0,0, 0) inset; box-shadow: 0 0 65px rgba(0,0,0, 0) inset;   }
       5%, 20%, 30%, 45%, 55%, 70%, 80%, 95%      { -moz-box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;   box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset; }
    }
    #slideshow figure:after {
       position: absolute;
       display:block;
       content: " ";
       top:0; left:0;
       width: 100%; height: 100%;
       -webkit-box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;
       -moz-box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;
       box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;
      
       -webkit-animation: figurer 32s infinite;
       -moz-animation: figurer 32s infinite;
       animation: figurer 32s infinite;
    }

    @-webkit-keyframes figcaptionner {
       0%, 25%, 50%, 75%, 100%                  { bottom: -55px;   }
       5%, 20%, 30%, 45%, 55%, 70%, 80%, 95%      { bottom: 5px;      }
    }
    @-moz-keyframes figcaptionner {
       0%, 25%, 50%, 75%, 100%                  { bottom: -55px;   }
       5%, 20%, 30%, 45%, 55%, 70%, 80%, 95%      { bottom: 5px;      }
    }
    @keyframes figcaptionner {
       0%, 25%, 50%, 75%, 100%                  { bottom: -55px;   }
       5%, 20%, 30%, 45%, 55%, 70%, 80%, 95%      { bottom: 5px;      }
    }

    #slideshow figcaption {
       position:absolute;
       padding: 20px 20px; margin:0;
       left:0; right:0; bottom: 5px;
       text-align:center;
       letter-spacing: 0.05em;
       word-spacing: 0.05em;
       font-family: Georgia, Times, serif;
       background: #000;
       background: rgba(255,255,255,0.7);
       border-top: 1px solid rgb(225,225,225);
       color: #555;
       text-shadow: -1px -1px 0 rgba(255,255,255,0.3);
      
       -webkit-animation: figcaptionner 32s infinite;
       -moz-animation: figcaptionner 32s infinite;
       animation: figcaptionner 32s infinite;
    }

    @-webkit-keyframes timeliner {
       0%, 25%, 50%, 75%, 100%   { width: 0;      }
       20%, 45%, 70%, 90%      { width: 640px;   }
    }
    @-moz-keyframes timeliner {
       0%, 25%, 50%, 75%, 100%   { width: 0;      }
       20%, 45%, 70%, 90%      { width: 640px;   }
    }
    @keyframes timeliner {
       0%, 25%, 50%, 75%, 100%   { width: 0;      }
       20%, 45%, 70%, 90%      { width: 640px;   }
    }

    #timeline {
       position: absolute;
       background: #999;
       bottom: 15px;
       left: 15px;
       height: 1px;
       background: rgb(214,98,13);
       background: rgba(214,98,13,.8);
       width: 0;
      
       -webkit-animation: timeliner 32s infinite;
       -moz-animation: timeliner 32s infinite;
       animation: timeliner 32s infinite;
    }

    /* dots styles */
    .dots_commands  {
       position: relative;
       top: 32px;
       padding:0; margin:0;
       text-align:center;
    }
    .dots_commands li {
       display:inline;
       padding:0; margin:0;
       list-style:none;
    }
    .dots_commands a {
       position: relative;
       display:inline-block;
       height:8px; width: 8px;
       margin: 0 5px;
       text-indent: -9999px;
       background: #fff;
       border-bottom:0;
      
       -webkit-border-radius: 50%;
       -moz-border-radius: 50%;
       border-radius: 50%;
      
       -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;
       -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;
       box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;
      
       z-index:25;
    }
    .dots_commands a:focus { outline: none; background: orange;}
    .dots_commands li + li a {
       z-index:10;
    }
    @-moz-keyframes dotser {
       0%, 100%    { opacity: 1; left: 0;       }
      
       20%         { opacity: 1; left: 0;      }
       22%         { opacity: 0; left: 0;      }
       23%         { opacity: 0; left: 18px;   }
       25%         { opacity: 1; left: 18px;   }
      
       45%         { opacity: 1; left: 18px;   }
       47%         { opacity: 0; left: 18px;   }
       48%         { opacity: 0; left: 36px;   }
       50%         { opacity: 1; left: 36px;   }
      
       70%         { opacity: 1; left: 36px;   }
       72%         { opacity: 0; left: 36px;   }
       73%         { opacity: 0; left: 54px;   }
       75%         { opacity: 1; left: 54px;   }
      
       95%         { opacity: 1; left: 54px;   }
       97%         { opacity: 0; left: 54px;   }
       98%         { opacity: 0; left: 0;   }
    }
    @-webkit-keyframes dotser {
       0%, 100%    { opacity: 1; left: 0;       }
      
       20%         { opacity: 1; left: 0;      }
       22%         { opacity: 0; left: 0;      }
       23%         { opacity: 0; left: 18px;   }
       25%         { opacity: 1; left: 18px;   }
      
       45%         { opacity: 1; left: 18px;   }
       47%         { opacity: 0; left: 18px;   }
       48%         { opacity: 0; left: 36px;   }
       50%         { opacity: 1; left: 36px;   }
      
       70%         { opacity: 1; left: 36px;   }
       72%         { opacity: 0; left: 36px;   }
       73%         { opacity: 0; left: 54px;   }
       75%         { opacity: 1; left: 54px;   }
      
       95%         { opacity: 1; left: 54px;   }
       97%         { opacity: 0; left: 54px;   }
       98%         { opacity: 0; left: 0;   }
    }
    @keyframes dotser {
       0%, 100%    { opacity: 1; left: 0;       }
      
       20%         { opacity: 1; left: 0;      }
       22%         { opacity: 0; left: 0;      }
       23%         { opacity: 0; left: 18px;   }
       25%         { opacity: 1; left: 18px;   }
      
       45%         { opacity: 1; left: 18px;   }
       47%         { opacity: 0; left: 18px;   }
       48%         { opacity: 0; left: 36px;   }
       50%         { opacity: 1; left: 36px;   }
      
       70%         { opacity: 1; left: 36px;   }
       72%         { opacity: 0; left: 36px;   }
       73%         { opacity: 0; left: 54px;   }
       75%         { opacity: 1; left: 54px;   }
      
       95%         { opacity: 1; left: 54px;   }
       97%         { opacity: 0; left: 54px;   }
       98%         { opacity: 0; left: 0;   }
    }
    .dots_commands li:first-child a:after,
    .dots_commands li:first-child a:before {
       position: absolute;
       top: 0; left: 0;
       content: " ";
       width: 8px; height: 8px;
       background: #bd9b83;
       z-index:20;
       -webkit-border-radius: 50%;
       -moz-border-radius: 50%;
       border-radius: 50%;
      
       -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;
       -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;
       box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;
    }
    .dots_commands li:first-child a:after {
       -webkit-animation: dotser 32s infinite; /* webkit can't animate pseudo-element =_= :L: */
       -moz-animation: dotser 32s infinite; /* thanks moz !  */
       animation: dotser 32s infinite;
    }
    .dots_commands li:first-child a:before {
       display:none;
    }




    /* need a stop ! */

    /* actions when target ! */
    .sl_command { display: none; }

    .sl_command:target ~ #slideshow .slider,
    .sl_command:target ~ #slideshow figure:after,
    .sl_command:target ~ #slideshow figcaption,
    .sl_command:target ~ #slideshow #timeline,
    .sl_command:target ~ #slideshow .dots_commands li:first-child a:after {
       -webkit-animation-play-state: paused;
       -moz-animation-play-state: paused;
       animation-play-state: paused;
    }

    #sl_play:target ~ #slideshow .slider,
    #sl_play:target ~ #slideshow figure:after,
    #sl_play:target ~ #slideshow figcaption,
    #sl_play:target ~ #slideshow #timeline,
    #sl_play:target ~ #slideshow .dots_commands li:first-child a:after {
       -webkit-animation-play-state: running;
       -moz-animation-play-state: running;
       animation-play-state: running;
    }

    .sl_command:target ~ #slideshow .pause    { opacity:0; }
    .sl_command:target ~ #slideshow .play    { opacity:1; right: 25px; cursor: pointer; }
    #sl_play:target ~ #slideshow .pause    { opacity:0; }
    #sl_play:target ~ #slideshow .play       { opacity:0; right: 55px; cursor: default;}

    .sl_i:target ~ #slideshow .slider                           { visibility: hidden }
    .sl_i:target ~ #slideshow .slider figcaption                  { visibility: hidden }
    .sl_i:target ~ #slideshow .dots_commands li:first-child a:after      { display:none; }
    .sl_i:target ~ #slideshow .dots_commands li:first-child a:before   { display:block; }}

    #sl_i1:target ~ #slideshow .commands                        { display: none; }
    #sl_i1:target ~ #slideshow .commands1                        { display: block; }
    #sl_i1:target ~ #slideshow .c_slider                        { background-position: 0 0, 640px 0, 1280px 0, 1920px 0; }
    #sl_i1:target ~ #slideshow .dots_commands li:first-child a:before   { left:0; }

    #sl_i2:target ~ #slideshow .commands                        { display: none; }
    #sl_i2:target ~ #slideshow .commands2                        { display: block; }
    #sl_i2:target ~ #slideshow .c_slider                        { background-position: -640px 0, 0 0, 640px 0, 1280px 0; }
    #sl_i2:target ~ #slideshow .dots_commands li:first-child a:before   { left:18px; }

    #sl_i3:target ~ #slideshow .commands                        { display: none; }
    #sl_i3:target ~ #slideshow .commands3                        { display: block; }
    #sl_i3:target ~ #slideshow .c_slider                        { background-position: -1280px 0, -640px 0, 0 0, 640px 0; }
    #sl_i3:target ~ #slideshow .dots_commands li:first-child a:before   { left:36px; }

    #sl_i4:target ~ #slideshow .commands                        { display: none; }
    #sl_i4:target ~ #slideshow .commands4                        { display: block; }
    #sl_i4:target ~ #slideshow .c_slider                        { background-position: -1920px 0, -1280px 0, -640px 0, 0 0; }
    #sl_i4:target ~ #slideshow .dots_commands li:first-child a:before   { left:54px; }










            </style>

          </head>

              <body>

                
              
              
              
              
              
              
      
      
      
       <section id="slideshow">
      
          
          
          <div class="container">
             <div class="c_slider"></div>
             <div class="slider">
                    <figure>
                        <a href="http://www.crazymocs.com/t4654-ucs-75095-tie-fighter">
                      <img src="http://i38.servimg.com/u/f38/17/81/21/62/10383910.jpg" alt="" width="640" height="310" />
                      <figcaption><span style="color: #188707;"><b>NEWS LEGO®️ = UCS 75095 TIE Fighter™️</b></span></figcaption>
                    </a></figure><!--  
                   --><figure>
                   <a href="http://www.crazymocs.com/t4644-lego-new-york-toy-fair-2015">
                      <img src="http://i38.servimg.com/u/f38/17/81/21/62/16420610.jpg" alt="" width="640" height="310" />
                      <figcaption> <span style="color: #00EEF2;"><b>NEWS LEGO®️ = New York Toy Fair 2015</b></span></figcaption>
                    </a></figure><!--
                   --><figure>
                  <a href="http://www.crazymocs.com/t4599-jurassic-world-video">
                      <img src="http://i38.servimg.com/u/f38/17/81/21/62/b9ctb411.jpg" alt="" width="640" height="310" />
                      <figcaption><span style="color: #ED008A;"><b>NEWS LEGO®️ = Jurassic World Video</b></span></figcaption>
                    </a></figure><!--  
                   --><figure>
               <a href="http://www.crazymocs.com/t4593-lego-ideas-wall-e-doctor-who-bientot-chez-lego">
                      <img src="http://i38.servimg.com/u/f38/17/81/21/62/17818410.png" alt="" width="640" height="310" />
                      <figcaption><span style="color: #F5DD00;"><b>NEWS LEGO®️ = Ideas Wall-E</b></span></figcaption>
                    </a></figure>
             </div>
          </div>
          
          <span id="timeline"></span>
          
          
          
       </section>
      
      
      

              </body>

        </html>

Voici la partie avec les images (La toutes les images s’affiche correctement sauf que pas possible de cliquer sur les liens):

Code:
        <div class="container">
             <div class="c_slider"></div>
             <div class="slider">
                    <figure>
                        <a href="http://www.crazymocs.com/t4654-ucs-75095-tie-fighter">
                      <img src="http://i38.servimg.com/u/f38/17/81/21/62/10383910.jpg" alt="" width="640" height="310" />
                      <figcaption><span style="color: #188707;"><b>NEWS LEGO®️ = UCS 75095 TIE Fighter™️</b></span></figcaption>
                    </a></figure><!--  
                   --><figure>
                   <a href="http://www.crazymocs.com/t4644-lego-new-york-toy-fair-2015">
                      <img src="http://i38.servimg.com/u/f38/17/81/21/62/16420610.jpg" alt="" width="640" height="310" />
                      <figcaption> <span style="color: #00EEF2;"><b>NEWS LEGO®️ = New York Toy Fair 2015</b></span></figcaption>
                    </a></figure><!--
                   --><figure>
                  <a href="http://www.crazymocs.com/t4599-jurassic-world-video">
                      <img src="http://i38.servimg.com/u/f38/17/81/21/62/b9ctb411.jpg" alt="" width="640" height="310" />
                      <figcaption><span style="color: #ED008A;"><b>NEWS LEGO®️ = Jurassic World Video</b></span></figcaption>
                    </a></figure><!--  
                   --><figure>
               <a href="http://www.crazymocs.com/t4593-lego-ideas-wall-e-doctor-who-bientot-chez-lego">
                      <img src="http://i38.servimg.com/u/f38/17/81/21/62/17818410.png" alt="" width="640" height="310" />
                      <figcaption><span style="color: #F5DD00;"><b>NEWS LEGO®️ = Ideas Wall-E</b></span></figcaption>
                    </a></figure>
             </div>
          </div>
          

Voici un autre code ( sauf que la les images bug et la les liens sont accessibles Wink )

Code:

                        <a href="http://www.crazymocs.com/t4654-ucs-75095-tie-fighter">
                    <figure>
                      <img src="https://scontent-cdg.xx.fbcdn.net/hphotos-xfp1/v/t1.0-9/10383951_909506472415236_7991889518309825571_n.jpg?oh=bbd6041ffa2a20e156cc6b5fd11fa236&oe=5551E5A5" alt="" width="640" height="310" />
                      <figcaption><span style="color: #188707;">UCS 75095 TIE Fighter™️ </span></figcaption>
                    </figure>        </a><!--

                   --><a href="http://www.crazymocs.com/t4644-lego-new-york-toy-fair-2015">
                    <figure>
                      <img src="http://farm8.staticflickr.com/7339/16420640706_07a4d1ef97_z.jpg" alt="" width="640" height="310" />
                      <figcaption> <span style="color: #FFFFFF;">LEGO®️ NYTF 2015 </span></figcaption>
                    </figure>        </a><!--

                    --><a href="http://www.crazymocs.com/t4599-jurassic-world-video">
                    <figure>
                      <img src="http://i38.servimg.com/u/f38/17/81/21/62/b9ctb410.jpg" alt="" width="640" height="310" />
                      <figcaption><span style="color: #ED008A;">Jurassic World Video</span></figcaption>
                    </figure>   </a><!--
              
                  --><a href="http://www.crazymocs.com/t4593-lego-ideas-wall-e-doctor-who-bientot-chez-lego">
                    <figure>
                      <img src="https://dp1eoqdp1qht7.cloudfront.net/community/blogs/1/1781843-wall-e-watermark.png" alt="" width="640" height="310" />
                      <figcaption><span style="color: #F5DD00;">LEGO®️ Ideas Wall-E</span></figcaption>
                    </figure></a>

Je suis perdu Help me please, thx.
Desolation

Desolation
***

Masculin
Messages : 126
Inscrit(e) le : 13/10/2012

http://crazymocs.forumgratuit.org/
Desolation a été remercié(e) par l'auteur de ce sujet.

Résolu Re: SlidesShow Accueil

Message par Desolation Mar 17 Fév - 10:43

Petit Up ???
Desolation

Desolation
***

Masculin
Messages : 126
Inscrit(e) le : 13/10/2012

http://crazymocs.forumgratuit.org/
Desolation a été remercié(e) par l'auteur de ce sujet.

Résolu Re: SlidesShow Accueil

Message par Desolation Mar 17 Fév - 11:57

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml">
          <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>CRAZY MOCS V2</title>

            <style type="text/css">


    body {
       width: 800px;
       margin: 0 auto;
       color:#777;
    }
    h1, h2 {
       text-align:center;
       margin-top:0;
    }
    h1 {
       padding: 1em 0;
       margin-left: 1.5em;
       font-size: 2.5em;
       font-family: 'Amaranth', Arial, Verdana, sans-serif;
    }
    h1 span {
       display:block;
       margin: 0.75em 0 0 -2em;
       line-height: 1em;
       font-size: 0.55em;
    }
    h1 .cursive {
       margin: 0 0 0 -3em;
       font-size: 1.1em;
       line-height:0.5em;
       color: #bd9b83;
    }
    figure {
       display: inline-block;
    }
    a {
       text-decoration: none;
       border-bottom: 1px solid #bc9d88;
       color: #8f6b51;
    }
    a:hover,
    a:focus {
       border-bottom: 1px dashed #bc9d88;
    }
    .sread {
       position: absolute;
       left:-9999px;
    }
    .cursive {
       font-family: 'Mr Dafoe', cursive;
    }
    .center {
       text-align: center;
    }

    #slideshow {
       position: relative;
       width: 640px;
       height: 310px;
       padding: 15px;
       margin: 0 auto 2em;
       border: 1px solid #ddd;
       background: #707070;
       background: -webkit-linear-gradient(#707070, #707070 20%, #EEE 80%, #DDD);
       background: -moz-linear-gradient(#707070, #707070 20%, #EEE 80%, #DDD);
       background: -ms-linear-gradient(#707070, #707070 20%, #EEE 80%, #DDD);
       background: -o-linear-gradient(#707070, #707070 20%, #EEE 80%, #DDD);
       background: linear-gradient(#707070, #707070 20%, #EEE 80%, #DDD);
      
       -webkit-border-radius: 2px 2px 2px 2px;
       -moz-border-radius: 2px 2px 2px 2px;
       border-radius: 2px 2px 2px 2px;
      
       -webkit-box-shadow: 0 0 3px rgba(0,0,0, 0.2);
       -moz-box-shadow: 0 0 3px rgba(0,0,0, 0.2);
       box-shadow: 0 0 3px rgba(0,0,0, 0.2);
    }

    /* avanced box-shadow : http://www.creativejuiz.fr/blog/les-tutoriels/ombre-avancees-avec-css3-et-box-shadow */
    #slideshow:before,
    #slideshow:after {
       content: " ";
       position: absolute;
       bottom:16px;
       width: 50%;
       height: 20px;
       background: rgba(0,0,0,0.1);
      
       -webkit-border-radius: 50%;
       -moz-border-radius: 50%;
       border-radius: 50%;
      
       -webkit-box-shadow: 0 0 3px rgba(0,0,0, 0.4), 0 20px 10px rgba(0,0,0, 0.7);
       -moz-box-shadow: 0 0 3px rgba(0,0,0, 0.4), 0 20px 10px rgba(0,0,0, 0.7);
       box-shadow: 0 0 3px rgba(0,0,0, 0.4), 0 20px 10px rgba(0,0,0, 0.7);
      
       z-index: -10;
    }
    #slideshow:before {
       left:0;
       -webkit-transform: rotate(-4deg);
       -moz-transform: rotate(-4deg);
       -ms-transform: rotate(-4deg);
       -o-transform: rotate(-4deg);
       transform: rotate(-4deg);
    }
    #slideshow:after {
       right:0;
       -webkit-transform: rotate(4deg);
       -moz-transform: rotate(4deg);
       -ms-transform: rotate(4deg);
       -o-transform: rotate(4deg);
       transform: rotate(4deg);
    }
    #slideshow .commands {
       position: absolute;
       top: 45%;
       padding: 5px 13px;
       border-bottom:0;
       font-family: 'Amaranth', Arial, Verdana, sans-serif;
       font-size: 1.3em;
       color: #aaa;
       text-decoration:none;
       background-color: #eee;
       background-image: -webkit-linear-gradient(#fff,#ddd);
       background-image: -moz-linear-gradient(#fff,#ddd);
       background-image: -ms-linear-gradient(#fff,#ddd);
       background-image: -o-linear-gradient(#fff,#ddd);
       background-image: linear-gradient(#fff,#ddd);
       text-shadow: 0 0 1px #aaa;
      
       -webkit-border-radius: 50%;
       -moz-border-radius: 50%;
       border-radius: 50%;
      
       -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
       -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
       box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    }
    #slideshow .commands:after {
       position: absolute;
       bottom: 65px; left:-18px;
       content: attr(title);
       width: 50px;
       padding: 12px;
       background: #fff;
       font-family: Georgia, Times, serif;
       font-size: 14px;
       text-align:center;
       text-shadow: 0 0 0;
       opacity: 0;
      
       -webkit-border-radius: 12px;
       -moz-border-radius: 12px;
       border-radius: 12px;
      
       -webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.4);
       -moz-box-shadow: 1px 1px 4px rgba(0,0,0,0.4);
       box-shadow: 1px 1px 4px rgba(0,0,0,0.4);
      
       -webkit-transition: opacity 0.7s, bottom 0.7s;
       -moz-transition: opacity 0.7s, bottom 0.7s;
       transition: opacity 0.7s, bottom 0.7s;
    }
    #slideshow .commands:before {
       position: absolute;
       bottom: 55px; left: 13px;
       content: " ";
       width: 1px; height: 1px;
       border-top: 10px solid #fff;
       border-left: 5px solid transparent;
       border-right: 5px solid transparent;
       z-index:100;
       opacity: 0;
      
       -webkit-transition: opacity 0.7s, bottom 0.7s;
       -moz-transition: opacity 0.7s, bottom 0.7s;
       transition: opacity 0.7s, bottom 0.7s;
    }
    #slideshow .commands:hover:before {
       bottom: 35px;
       opacity: 1;
    }
    #slideshow .commands:hover:after {
       bottom: 45px;
       opacity: 1;
    }
    #slideshow .commands:focus {
       outline: 0;
       -webkit-transform: translate(1px, 2px);
       -moz-transform: translate(1px, 2px);
       -ms-transform: translate(1px, 2px);
       -o-transform: translate(1px, 2px);
       transform: translate(1px, 2px);
    }
    #slideshow .commands:active {
       -webkit-transform: translate(0, 1px);
       -moz-transform: translate(0, 1px);
       -ms-transform: translate(0, 1px);
       -o-transform: translate(0, 1px);
       transform: translate(0, 1px);
    }
    #slideshow .prev {
       left: -48px;
    }
    #slideshow .next {
       right: -48px;
    }
    #slideshow .prev,
    #slideshow .next {
       display:none;
    }
    #slideshow .prev,
    #slideshow .next {
       display:none;
    }
    #slideshow .commands1 {
       display: block;
    }

    /* play/pause commands */
    .play_commands {
       position: absolute;
       width: 22px; height: 22px;
       top: 25px; right: 25px;
       z-index: 10;
       text-indent: -9999px;
       border:0 none;
       opacity: 0;

       -webkit-transition: opacity 1s, right 1s;
       -moz-transition: opacity 1s, right 1s;
       transition: opacity 1s, right 1s;
    }
    .play { right: 55px; cursor: default; }

    .pause:hover { border:0 none; }
    .play_commands:focus { outline:0; }

    #slideshow:hover .pause,
    #sl_play:target ~ #slideshow:hover .pause,
    .play_commands:focus {
       opacity: 1;
    }
    .sl_command:target ~ #slideshow:hover .pause,
    #sl_pause:target ~ #slideshow:hover .pause {
       opacity: 0;
    }
    .pause:after,
    .pause:before {
       position: absolute;
       display: block;
       content: " ";
       top:0;
       width:38%;
       height: 22px;
       background: #fff;
       background: rgba(255,255,255,0.5);
    }
    .pause:after {
       right:0;
    }
    .pause:before {
       left:0;
    }
    .play {
       width: 1px;
       height: 1px;
       border-top: 10px solid transparent;
       border-left: 20px solid #fff;
       border-left: 20px solid rgba(255,255,255,0.5);
       border-bottom: 10px solid transparent;
       opacity: 0;
    }
    .play:hover,
    .play:focus {
       border-bottom: 10px solid transparent;
    }

    #slideshow .container {
       position:relative;
       width: 640px;
       height: 310px;
       overflow: hidden;
    }
    /* timeline base */
    #slideshow .container:after {
       position:absolute;
       bottom: 0; left:0;
       content: " ";
       background: #999;
       width: 100%;
       height: 1px;
    }

    @-webkit-keyframes slider {
       0%, 20%, 100%   { left: 0 }
       25%, 45%      { left: -100% }
       50%, 70%      { left: -200% }
       75%, 95%      { left: -300% }
    }
    @-moz-keyframes slider {
       0%, 20%, 100%   { left: 0 }
       25%, 45%      { left: -100% }
       50%, 70%      { left: -200% }
       75%, 95%      { left: -300% }
    }
    @keyframes slider {
       0%, 20%, 100%   { left: 0 }
       25%, 45%      { left: -100% }
       50%, 70%      { left: -200% }
       75%, 95%      { left: -300% }
    }

    #slideshow .slider {
       position: absolute;
       left:0; top:0;
       width: 400%;
       height: 310px;
      
       -webkit-animation: slider 32s infinite;
       -moz-animation: slider 32s infinite;
       animation: slider 32s infinite;
    }
    .sl_i:target ~ #slideshow .slider {
       -webkit-transition: left 1s;
       -moz-transition: left 1s;
       transition: left 1s;
    }
    .sl_command:target ~ #slideshow .slider {
       -webkit-transition: opacity 1s;
       -moz-transition: opacity 1s;
       transition: opacity 1s;
    }
    #slideshow .c_slider {
       position: absolute;
       left:0; top:0;
       width: 400%;
       height: 310px;
       background: url(img/dummy-640x310-1.jpg) 0 0 no-repeat,
              url(img/dummy-640x310-2.jpg) 640px 0 no-repeat,
              url(img/dummy-640x310-3.jpg) 1280px 0 no-repeat,
              url(img/dummy-640x310-4.jpg) 1920px 0 no-repeat;
   transition: background 1s;
   }
    .sl_i:target ~ #slideshow .c_slider {
       -webkit-transition: background 1s;
       -moz-transition: background 1s;
       transition: background 1s;
    }

    #slideshow figure {
       position:relative;
       padding:0; margin:0;
    }

    @-webkit-keyframes figurer {
       0%, 25%, 50%, 75%, 100%                  { -webkit-box-shadow: 0 0 65px rgba(0,0,0, 0) inset; box-shadow: 0 0 65px rgba(0,0,0, 0) inset;   }
       5%, 20%, 30%, 45%, 55%, 70%, 80%, 95%      { -webkit-box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;   box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset; }
    }
    @-moz-keyframes figurer {
       0%, 25%, 50%, 75%, 100%                  { -moz-box-shadow: 0 0 65px rgba(0,0,0, 0) inset; box-shadow: 0 0 65px rgba(0,0,0, 0) inset;   }
       5%, 20%, 30%, 45%, 55%, 70%, 80%, 95%      { -moz-box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;   box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset; }
    }
    @keyframes figurer {
       0%, 25%, 50%, 75%, 100%                  { -moz-box-shadow: 0 0 65px rgba(0,0,0, 0) inset; box-shadow: 0 0 65px rgba(0,0,0, 0) inset;   }
       5%, 20%, 30%, 45%, 55%, 70%, 80%, 95%      { -moz-box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;   box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset; }
    }
    #slideshow figure:after {
       position: absolute;
       display:block;
       content: " ";
       top:0; left:0;
       width: 100%; height: 100%;
       -webkit-box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;
       -moz-box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;
       box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;
      
       -webkit-animation: figurer 32s infinite;
       -moz-animation: figurer 32s infinite;
       animation: figurer 32s infinite;
    }

    @-webkit-keyframes figcaptionner {
       0%, 25%, 50%, 75%, 100%                  { bottom: -55px;   }
       5%, 20%, 30%, 45%, 55%, 70%, 80%, 95%      { bottom: 5px;      }
    }
    @-moz-keyframes figcaptionner {
       0%, 25%, 50%, 75%, 100%                  { bottom: -55px;   }
       5%, 20%, 30%, 45%, 55%, 70%, 80%, 95%      { bottom: 5px;      }
    }
    @keyframes figcaptionner {
       0%, 25%, 50%, 75%, 100%                  { bottom: -55px;   }
       5%, 20%, 30%, 45%, 55%, 70%, 80%, 95%      { bottom: 5px;      }
    }

    #slideshow figcaption {
       position:absolute;
       padding: 20px 20px; margin:0;
       left:0; right:0; bottom: 5px;
       text-align:center;
       letter-spacing: 0.05em;
       word-spacing: 0.05em;
       font-family: Georgia, Times, serif;
       background: #000;
       background: rgba(255,255,255,0.7);
       border-top: 1px solid rgb(225,225,225);
       color: #555;
       text-shadow: -1px -1px 0 rgba(255,255,255,0.3);
      
       -webkit-animation: figcaptionner 32s infinite;
       -moz-animation: figcaptionner 32s infinite;
       animation: figcaptionner 32s infinite;
    }

    @-webkit-keyframes timeliner {
       0%, 25%, 50%, 75%, 100%   { width: 0;      }
       20%, 45%, 70%, 90%      { width: 640px;   }
    }
    @-moz-keyframes timeliner {
       0%, 25%, 50%, 75%, 100%   { width: 0;      }
       20%, 45%, 70%, 90%      { width: 640px;   }
    }
    @keyframes timeliner {
       0%, 25%, 50%, 75%, 100%   { width: 0;      }
       20%, 45%, 70%, 90%      { width: 640px;   }
    }

    #timeline {
       position: absolute;
       background: #999;
       bottom: 15px;
       left: 15px;
       height: 1px;
       background: rgb(214,98,13);
       background: rgba(214,98,13,.8);
       width: 0;
      
       -webkit-animation: timeliner 32s infinite;
       -moz-animation: timeliner 32s infinite;
       animation: timeliner 32s infinite;
    }

    /* dots styles */
    .dots_commands  {
       position: relative;
       top: 32px;
       padding:0; margin:0;
       text-align:center;
    }
    .dots_commands li {
       display:inline;
       padding:0; margin:0;
       list-style:none;
    }
    .dots_commands a {
       position: relative;
       display:inline-block;
       height:8px; width: 8px;
       margin: 0 5px;
       text-indent: -9999px;
       background: #fff;
       border-bottom:0;
      
       -webkit-border-radius: 50%;
       -moz-border-radius: 50%;
       border-radius: 50%;
      
       -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;
       -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;
       box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;
      
       z-index:25;
    }
    .dots_commands a:focus { outline: none; background: orange;}
    .dots_commands li + li a {
       z-index:10;
    }
    @-moz-keyframes dotser {
       0%, 100%    { opacity: 1; left: 0;       }
      
       20%         { opacity: 1; left: 0;      }
       22%         { opacity: 0; left: 0;      }
       23%         { opacity: 0; left: 18px;   }
       25%         { opacity: 1; left: 18px;   }
      
       45%         { opacity: 1; left: 18px;   }
       47%         { opacity: 0; left: 18px;   }
       48%         { opacity: 0; left: 36px;   }
       50%         { opacity: 1; left: 36px;   }
      
       70%         { opacity: 1; left: 36px;   }
       72%         { opacity: 0; left: 36px;   }
       73%         { opacity: 0; left: 54px;   }
       75%         { opacity: 1; left: 54px;   }
      
       95%         { opacity: 1; left: 54px;   }
       97%         { opacity: 0; left: 54px;   }
       98%         { opacity: 0; left: 0;   }
    }
    @-webkit-keyframes dotser {
       0%, 100%    { opacity: 1; left: 0;       }
      
       20%         { opacity: 1; left: 0;      }
       22%         { opacity: 0; left: 0;      }
       23%         { opacity: 0; left: 18px;   }
       25%         { opacity: 1; left: 18px;   }
      
       45%         { opacity: 1; left: 18px;   }
       47%         { opacity: 0; left: 18px;   }
       48%         { opacity: 0; left: 36px;   }
       50%         { opacity: 1; left: 36px;   }
      
       70%         { opacity: 1; left: 36px;   }
       72%         { opacity: 0; left: 36px;   }
       73%         { opacity: 0; left: 54px;   }
       75%         { opacity: 1; left: 54px;   }
      
       95%         { opacity: 1; left: 54px;   }
       97%         { opacity: 0; left: 54px;   }
       98%         { opacity: 0; left: 0;   }
    }
    @keyframes dotser {
       0%, 100%    { opacity: 1; left: 0;       }
      
       20%         { opacity: 1; left: 0;      }
       22%         { opacity: 0; left: 0;      }
       23%         { opacity: 0; left: 18px;   }
       25%         { opacity: 1; left: 18px;   }
      
       45%         { opacity: 1; left: 18px;   }
       47%         { opacity: 0; left: 18px;   }
       48%         { opacity: 0; left: 36px;   }
       50%         { opacity: 1; left: 36px;   }
      
       70%         { opacity: 1; left: 36px;   }
       72%         { opacity: 0; left: 36px;   }
       73%         { opacity: 0; left: 54px;   }
       75%         { opacity: 1; left: 54px;   }
      
       95%         { opacity: 1; left: 54px;   }
       97%         { opacity: 0; left: 54px;   }
       98%         { opacity: 0; left: 0;   }
    }
    .dots_commands li:first-child a:after,
    .dots_commands li:first-child a:before {
       position: absolute;
       top: 0; left: 0;
       content: " ";
       width: 8px; height: 8px;
       background: #bd9b83;
       z-index:20;
       -webkit-border-radius: 50%;
       -moz-border-radius: 50%;
       border-radius: 50%;
      
       -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;
       -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;
       box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;
    }
    .dots_commands li:first-child a:after {
       -webkit-animation: dotser 32s infinite; /* webkit can't animate pseudo-element =_= :L: */
       -moz-animation: dotser 32s infinite; /* thanks moz !  */
       animation: dotser 32s infinite;
    }
    .dots_commands li:first-child a:before {
       display:none;
    }




    /* need a stop ! */

    /* actions when target ! */
    .sl_command { display: none; }

    .sl_command:target ~ #slideshow .slider,
    .sl_command:target ~ #slideshow figure:after,
    .sl_command:target ~ #slideshow figcaption,
    .sl_command:target ~ #slideshow #timeline,
    .sl_command:target ~ #slideshow .dots_commands li:first-child a:after {
       -webkit-animation-play-state: paused;
       -moz-animation-play-state: paused;
       animation-play-state: paused;
    }

    #sl_play:target ~ #slideshow .slider,
    #sl_play:target ~ #slideshow figure:after,
    #sl_play:target ~ #slideshow figcaption,
    #sl_play:target ~ #slideshow #timeline,
    #sl_play:target ~ #slideshow .dots_commands li:first-child a:after {
       -webkit-animation-play-state: running;
       -moz-animation-play-state: running;
       animation-play-state: running;
    }

    .sl_command:target ~ #slideshow .pause    { opacity:0; }
    .sl_command:target ~ #slideshow .play    { opacity:1; right: 25px; cursor: pointer; }
    #sl_play:target ~ #slideshow .pause    { opacity:0; }
    #sl_play:target ~ #slideshow .play       { opacity:0; right: 55px; cursor: default;}

    .sl_i:target ~ #slideshow .slider                           { visibility: hidden }
    .sl_i:target ~ #slideshow .slider figcaption                  { visibility: hidden }
    .sl_i:target ~ #slideshow .dots_commands li:first-child a:after      { display:none; }
    .sl_i:target ~ #slideshow .dots_commands li:first-child a:before   { display:block; }}

    #sl_i1:target ~ #slideshow .commands                        { display: none; }
    #sl_i1:target ~ #slideshow .commands1                        { display: block; }
    #sl_i1:target ~ #slideshow .c_slider                        { background-position: 0 0, 640px 0, 1280px 0, 1920px 0; }
    #sl_i1:target ~ #slideshow .dots_commands li:first-child a:before   { left:0; }

    #sl_i2:target ~ #slideshow .commands                        { display: none; }
    #sl_i2:target ~ #slideshow .commands2                        { display: block; }
    #sl_i2:target ~ #slideshow .c_slider                        { background-position: -640px 0, 0 0, 640px 0, 1280px 0; }
    #sl_i2:target ~ #slideshow .dots_commands li:first-child a:before   { left:18px; }

    #sl_i3:target ~ #slideshow .commands                        { display: none; }
    #sl_i3:target ~ #slideshow .commands3                        { display: block; }
    #sl_i3:target ~ #slideshow .c_slider                        { background-position: -1280px 0, -640px 0, 0 0, 640px 0; }
    #sl_i3:target ~ #slideshow .dots_commands li:first-child a:before   { left:36px; }

    #sl_i4:target ~ #slideshow .commands                        { display: none; }
    #sl_i4:target ~ #slideshow .commands4                        { display: block; }
    #sl_i4:target ~ #slideshow .c_slider                        { background-position: -1920px 0, -1280px 0, -640px 0, 0 0; }
    #sl_i4:target ~ #slideshow .dots_commands li:first-child a:before   { left:54px; }





    /* EXPLANATIONS */


    #main .download {
       text-align: center;
       margin: 3em 0 1em;
       line-height: 1.35em;
    }
    #main .download a {
       position: relative;
       display:inline-block;
       padding: 8px 22px 14px;
       border: 0;
       color: #fff;
       background:#8a796d;
       text-shadow: -1px -1px 0 #60544c;
       font-weight:bold;
       overflow: hidden;
      
       -moz-box-shadow: 0 6px 0 #403c3a;
       box-shadow: 0 6px 0 rgba(0,0,0,0.7), 0 7px 6px -5px rgba(255,255,255,0.40) inset;
       border-radius: 12px;
      
       -webkit-transition: color .5s;
       -moz-transition: color .5s;
       transition: color .5s;
    }
    #main .download .arrow {
       position: relative;
       top: 5px;
       display: inline-block;
       padding: 1px 6px;
       margin-right: 10px;
       color: #cabfb6;
       font-size: 22px;
       background: rgba(0,0,0,0.1);
       border: 1px solid rgba(0,0,0,0.2);
       -webkit-border-radius: 50%;
       -moz-border-radius: 50%;
       border-radius: 50%;
       -webkit-transition: all .5s;
       -moz-transition: all .5s;
       transition: all .5s;
    }
    @-webkit-keyframes downloader {
       0% { top:5px; }
       45% { top:60px; }
       49% { opacity: 0; }
       50% { top: -60px; }
       51% { opacity: 1; }
       100% { top:5px; color: #cbbfb5; text-shadow: 1px 1px #777; background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.5); }
      
    }
    @-moz-keyframes downloader {
       0% { top:5px; }
       45% { top:60px; }
       49% { opacity: 0; }
       50% { top: -60px; }
       51% { opacity: 1; }
       100% { top:5px; color: #cbbfb5; text-shadow: 1px 1px #777; background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.5); }
      
    }
    @keyframes downloader {
       0% { top:5px; }
       45% { top:60px; }
       49% { opacity: 0; }
       50% { top: -60px; }
       51% { opacity: 1; }
       100% { top:5px; color: #cbbfb5; text-shadow: 1px 1px #777; background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.5); }
      
    }
    #main .download a:hover,
    #main .download a:focus {
       color: #cbbfb5;
    }
    #main .download a:hover .arrow,
    #main .download a:focus .arrow {
       -webkit-animation: downloader .4s forwards;
       -moz-animation: downloader .4s forwards;
       animation: downloader .4s forwards;
    }

    #main .download .file {
       display: block;
       font-weight:normal;
       font-size: 0.6em;
       margin-left: 40px;
       line-height: 0.55em;
    }
    #main .download .already {
       font-size: 0.7em;
       line-height: 2.4em;
    }
    #main .download .nb {
       font-weight:bold;
    }

    #main {
       padding: 10px;
       color: #8a796d;
       font-family: Helvetica, Arial, sans-serif;
       text-align:left;
       text-shadow: -1px -1px 0 rgba(255,255,255,0.1);
    }
    #main h2, #main h3 {
       margin-top: 45px;
       font-size: 2em;
       font-family: "Amaranth", cursive;
       text-align:left;
    }
    #main h3 {
       margin-top: 25px;
       font-size: 1.4em;
    }
    #main p {
       line-height: 1.85em;
       margin-top: 2em;
    }
    #main  .col2,
    #main .col2 {
       position: relative;
       margin-top: 1em;
       -webkit-column-count: 2;
       -webkit-column-gap: 3em;
       -moz-column-count: 2;
       -moz-column-gap: 3em;
       column-count: 2;
       column-gap: 3em;
    }
    #main .col2 + .col2 {
       margin-top: 3em;
    }
    #main p + p:before {
       position: absolute;
       content: "*";
       width: 100%;
       text-align: center;
       top: -1.2em;
       font-size: 2em;
       color: #e1d7cf;
       text-shadow: 1px 1px 0 rgba(0,0,0,0.15);
    }
    footer {
       padding: 25px;
       margin-bottom: 38px;
       border: 1px solid rgba(0,0,0,0.1);
       background: rgba(0,0,0,0.1);
       color: #777;
       text-align: center;
    }
    footer p {
       margin:0.5em 0;
    }
    footer .sep {
       display: inline-block;
       margin: 0 1em;
    }


    /*
    **    Sharre, bouton design by Sacha Greif
    **    improvement by Geoffrey Crofte
    */

    #sharrre {
       float: left;
       margin: 0 22%;
       padding: 45px 0;
       padding-left: 20px;
       overflow: hidden;
    }
    .sharrre {
       margin: 0 25px;
       float:left;
    }
    .sharrre .box {
       float:left;
       width:80px;
       height:75px;
       margin-bottom: 4px;
       background: #dee7ea; /* Old browsers */
       background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eee), color-stop(20%,#eee), color-stop(100%,#e5eef2)); /* Chrome,Safari4+ */
       background: -webkit-linear-gradient(top, #eee 0%,#eee 20%,#e5eef2 100%); /* Chrome10+,Safari5.1+ */
       background: -moz-linear-gradient(top, #eee 0%, #eee 20%, #e5eef2 100%); /* FF3.6+ */
       background: -o-linear-gradient(top, #eee 0%,#eee 20%,#e5eef2 100%); /* Opera 11.10+ */
       background: -ms-linear-gradient(top, #eee 0%,#eee 20%,#e5eef2 100%); /* IE10+ */
       background: linear-gradient(top, #eee 0%,#eee 20%,#e5eef2 100%); /* W3C */
       filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#e5eef2',GradientType=0 ); /* IE6-9 */
      
       -webkit-border-radius:7px;
       -moz-border-radius:7px;
       border-radius:7px;
      
       -webkit-box-shadow:0 1px 0 #C3C3C3, 0 6px 0 #54a2bc, 0px 2px 3px 0px rgba(47, 58, 61, 0.25), inset 0px 1px 0px 0px rgba(255, 255, 255, 1);
       -moz-box-shadow:0 1px 0 #C3C3C3, 0 6px 0 #54a2bc, 0px 2px 3px 0px rgba(47, 58, 61, 0.25), inset 0px 1px 0px 0px rgba(255, 255, 255, 1);
       box-shadow:0 1px 0 #C3C3C3, 0 6px 0 #54a2bc, 0px 2px 3px 0px rgba(47, 58, 61, 0.25), inset 0px 2px 0px 0px rgba(255, 255, 255, 1);
    }
    #facebook .box {
       -webkit-box-shadow:0 1px 0 #C3C3C3, 0 6px 0 #28437a, 0px 2px 3px 0px rgba(47, 58, 61, 0.25), inset 0px 1px 0px 0px rgba(255, 255, 255, 1);
       -moz-box-shadow:0 1px 0 #C3C3C3, 0 6px 0 #28437a, 0px 2px 3px 0px rgba(47, 58, 61, 0.25), inset 0px 1px 0px 0px rgba(255, 255, 255, 1);
       box-shadow:0 1px 0 #C3C3C3, 0 6px 0 #28437a, 0px 2px 3px 0px rgba(47, 58, 61, 0.25), inset 0px 2px 0px 0px rgba(255, 255, 255, 1);
    }
    #googleplus .box {
       -webkit-box-shadow:0 1px 0 #C3C3C3, 0 6px 0 #404040, 0px 2px 3px 0px rgba(47, 58, 61, 0.25), inset 0px 1px 0px 0px rgba(255, 255, 255, 1);
       -moz-box-shadow:0 1px 0 #C3C3C3, 0 6px 0 #404040, 0px 2px 3px 0px rgba(47, 58, 61, 0.25), inset 0px 1px 0px 0px rgba(255, 255, 255, 1);
       box-shadow:0 1px 0 #C3C3C3, 0 6px 0 #404040, 0px 2px 3px 0px rgba(47, 58, 61, 0.25), inset 0px 2px 0px 0px rgba(255, 255, 255, 1);
    }
    .sharrre .box:active,
    #facebook .box:active,
    #googleplus .box:active {
       margin-top:4px;
       margin-bottom: 0;
       -webkit-box-shadow:0 0 2px #777;
       -moz-box-shadow:0 0 2px #777;
       box-shadow:0 0 2px #777;
    }
    .sharrre .count,
    .sharrre .share {
       display:inline-block;
       width:78px;
       text-align:center;
       font-weight:bold;
    }
    .sharrre .count {
       position:relative;
       height:40px;
       border:1px solid #b9b9b9;
       border-width:1px 1px 0 1px;
       font-size:20px;
       color:#444444;
       text-shadow: 0px 1px 0px #ffffff;
       line-height:40px;
      
       -webkit-border-radius:7px 7px 0 0;
       -moz-border-radius:7px 7px 0 0;
       border-radius:7px 7px 0 0;
      
       filter: dropshadow(color=#ffffff, offx=0, offy=1);
    }
    .sharrre .count:before,
    .sharrre .count:after {
       content:'';
       position:absolute;
       display:block;
       left:49%;
       width:0; height:0;
    }
    .sharrre .count:before {
       margin-left:-7px;
       bottom: -14px;
       border:solid 7px transparent;
       border-top-color:#b2c6cc;
    }
    .sharrre .count:after {
       margin-left:-6px;
       bottom:-12px;
       border:solid 6px transparent;
       border-top-color:#e5eef2;
    }
    .sharrre .share {
       height:34px;
       line-height:34px;
       color:#ffffff;
       font-size:13px;
       text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.35);
       border:1px solid #6fa4b5;
       border-width:0 1px 1px 1px;
       background-color:#7ac5df;
      
       -webkit-border-radius:0 0 7px 7px;
       -moz-border-radius:0 0 7px 7px;
       border-radius:0 0 7px 7px;
      
       -webkit-box-shadow:inset 0px 1px 0px 0px rgba(105, 164, 185, 1), inset 0px -1px 2px 0px rgba(255, 255, 255, 0.6), inset 0px 2px 1px 0px rgba(255, 0, 0, 0.15);
       -moz-box-shadow:inset 0px 1px 0px 0px rgba(105, 164, 185, 1), inset 0px -1px 2px 0px rgba(255, 255, 255, 0.6), inset 0px 2px 1px 0px rgba(255, 0, 0, 0.15);
       box-shadow:inset 0px 1px 0px 0px rgba(105, 164, 185, 1), inset 0px -1px 2px 0px rgba(255, 255, 255, 0.6), inset 0px 2px 1px 0px rgba(255, 0, 0, 0.15);
       filter: dropshadow(color=#d1d1d1, offx=0, offy=1);
    }
    .sharrre .share span {
       display: inline-block;
       width:18px;
       height:10px;
       background:url("img/sharrre_icons.png") no-repeat scroll 0 0 transparent;
    }
    #facebook .share span {
       height:12px;
       background-position:0 -35px;
    }
    #facebook .share {
       border-color:#35538f;
       background: #637fbb; /* Old browsers */
       background: -moz-linear-gradient(top, #637fbb 0%, #49649e 100%); /* FF3.6+ */
       background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#637fbb), color-stop(100%,#49649e)); /* Chrome,Safari4+ */
       background: -webkit-linear-gradient(top, #637fbb 0%,#49649e 100%); /* Chrome10+,Safari5.1+ */
       background: -o-linear-gradient(top, #637fbb 0%,#49649e 100%); /* Opera 11.10+ */
       background: -ms-linear-gradient(top, #637fbb 0%,#49649e 100%); /* IE10+ */
       background: linear-gradient(top, #637fbb 0%,#49649e 100%); /* W3C */

       -webkit-box-shadow:inset 0px 1px 0px 0px rgba(74, 95, 138, 1), inset 0px -1px 2px 0px rgba(255, 255, 255, 0.4), inset 0px 2px 1px 0px rgba(255, 0, 0, 0.15);
       -moz-box-shadow:inset 0px 1px 0px 0px rgba(74, 95, 138, 1), inset 0px -1px 2px 0px rgba(255, 255, 255, 0.4), inset 0px 2px 1px 0px rgba(255, 0, 0, 0.15);
       box-shadow:inset 0px 1px 0px 0px rgba(74, 95, 138, 1), inset 0px -1px 2px 0px rgba(255, 255, 255, 0.4), inset 0px 2px 1px 0px rgba(255, 0, 0, 0.15);
       filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#637fbb', endColorstr='#49649e',GradientType=0 ); /* IE6-9 */
    }
    #googleplus .share {
       border-color:#303030;
       background: #626263; /* Old browsers */
       background: -moz-linear-gradient(top, #626263 0%, #424244 100%); /* FF3.6+ */
       background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#626263), color-stop(100%,#424244)); /* Chrome,Safari4+ */
       background: -webkit-linear-gradient(top, #626263 0%,#424244 100%); /* Chrome10+,Safari5.1+ */
       background: -o-linear-gradient(top, #626263 0%,#424244 100%); /* Opera 11.10+ */
       background: -ms-linear-gradient(top, #626263 0%,#424244 100%); /* IE10+ */
       background: linear-gradient(top, #626263 0%,#424244 100%); /* W3C */

       -webkit-box-shadow:inset 0px 1px 0px 0px rgba(74, 95, 138, 1), inset 0px -1px 2px 0px rgba(255, 255, 255, 0.4), inset 0px 2px 1px 0px rgba(255, 0, 0, 0.15);
       -moz-box-shadow:inset 0px 1px 0px 0px rgba(74, 95, 138, 1), inset 0px -1px 2px 0px rgba(255, 255, 255, 0.4), inset 0px 2px 1px 0px rgba(255, 0, 0, 0.15);
       box-shadow:inset 0px 1px 0px 0px rgba(74, 95, 138, 1), inset 0px -1px 2px 0px rgba(255, 255, 255, 0.4), inset 0px 2px 1px 0px rgba(255, 0, 0, 0.15);
       filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#626263', endColorstr='#424244',GradientType=0 ); /* IE6-9 */
    }

            </style>

          </head>

              <body>

                
              
              
              
              
              
                <span id="sl_play" class="sl_command"> </span>
       <span id="sl_pause" class="sl_command"> </span>
       <span id="sl_i1" class="sl_command sl_i"> </span>
       <span id="sl_i2" class="sl_command sl_i"> </span>
       <span id="sl_i3" class="sl_command sl_i"> </span>
       <span id="sl_i4" class="sl_command sl_i"> </span>
      
      
      
       <section id="slideshow">
      
<a class="commands prev commands1" href="#sl_i4" title="Aller à la dernière Actu">-</a>
<a class="commands next commands1" href="#sl_i2" title="Aller à la 2ème Actu">+</a>
<a class="commands prev commands2" href="#sl_i1" title="Aller à la 1ère Actu">-</a>
<a class="commands next commands2" href="#sl_i3" title="Aller à la 3ème Actu">+</a>
<a class="commands prev commands3" href="#sl_i2" title="Aller à la 2ème Actu">-</a>
<a class="commands next commands3" href="#sl_i4" title="Aller à la 4ème Actu">+</a>
<a class="commands prev commands4" href="#sl_i3" title="Aller à la 3ème Actu">-</a>
  <a class="commands next commands4" href="#sl_i1" title="Aller à la 1ère Actu">+</a>
          
          <a class="play_commands pause" href="#sl_pause" title="Maintain paused">Pause</a>
          <a class="play_commands play" href="#sl_play" title="Play the animation">Play</a>
          
          <div class="container">
             <div class="c_slider"></div>
             <div class="slider">
                    <div><a href="http://www.crazymocs.com/t4654-ucs-75095-tie-fighter"><figure>
                        <img src="http://i38.servimg.com/u/f38/17/81/21/62/10383910.jpg" alt="image" width="640" height="310" />
                      <figcaption>
                        <span style="color: #ff0000;"><b>LEGO®️ UCS 75095 TIE Fighter™️</b></span></figcaption>
                      </figure></a><!--  
                   --><a href="http://www.crazymocs.com/t4644-lego-new-york-toy-fair-2015"><figure>
                      <img src="http://i38.servimg.com/u/f38/17/81/21/62/16420610.jpg" alt="image" width="640" height="310" />
                      <figcaption> <span style="color: #002c91;"><b>New York Toy Fair 2015</b></span></figcaption>
                    </figure></a><!--
                   --><a href="http://www.crazymocs.com/t4599-jurassic-world-video"><figure>
                      <img src="http://i38.servimg.com/u/f38/17/81/21/62/b9ctb411.jpg" alt="image" width="640" height="310" />
                      <figcaption><span style="color: #0d6300;"><b>LEGO®️ and WB®️ Jurassic World Video</b></span></figcaption>
                    </figure></a><!--  
                   --><a href="http://www.crazymocs.com/t4593-lego-ideas-wall-e-doctor-who-bientot-chez-lego"><figure>
                      <img src="http://i38.servimg.com/u/f38/17/81/21/62/17818410.png" alt="image" width="640" height="310" />
                      <figcaption><span style="color: #c4b000;"><b>LEGO®️ Ideas Wall-E</b></span></figcaption>
                    </figure></a>
               </div>      
             </div>
          </div>
          
          <span id="timeline"></span>
          
          <ul class="dots_commands"><!--
             --><li><a title="Actu N°1" href="#sl_i1">Slide 1</a></li><!--
             --><li><a title="Actu N°2" href="#sl_i2">Slide 2</a></li><!--
             --><li><a title="Actu N°3" href="#sl_i3">Slide 3</a></li><!--
             --><li><a title="Actu N°4" href="#sl_i4">Slide 4</a></li>
          </ul>
          
       </section>
      

              </body>

        </html>

Voila j'ai réussi a résoudre le probleme des images avec les liens.
Seulement probleme la commande pour - + et les 4 boutons du bas ne fonctionnes pas correctement et la je bug,
Aussi je ne me souvient plus comme faire pour mettre en place la commande qui permet d'ouvrir une autre page lors d'un clique gauche sur une image Wink . RÉSOLU Wink

Visuel : Par ici

Merci pour l'aide Wink .
Desolation

Desolation
***

Masculin
Messages : 126
Inscrit(e) le : 13/10/2012

http://crazymocs.forumgratuit.org/
Desolation a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum