Effet Slideshow

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

Résolu Effet Slideshow

Message par Ejayremy le Lun 17 Mar 2014 - 21:26

Bonjour,

J'ai trouvé sur un forum de chez Forumactif un slideshow que j'aimerais également ajouter sur mon forum. Cependant, je n'arrive pas a trouver le code sur internet ni ici sur le FDF. Je n'ai pas trouvé ici même la fiche membre de l'admin du dit forum en question afin d'éventuellement le contacter. Si vous le connaissez ... Wink

Quelqu'un pourrait'il me venir en aide et me faire part du/des code(s) a mettre en place afin d'avoir ce même slideshow sur mon forum svp ?
Liens du forum ou se trouve le skideshow en question : http://www.animal-crossing-3ds.com/

Merci à vous.


Dernière édition par Ejayremy le Sam 22 Mar 2014 - 20:48, édité 3 fois

Ejayremy
*****

Masculin
Messages : 943
Inscrit(e) le : 03/02/2006

http://forum.family-geek.fr/
Ejayremy a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet Slideshow

Message par Ejayremy le Mar 18 Mar 2014 - 22:25

UP

Ejayremy
*****

Masculin
Messages : 943
Inscrit(e) le : 03/02/2006

http://forum.family-geek.fr/
Ejayremy a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet Slideshow

Message par Adam_sfp le Mer 19 Mar 2014 - 7:36

Bonjour

Le mieux serait de contacter l'administrateur du site via Contact en pied de page.
Sinon vous devriez trouver quelque chose de similaire via google en tapant jquery slideshow par exemple.

Cdt.

Adam_sfp
+ Hyperactif +

Masculin
Messages : 4157
Inscrit(e) le : 18/04/2008

http://antonyadam.1fr1.net/portal.htm
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet Slideshow

Message par AenigmA le Mer 19 Mar 2014 - 8:12

Bonjour,
Pas du jquery celui là

http://www.creativejuiz.fr/blog/tutoriels/css3-creer-slideshow-automatique-controlable-transition

La démo
http://www.creativejuiz.fr/trytotry/juizy-slideshow-full-css3-html5/#sl_i1

AenigmA
+ Hyperactif +

Masculin
Messages : 2228
Inscrit(e) le : 10/03/2005

http://aenigma.forumactif.fr/
AenigmA a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet Slideshow

Message par Ejayremy le Mer 19 Mar 2014 - 8:18

Sympa, comment le mettre en place car j'avoue je n'y connais pas grand chose. j'ai beau copier les codes + CSS ça fait tout bugger sur mon forum.

Ejayremy
*****

Masculin
Messages : 943
Inscrit(e) le : 03/02/2006

http://forum.family-geek.fr/
Ejayremy a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet Slideshow

Message par Xoomi34 le Mer 19 Mar 2014 - 18:17

Celui qui donne ça, je suis le plus content de tous les membres. Very Happy

Xoomi34
***

Masculin
Messages : 141
Inscrit(e) le : 30/08/2013

http://xoomi.forumactif.org
Xoomi34 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet Slideshow

Message par AenigmA le Mer 19 Mar 2014 - 20:59

Dans une page html sans le haut et bas

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>TON TITRE</title> 

        <style type="text/css">

#slideshow {
    background: linear-gradient(#FFFFFF, #FFFFFF 20%, #EEEEEE 80%, #DDDDDD) repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: 1px solid #DDDDDD;
    border-radius: 2px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
    height: 310px;
    margin: 0 auto 2em;
    padding: 15px;
    position: relative;
    width: 640px;
}
#slideshow:before, #slideshow:after {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    bottom: 16px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.4), 0 20px 10px rgba(0, 0, 0, 0.7);
    content: " ";
    height: 20px;
    position: absolute;
    width: 50%;
    z-index: -10;
}
#slideshow:before {
    left: 0;
    transform: rotate(-4deg);
}
#slideshow:after {
    right: 0;
    transform: rotate(4deg);
}
#slideshow .container {
    height: 310px;
    overflow: hidden;
    position: relative;
    width: 640px;
}
#slideshow .container:after {
    background: none repeat scroll 0 0 #999999;
    bottom: 0;
    content: " ";
    height: 1px;
    left: 0;
    position: absolute;
    width: 100%;
}
#slideshow .slider {
    animation: 32s ease 0s normal none infinite slider;
    height: 310px;
    left: 0;
    position: absolute;
    top: 0;
    width: 400%;
}
#slideshow figure {
    display: inline-block;
    margin: 0;
    padding: 0;
    position: relative;
}
#slideshow figure:after {
    box-shadow: 0 0 65px rgba(0, 0, 0, 0.5) inset;
    content: " ";
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
#slideshow figcaption {
    animation: 32s ease 0s normal none infinite figcaptionner;
    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.7);
    border-top: 1px solid #E1E1E1;
    bottom: 5px;
    color: #555555;
    font-family: Georgia,Times,serif;
    left: 0;
    letter-spacing: 0.05em;
    margin: 0;
    padding: 20px;
    position: absolute;
    right: 0;
    text-align: center;
    text-shadow: -1px -1px 0 rgba(255, 255, 255, 0.3);
    word-spacing: 0.05em;
}
    #timeline { 
        position: absolute; 
        background: #999; 
        bottom: 15px; 
        left: 15px; 
        height: 1px; 
        background: rgb(214,98,13); 
        background: rgba(214,98,13,.8); 
        width: 0; 
        /* fonction d'animation */ 
        animation: timeliner 32s infinite; 
    } 
@-moz-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%;
}
}
@-moz-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;
}
}
@-moz-keyframes figcaptionner {
0%, 20%, 45%, 70%, 95% {
    bottom: -55px;
}
10%, 19%, 35%, 44%, 60%, 69%, 85%, 94% {
    bottom: 5px;
}
}
@-moz-keyframes figcaptionner {
0%, 20%, 45%, 70%, 95% {
    bottom: -55px;
}
10%, 19%, 35%, 44%, 60%, 69%, 85%, 94% {
    bottom: 5px;
}
}

        </style>

      </head>

          <body>

              <section id="slideshow">
   

      
      <div class="container">
         <div class="c_slider"></div>
         <div class="slider">
            <figure>
               <img src="http://i55.servimg.com/u/f55/11/40/46/60/nature10.jpg" alt="" width="640" height="310" />
               <figcaption>The mirror of soul</figcaption>
            </figure><!--
            --><figure>
               <img src="http://i55.servimg.com/u/f55/11/40/46/60/nature11.jpg" alt="" width="640" height="310" />
               <figcaption>Let's cross that bridge when we come to it</figcaption>
            </figure><!--
            --><figure>
               <img src="http://i55.servimg.com/u/f55/11/40/46/60/nature12.jpg" alt="" width="640" height="310" />
               <figcaption>Sushi<em>(do)</em> time</figcaption>
            </figure><!--
            --><figure>
               <img src="http://i55.servimg.com/u/f55/11/40/46/60/nature13.jpg" alt="" width="640" height="310" />
               <figcaption>Waking Life</figcaption>
            </figure>
         </div>
      </div>
                 
                  </section>

          </body>

    </html>

Plus qu'à créer une iframe et la mettre dans l'accueil, tout le monde peut vous aider pour ça.

Ps: Ce système n'est prévu que pour des images

AenigmA
+ Hyperactif +

Masculin
Messages : 2228
Inscrit(e) le : 10/03/2005

http://aenigma.forumactif.fr/
AenigmA a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet Slideshow

Message par Xoomi34 le Jeu 20 Mar 2014 - 7:34

Oui, mais les images ne changent pas toute seul.
Et c'est ça un slideshow. Wink
Mais ou sinon, la mise en page est la même.
Et aussi, quand le slide change, le titre apparaît en douceur . (il se relève)

Xoomi34
***

Masculin
Messages : 141
Inscrit(e) le : 30/08/2013

http://xoomi.forumactif.org
Xoomi34 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet Slideshow

Message par AenigmA le Jeu 20 Mar 2014 - 8:37

C'est ce que demande Ejayremy, rien de plus et rien de moins

http://atlan.niceboard.org/h164-slide-show-complet-html


Dernière édition par AenigmA le Jeu 20 Mar 2014 - 14:18, édité 1 fois (Raison : Nouvelle page html)

AenigmA
+ Hyperactif +

Masculin
Messages : 2228
Inscrit(e) le : 10/03/2005

http://aenigma.forumactif.fr/
AenigmA a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet Slideshow

Message par Ejayremy le Jeu 20 Mar 2014 - 12:33

Merci, mais je ne vois pas le slide "tourner".

Ejayremy
*****

Masculin
Messages : 943
Inscrit(e) le : 03/02/2006

http://forum.family-geek.fr/
Ejayremy a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet Slideshow

Message par logan125 le Jeu 20 Mar 2014 - 13:06

tres intéréssé aussi par un slide show pour notre forum je suis ton sujet avec impatience si t'as du nouveau post le ici ca rendra service a enormement d'entre nous je pense

logan125
*

Messages : 44
Inscrit(e) le : 26/03/2013

http://legionair.lebonforum.com/
logan125 a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Effet Slideshow

Message par AenigmA le Jeu 20 Mar 2014 - 14:19

Lol, pour que ça marche j'ai pris la totalité du code, pas assez patient l'ancien !

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>TON TITRE</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,.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 ! :D */
   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="Go to last slide"><</a>
      <a class="commands next commands1" href="#sl_i2" title="Go to 2nd slide">></a>
      <a class="commands prev commands2" href="#sl_i1" title="Go to 1rst slide"><</a>
      <a class="commands next commands2" href="#sl_i3" title="Go to 3rd slide">></a>
      <a class="commands prev commands3" href="#sl_i2" title="Go to 2nd slide"><</a>
      <a class="commands next commands3" href="#sl_i4" title="Go to 4th slide">></a>
      <a class="commands prev commands4" href="#sl_i3" title="Go to 3rd slide"><</a>
      <a class="commands next commands4" href="#sl_i1" title="Go to first slide">></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">
            <figure>
               <img src="http://i55.servimg.com/u/f55/11/40/46/60/nature10.jpg" alt="" width="640" height="310" />
               <figcaption>The mirror of soul</figcaption>
            </figure><!--
            --><figure>
               <img src="http://i55.servimg.com/u/f55/11/40/46/60/nature11.jpg" alt="" width="640" height="310" />
               <figcaption>Let's cross that bridge when we come to it</figcaption>
            </figure><!--
            --><figure>
               <img src="http://i55.servimg.com/u/f55/11/40/46/60/nature12.jpg" alt="" width="640" height="310" />
               <figcaption>Sushi<em>(do)</em> time</figcaption>
            </figure><!--
            --><figure>
               <img src="http://i55.servimg.com/u/f55/11/40/46/60/nature13.jpg" alt="" width="640" height="310" />
               <figcaption>Waking Life</figcaption>
            </figure>
         </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>
      </ul>
      
   </section>
   
   
   

          </body>

    </html>

AenigmA
+ Hyperactif +

Masculin
Messages : 2228
Inscrit(e) le : 10/03/2005

http://aenigma.forumactif.fr/
AenigmA a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet Slideshow

Message par Ejayremy le Jeu 20 Mar 2014 - 17:53

Merci pour le code. En revanche, quand on clique sur la flèche droite ou gauche ça envoi vers rien. Comme supprimer ces flèches svp ?

[EDIT] Et comment ajouter un lien sur les images afin de les rendre "cliquable" ?

Thanx  Very Happy 

Ejayremy
*****

Masculin
Messages : 943
Inscrit(e) le : 03/02/2006

http://forum.family-geek.fr/
Ejayremy a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet Slideshow

Message par AenigmA le Jeu 20 Mar 2014 - 18:02

Effectivement, il est donc pas complet lol

Le voilà comme sur le forum en exemple, en continu, je ne saurais pas mieux faire de toutes façons

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>TON TITRE</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 ! :D */
   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>
               <img src="http://i55.servimg.com/u/f55/11/40/46/60/nature10.jpg" alt="" width="640" height="310" />
               <figcaption>The mirror of soul</figcaption>
            </figure><!--
            --><figure>
               <img src="http://i55.servimg.com/u/f55/11/40/46/60/nature11.jpg" alt="" width="640" height="310" />
               <figcaption>Let's cross that bridge when we come to it</figcaption>
            </figure><!--
            --><figure>
               <img src="http://i55.servimg.com/u/f55/11/40/46/60/nature12.jpg" alt="" width="640" height="310" />
               <figcaption>Sushi<em>(do)</em> time</figcaption>
            </figure><!--
            --><figure>
               <img src="http://i55.servimg.com/u/f55/11/40/46/60/nature13.jpg" alt="" width="640" height="310" />
               <figcaption>Waking Life</figcaption>
            </figure>
         </div>
      </div>
      
      <span id="timeline"></span>
      
      
      
   </section>
   
   
   

          </body>

    </html>

AenigmA
+ Hyperactif +

Masculin
Messages : 2228
Inscrit(e) le : 10/03/2005

http://aenigma.forumactif.fr/
AenigmA a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet Slideshow

Message par AenigmA le Jeu 20 Mar 2014 - 18:10

Logiquement ce doit être en entourant figure

Code:
<a href="adresse du lien">
            <figure>
               ...
                            </figure></a>

AenigmA
+ Hyperactif +

Masculin
Messages : 2228
Inscrit(e) le : 10/03/2005

http://aenigma.forumactif.fr/
AenigmA a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet Slideshow

Message par Ejayremy le Jeu 20 Mar 2014 - 18:20

@AenigmA a écrit:Logiquement ce doit être en entourant figure

Code:
<a href="adresse du lien">
            <figure>
               ...
                            </figure></a>
Merci, rien n'y fait je n'arrive pas a ajouter soit un lien cliquable sur l'image ou sur le texte/titre.

Ejayremy
*****

Masculin
Messages : 943
Inscrit(e) le : 03/02/2006

http://forum.family-geek.fr/
Ejayremy a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Effet Slideshow

Message par AenigmA le Jeu 20 Mar 2014 - 18:28

Pour la première image

Code:
<figure>
              <img src="http://i55.servimg.com/u/f55/11/40/46/60/nature10.jpg" alt="" width="640" height="310" />
              <figcaption>The mirror of soul</figcaption>
            </figure>

Ca serait ainsi

Code:
<a href="http://www.ejayremy.fr/forum">
            <figure>
              <img src="http://i55.servimg.com/u/f55/11/40/46/60/nature10.jpg" alt="" width="640" height="310" />
              <figcaption>The mirror of soul</figcaption>
            </figure>
</a>

AenigmA
+ Hyperactif +

Masculin
Messages : 2228
Inscrit(e) le : 10/03/2005

http://aenigma.forumactif.fr/
AenigmA a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet Slideshow

Message par Ejayremy le Jeu 20 Mar 2014 - 18:33

Je comprends mieux ! Ça fonctionne impec, merci Wink

[EDIT] J'ai un soucis avec la dernière image qui ne s'affiche pas : http://www.ejayremy.fr/h16-slide


Dernière édition par Ejayremy le Jeu 20 Mar 2014 - 18:37, édité 1 fois

Ejayremy
*****

Masculin
Messages : 943
Inscrit(e) le : 03/02/2006

http://forum.family-geek.fr/
Ejayremy a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Effet Slideshow

Message par AenigmA le Jeu 20 Mar 2014 - 18:37

Pour ton iframe ce sera ainsi logiquement

Code:
<iframe src="adresse de ta page html" allowtransparency="true" style="position: relative; top: 10px; bottom: 10px; margin: 10px; padding: 0px; width: 820px; height: 380px;" frameborder="0" scrolling="no"></iframe>


Bonne continuation, je passe à autre chose et ailleurs Smile

AenigmA
+ Hyperactif +

Masculin
Messages : 2228
Inscrit(e) le : 10/03/2005

http://aenigma.forumactif.fr/
AenigmA a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet Slideshow

Message par Ejayremy le Jeu 20 Mar 2014 - 18:38

J'ai un soucis avec la dernière image qui ne s'affiche pas : http://www.ejayremy.fr/h16-slide

Ejayremy
*****

Masculin
Messages : 943
Inscrit(e) le : 03/02/2006

http://forum.family-geek.fr/
Ejayremy a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet Slideshow

Message par AenigmA le Jeu 20 Mar 2014 - 18:45

Je pense que c'est lié à ceci width="640" height="310", il faut mettre tes images à la dimension car on voit le décalage se faire au fur et à mesure. En plus pas une dimension pareille lol, à lalala !

AenigmA
+ Hyperactif +

Masculin
Messages : 2228
Inscrit(e) le : 10/03/2005

http://aenigma.forumactif.fr/
AenigmA a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Effet Slideshow

Message par logan125 le Sam 22 Mar 2014 - 20:46

bonsoir quand j'essai le slide show en prévisualisation j'ai tous les arbres en colonnes du coups pas de slide show et plus de pages d’accueil est ce que ca viens du fait que je suis en phbb2?

logan125
*

Messages : 44
Inscrit(e) le : 26/03/2013

http://legionair.lebonforum.com/
logan125 a été remercié(e) par l'auteur de ce sujet.

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


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