Tentative de slide show avec affichage de miniatures

[Aly SV]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : hier
Lien du forum : http://ss-newdivine.positiforum.com/

Description du problème

Bonjour à tous,

Je vous expose rapidement le problème. Je tente de faire un slide show sur ma PA pour l'affichage des effectifs/news. J'ai trouvé plusieurs tutoriel, tant sur le FdF (mais aucun model ne me plaisait et je ne suis pas parvenu à les personnalisé) que sur internet. Le tuto le plus prometteur étant celui-ci : http://forum.alsacreations.com/topic-5-55949-1-Faire-apparaitre-une-image-dans-une-autre-div-au-survole-dun-lien.html

Seulement, je n'ai la que la forme. La modifier sera pas vraiment un problème, en revanche, j'aimerais un défilement automatique dans le cadre principale ainsi que des flèche permettant de faire défiler les miniatures dans la colonne correspondant à leur affichage.

J'ai beau chercher ou bidouiller, je n'arrive à rien >< En espérant que vous pourrez m'aider !

Merci, merci et bonne journée ^^

[Artdrock]

Bonjour,
Regarde celui là
http://www.devthought.com/wp-content/projects/mootools/barackslideshow/Demo/

Il est complètement modifiable (il est sur mon forum)

[Aly SV]

Bonjour ^^

Dans la forme, c'est ce que je voudrais.
Mais, est ce que je pourrais mettre des image à la place des liens sur la droite ? Et le défilement se ferait-il automatiquement sans qu'on y touche ?

[Artdrock]

Oui ,
Au lieu d'un texte tu mets un lien image
Sur le lien de demo les images défilent automatiquement !

Regarde mes modifs sur mon forum
Avec vignettes images

[Aly SV]

Ok, je vois, par contre, je vois pas comment l'installer par rapport au lien que tu m'a donné ><

[Artdrock]

Le lien pour télécharger tous les fichiers
Tu pourras le faire fonctionner directement en interne pour faire tes tests de modif

http://webscripts.softpedia.com/script/Image-Galleries/Image-Tools/BarackSlideshow-61697.html

[Aly SV]

Alors là, il va falloir que tu m'explique comment ça fonctionne XD
Je fais ma mise en forme et j'obtiens un lien, un code ?

[Artdrock]

Non !
Tu a tous les scripts de base (java,css et html) à toi de les adapter à ton forum
Perso moi j'ai hébergés tous le fichiers sur un site à part et je colle juste le html sur le forum. Mais tu dois pouvoir les hébergés ici

Les images sont dans le index.html
La mise en forme est dans source/barrackslide.css

[Aly SV]

C'est un système que je ne connais pas du tout, je ne comprend pas la marche à suivre ><
Je n'arrive déjà pas à savoir quoi faire ce que je suis censé dl...

[Artdrock]

Decompresse le ZIP (juste le repertoire barrack) sur ton ordi
Si tu clic sur index le slide de base va ce lancer dans une page html
A partir de là tu edit et tu modifie le index.html pour mettre tes images à la place de celle de base
et tu modifie la mise en forme en editant le fichier source/barrackslide.css

A chaque modif re-clic sur index pour visualiser
Une fois fini , tu copie tous les fichiers sur ton forum ou tu héberge le tout autre part et tu colle juste ton index.html sur la page d'accueil

Moi j'ai opté sur un hébergement externe pour ne pas surcharger le forum de java et de ligne dans mon css

[Aly SV]

J'ai décompressé, mais il se passe absolument rien, je n'arrive pas à ouvrir quoi que se soit.
Je sais même pas à quoi c'est censé ressembler...

Si je pouvais avoir un code, ça me simplifierais un peu la vie ><

[Artdrock]

Je comprend pas trop là ?
Si tu a décompressé tu dois avoir un répertoire Barackslideshow (là où tu a décompressé le fichier) ! non ?
Tous les codes sont dedans

[Aly SV]

Meme après avoir décompressé, je n'arrive pas a ouvrir quoi que se soit.

Mais bref, ce system ne me convient absolument pas.

Donc, reprenons... En code directement, si possible, sans que j'ai à dl quoi que se soit, ça m'arrangerais. J'ai donc fouillé et trouvé ce tuto : http://www.creativejuiz.fr/blog/tutoriels/css3-creer-slideshow-automatique-controlable-transition,

Seulement, quand je l'applique en sautant la partie "Boutons jouer et arrêter" parce que je ne veux pas de cette fonction et à l'arrivée, j'ai ça :

http://forumtesta.forumactif.org/

Donc pas du tout l'effet escompté XD

Le codes html :

Code:

<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"> </section><a title="Maintain paused" href="#sl_pause" class="play_commands pause">Pause</a><a title="Play the animation" href="#sl_play" class="play_commands play">Play</a><a class="commands prev commands1" href="#sl_i4" title="Aller à la dernière slide"><</a><a class="commands next commands1" href="#sl_i2" title="Aller à la 2ème slide">></a><a class="commands prev commands2" href="#sl_i1" title="Aller à la 1ère slide"><</a><a class="commands next commands2" href="#sl_i3" title="Aller à la 3ème slide">></a><a class="commands prev commands3" href="#sl_i2" title="Aller à la 2ème slide"><</a><a class="commands next commands3" href="#sl_i4" title="Aller à la 4ème slide">></a><a class="commands prev commands4" href="#sl_i3" title="Aller à la 3ème slide"><</a><a class="commands next commands4" href="#sl_i1" title="Aller à la 1ère slide">></a>
<div class="container">
          
   <div class="c_slider">
           
   </div>
          
   <div class="slider">
          <figure> <img style="width: 640px; height: 310px;" alt="" src="img/dummy-640x310-1.jpg" /> <figcaption>The mirror of soul</figcaption> </figure>   
      <!--   
             --><figure> <img style="width: 640px; height: 310px;" alt="" src="img/dummy-640x310-2.jpg" /> <figcaption>Let's cross that bridge when we come to it</figcaption> </figure>   
      <!--   
             --><figure> <img style="width: 640px; height: 310px;" alt="" src="img/dummy-640x310-3.jpg" /> <figcaption>Sushi<em>(do)</em> time</figcaption> </figure>   
      <!--   
             --><figure> <img style="width: 640px; height: 310px;" alt="" src="img/dummy-640x310-4.jpg" /> <figcaption>Waking Life</figcaption> </figure>   
   </div>
          
</div><section id="slideshow"> <span id="timeline"></span></section>
<ul class="dots_commands">
   <!--
    -->
   <li>
      <a href="#sl_i1" title="Afficher la slide 1">Slide 1</a>
   </li>
   <!--
    -->
   <li>
      <a href="#sl_i2" title="Afficher la slide 2">Slide 2</a>
   </li>
   <!--
    -->
   <li>
      <a href="#sl_i3" title="Afficher la slide 3">Slide 3</a>
   </li>
   <!--
    -->
   <li>
      <a href="#sl_i4" title="Afficher la slide 4">Slide 4</a>
   </li>
</ul><section id="slideshow"></section>

Le CSS :

Code:

#slideshow {
   position: relative;
   width: 640px;
   height: 310px;
   padding: 15px;
   margin: 0 auto 2em;
   border: 1px solid #ddd;
   background: #FFF;
   /* CSS3 effects */
   background: linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
   border-radius: 2px 2px 2px 2px;
   box-shadow: 0 0 3px rgba(0,0,0, 0.2);
}
 
/* avanced box-shadow
 * tutorial @
 * http://www.creativejuiz.fr/blog/les-tutoriels/ombre-avancees-avec-css3-et-box-shadow
*/
#slideshow:before,
#slideshow:after {
   position: absolute;
   bottom:16px;
   z-index: -10;
   width: 50%;
   height: 20px;
   content: " ";
   background: rgba(0,0,0,0.1);
   border-radius: 50%;
   box-shadow: 0 0 3px rgba(0,0,0, 0.4), 0 20px 10px rgba(0,0,0, 0.7);
}
#slideshow:before {
   left:0;
   transform: rotate(-4deg);
}
#slideshow:after {
   right:0;
   transform: rotate(4deg);
}

/* gestion des dimensions et débordement du conteneur */
#slideshow .container {
   position:relative;
   width: 640px;
   height: 310px;
   overflow: hidden;
}
   
/* on prévoit un petit espace gris pour la timeline */
#slideshow .container:after {
   position:absolute;
   bottom: 0; left:0;
   content: " ";
   width: 100%;
   height: 1px;
   background: #999;
}
/*
  le conteneur des slides
  en largeur il fait 100% x le nombre de slides
*/
#slideshow .slider {
   position: absolute;
   left:0; top:0;
   width: 400%;
   height: 310px;
}

/* annulation des marges sur figure */
#slideshow figure {
   position:relative;
   display:inline-block;
   padding:0; margin:0;
}
/* petit effet de vignette sur les images */
#slideshow figure:after {
   position: absolute;
   display:block;
   content: " ";
   top:0; left:0;
   width: 100%; height: 100%;
   box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;
}

/* styles de nos légendes */
#slideshow figcaption {
   position:absolute;
   left:0; right:0; bottom: 5px;
   padding: 20px;
   margin:0;
   border-top: 1px solid rgb(225,225,225);
   text-align:center;
   letter-spacing: 0.05em;
   word-spacing: 0.05em;
   font-family: Georgia, Times, serif;
   background: #fff;
   background: rgba(255,255,255,0.7);
   color: #555;
   text-shadow: -1px -1px 0 rgba(255,255,255,0.3);
}

/* fonction d'animation, n'oubliez pas de prefixer ! */
@keyframes slider {
   0%, 20%, 100%   { left: 0 }
   25%, 45%      { left: -100% }
   50%, 70%      { left: -200% }
   75%, 95%      { left: -300% }
}

/* complétez le sélecteur : */
#slideshow .slider {
   /* ... avec la propriété animation */
   animation: slider 32s infinite;
}

#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;
}

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

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

/* ajouter à l'élément : */
#slideshow figcaption {
   /* ... la propriété animation */
   animation: figcaptionner 32s infinite;
}

.play_commands {
   /* positionnement en haut à droite */
   position: absolute;
   top: 25px; right: 25px;
   z-index: 10;
   /* dimensionnement des icônes */
   width: 22px;
   height: 22px;
   text-indent: -9999px;
   border:0 none;
   /* placez l'opacité à 1 si vous souhaitez voir les commandes */
   opacity: 0;
   /* préparation de transition sur opacicty et right */
   transition: opacity 1s, right 1s;
}
/* on décale play légèrement sur la gauche */
.play { right: 55px; cursor: default; }
 
/* création de l'icône pause avec 2 pseudos éléments */
.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; }
 
/* création de l'icône play avec des bordures */
.play {
   width: 1px;
   height: 1px;
   /* les transparentes forment la flèche */
   border-top: 10px solid transparent;
   border-bottom: 10px solid transparent;
   border-left: 20px solid #fff;
   border-left: 20px solid rgba(255,255,255,0.5);
   /* renseignez 1 pour voir l'icône de suite */
   opacity: 0;
}
 
/* apparition du bouton pause au survole */
/* apparition des boutons au focus */
#slideshow:hover .pause,
.play_commands:focus {
   opacity: 1;
   outline: none;
}

/* stopper les animation */
.sl_command:target ~ #slideshow .slider,
.sl_command:target ~ #slideshow figcaption,
.sl_command:target ~ #slideshow #timeline,
.sl_command:target ~ #slideshow .dots_commands li:first-child a:after {
   animation-play-state: paused;
}
 
/* redémarrer les animations */
#sl_play:target ~ #slideshow .slider,
#sl_play:target ~ #slideshow figcaption,
#sl_play:target ~ #slideshow #timeline,
#sl_play:target ~ #slideshow .dots_commands li:first-child a:after {
   animation-play-state: running;
}
 
/* switch entre les boutons */
.sl_command:target ~ #slideshow .pause       { opacity:0; }
#sl_play:target ~ #slideshow:hover .pause,
#sl_play:target ~ #slideshow .pause:focus    { opacity:1; }
.sl_command:target ~ #slideshow .play       { opacity:1; right: 25px; cursor: pointer; }
#sl_play:target ~ #slideshow .play          { opacity:0; right: 55px; cursor: default; }

#slideshow .commands {
   position: absolute;
   top: 45%;
   padding: 5px 13px;
   border-bottom:0;
   font-size: 1.3em;
   color: #aaa;
   text-decoration:none;
   background-color: #eee;
   background-image: linear-gradient(#fff,#ddd);
   text-shadow: 0 0 1px #aaa;
   border-radius: 50%;
   box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}
 
#slideshow .prev { left: -48px; }
#slideshow .next { right: -48px; }
 
#slideshow .commands { display:none; }
#slideshow .commands1 {   display: block; }

#slideshow .c_slider {
   position: absolute;
   left:0; top:0;
   width: 400%;
   height: 310px;
   /* multiple background */
   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;
}

/* on cache le slider */
.sl_i:target ~ #slideshow .slider                           { visibility: hidden }
/* on planque la 1ère pastille (cf. bonux suivant) */
.sl_i:target ~ #slideshow .dots_commands li:first-child a:after      { display:none; }
/* pour afficher la 2ème pastille (cf. bonux suivant) */
.sl_i:target ~ #slideshow .dots_commands li:first-child a:before   { display:block; }
 
/* lorsque on cible le premier slider */
/* on cache tous les "précédent" et "suivant" */
#sl_i1:target ~ #slideshow .commands                        { display: none; }
/* on affiche seulement deux flèches */
#sl_i1:target ~ #slideshow .commands1                        { display: block; }
/* correspond au décalage des images */
#sl_i1:target ~ #slideshow .c_slider                        { background-position: 0 0, 640px 0, 1280px 0, 1920px 0; }
/* on place la pastille tout à gauche */
#sl_i1:target ~ #slideshow .dots_commands li:first-child a:before   { left:0; }
 
/* même procédé lorsqu'on cible le second slide */
#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; }
 
/* puis le 3ème */
#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; }
 
/* et enfin le 4ème */
#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; }

.dots_commands  {
   padding:0;
   margin:32px 0 0;
   text-align: center;
}
.dots_commands li {
   display: inline;
   padding:0; margin:0;
}
.dots_commands a {
   position: relative;
   display: inline-block;
   height:8px; width: 8px;
   margin: 0 5px;
   text-indent: -9999px;
   background: #fff;
 
   border-radius: 50%;
   box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;

}
/* quelques styles au focus */
.dots_commands a:focus {
   outline: none;
   background: orange;
}
.dots_commands li:first-child a { z-index: 25; }

/* on style after et before, on utilisera les deux */
.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;

   border-radius: 50%;
   box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;
}
/* on anime "after" */
.dots_commands li:first-child a:after {
   animation: dotser 32s infinite;
}
/* on cache "before", on l'utilise uniquement au clic (cf. bonux précédent) */
.dots_commands li:first-child a:before { display:none; }
 
/* c'est parti pour l'animation ! */
@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;   }
}

[Aly SV]

J'ai pu trouvé un tuto détaillé, problème résolu donc.