Slideshow qui ne s'affiche pas correctement

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

Résolu Slideshow qui ne s'affiche pas correctement

Message par Invité le Jeu 16 Oct 2014 - 17:52

Détails techniques


Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Safari
Personnes concernées par le problème : Tous les utilisateurs

Description du problème

Bonjour ! J'essaye en vain d'installer une slideshow sur mon forum, une slideshow comme celle là -> http://atlan.niceboard.org/h164-slide-show-complet-html

J'ai trouvée ce code en cherchant ->
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>

Mais il ne marche pas, il m'enlève toute les catégories et me met la slide show en quatre image différente. Je vous remercie d'avance de vos réponses ! Bonne journée Smile


Dernière édition par Chiwingum le Sam 18 Oct 2014 - 22:27, édité 1 fois

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Slideshow qui ne s'affiche pas correctement

Message par Invité le Ven 17 Oct 2014 - 20:38

Up ! J'ai réussie à installer le slideshow mais je n'arrive pas à ajouter les 4 points et les flèches sur la droite et la gauche pour changer de diapo rapidement.

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Slideshow qui ne s'affiche pas correctement

Message par [Nihil] le Ven 17 Oct 2014 - 23:15

Hello Smile

Ceci pourrait peut-être t'aider, c'est le tutoriel de base il me semble : CreativeJuiz - CSS3 – Créer un slideshow automatique et contrôlable

[Nihil]
# Tropactif #

Messages : 1155
Inscrit(e) le : 10/12/2009

http://forum.forumactif.com
[Nihil] a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Slideshow qui ne s'affiche pas correctement

Message par Invité le Sam 18 Oct 2014 - 12:53

Bonjour,

Justement c'est le tuto que j'ai pris et je ne comprend pas comment ajouter les flèches et les petits points.

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Slideshow qui ne s'affiche pas correctement

Message par [Nihil] le Sam 18 Oct 2014 - 15:58

Pourrais tu poster l'intégralité de ton code actuel s'il te plait Smile ?
Si tu avais essayé de mettre les boutons + les flèches mais que tu as rencontré un problème, pourrais tu s'il te plait nous dire ce qui n'allais pas aussi ? Smile

[Nihil]
# Tropactif #

Messages : 1155
Inscrit(e) le : 10/12/2009

http://forum.forumactif.com
[Nihil] a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Slideshow qui ne s'affiche pas correctement

Message par Invité le Sam 18 Oct 2014 - 22:26

Bonsoir, au final les membres trouvent le slideshow très bien comme il est Very Happy je ne rajouterais donc pas les boutons et les flèches, merci d'avoir proposé votre aide quand même, je met en résolu, bonne soirée Smile.

Invité
Invité


Invité 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