Création d'un Slideshow images horizontal infini (Widget)

[Solid6Snake]

Détails techniques

Version du forum : phpBB3
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Moi uniquement
Lien du forum : http://www.entraide-youtubers.com/

Description du problème

Bonjour à tous,

Voilà un petit moment que je n'étais pas venu demander un petit coup de pouce ^^

Pour commencer la nouvelle année, je souhaite créer un slideshow avec des images + redirection URL qui défilent en continu et qui changent après un X secondes (5 ou 6 images) dans un widget.

Tout ceci afin de mettre quelques-uns de mes partenaires sur la page d'accueil de mon forum.

Si une âme charitable passe par là, je reste ouvert à toutes propositions.

Merci d'avance et bonne soirée à tous!

[Ajesto]

Bonsoir,

Il existe quelques générateurs sur le net :

Lien 1
Lien 2
Lien 3 (Le plus performant)

Bien à vous,
Laiorm

[Solid6Snake]

Le lien 3 est sympa mais en français c'est possible?

J'aime bien le modèle "Responsive imagelist with rounded thumbs"

Je peux remplacer les liens images par les logos de chaînes de mes partenaires et rendre le tout cliquable et régler la taille du widget sauf que c'est full uk et je n'y comprend rien du tout.

[Solid6Snake]

UP

[Solid6Snake]

Up

[Solid6Snake]

Up personne n'as un petit code à me fournir ?



L'idée serait de réaliser ce genre de chose (Widget PARTENAIRES DÉFILANT)

http://test-youtubers.forumactif.org/

Mais avec un effet plus sympa genre slide, au lieu d'un simple bloc coulissant.

C'est mon forum TEST au passage.

Merci d'avance.

[oxymore]

Bonjour

Allez c'est encore

A coller dans votre widget

Code:

<style type="text/css">
.slideshow { 
      width: 100px; 
      height: 100px; 
      margin: 3em auto;
      overflow: hidden;
      border: 3px solid #111111;
    } 
    .slideshow ul { 
      width: 400%; 
      height: 100px;
      padding:0; margin:0;
      list-style:none;
    } 
    .slideshow li { float: left; }
</style>                                           
<div class="slideshow">
            
   <ul>
                 
      <li>
         <a title="" href="" target="_blank"><img src="https://yt3.ggpht.com/-Yxt8ox3T-E8/AAAAAAAAAAI/AAAAAAAAAAA/j0dVj2LkhiU/s100-c-k-no/photo.jpg" /></a>
      </li>
                               
      <li>
         <a title="" href="" target="_blank"><img src="https://yt3.ggpht.com/-_PK7USyTp08/AAAAAAAAAAI/AAAAAAAAAAA/kLG6Qq7K2sc/s100-c-k-no-rj-c0xffffff/photo.jpg" /></a> 
      </li>
                                   
   </ul>
              
</div>
          <script type="text/javascript">
jQuery(function(){
         setInterval(function(){
            jQuery(".slideshow ul").animate({marginLeft:-100},1000,function(){
               jQuery(this).css({marginLeft:0}).find("li:last").after(jQuery(this).find("li:first"));
            })
         }, 2500);
      });
</script>

Dans la partie html du code vous pouvez ajouter une image + le lien en ajoutant cette partie

Code:

 <li>
        <a title="" href="le lien vers la chaîneyoutube" target="_blank"><img src="le lien de l'image" /></a>
      </li>

Dans le script vous pouvez modifier 1000 qui correspond à 1 seconde le temps que met l'image à défiler vers la gauche et 2500 qui correspond à 2,5 seconde le temps de pause de l'image avant de défiler.

[Solid6Snake]

Ah sympa merci, je test ça dés que possible et je reviens ici faire un petit coucou pour dire si tout est ok

Merci.

[Solid6Snake]

Le code fonctionne parfaitement oxymore, il me reste à faire quelques réglages.

Par contre c'est possible de rendre le défilement aléatoire?

[oxymore]

Bonjour

Remplacez cette partie

Code:

<script type="text/javascript">
jQuery(function(){
        setInterval(function(){
            jQuery(".slideshow ul").animate({marginLeft:-100},1000,function(){
              jQuery(this).css({marginLeft:0}).find("li:last").after(jQuery(this).find("li:first"));
            })
        }, 2500);
      });
</script>

par

Code:

  <script type="text/javascript">
  (function(jQuery){

   jQuery.fn.shuffle = function() {
      return this.each(function(){
         var items = jQuery(this).children().clone(true);
         return (items.length) ? jQuery(this).html(jQuery.shuffle(items)) : this;
      });
   }

   jQuery.shuffle = function(arr) {
      for(var j, x, i = arr.length; i; j = parseInt(Math.random() * i), x = arr[--i], arr[i] = arr[j], arr[j] = x);
      return arr;
   }

})(jQuery);
jQuery(function(){
         setInterval(function(){
            jQuery(".slideshow ul").animate({marginLeft:-100},1000,function(){
               jQuery(this).css({marginLeft:0}).find("li:last").after(jQuery(this).find("li:first"));
            })
         }, 2500);
        jQuery('ul').shuffle();
      });
</script>

[Solid6Snake]

Super !

Un grand merci à vous oxymore pour le partage du code c'est vraiment super sympa de votre part