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

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

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

Message par Solid6Snake le Sam 7 Jan 2017 - 21:14

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!



Dernière édition par Solid6Snake le Mer 18 Jan 2017 - 12:17, édité 1 fois
avatar

Solid6Snake
*****

Messages : 514
Inscrit(e) le : 07/11/2013

http://www.entraide-youtubers.com/
Solid6Snake a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Création d'un Slideshow images horizontal infini (Widget)

Message par Ajesto le Sam 7 Jan 2017 - 22:26

Bonsoir,

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

Lien 1
Lien 2
Lien 3 (Le plus performant)

Bien à vous,
Laiorm
avatar

Ajesto
****

Masculin
Messages : 325
Inscrit(e) le : 17/09/2016

http://codage-actif.forumactif.com/
Ajesto a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Création d'un Slideshow images horizontal infini (Widget)

Message par Solid6Snake le Dim 8 Jan 2017 - 9:46

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.
avatar

Solid6Snake
*****

Messages : 514
Inscrit(e) le : 07/11/2013

http://www.entraide-youtubers.com/
Solid6Snake a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Création d'un Slideshow images horizontal infini (Widget)

Message par Solid6Snake le Mer 11 Jan 2017 - 8:03

UP
avatar

Solid6Snake
*****

Messages : 514
Inscrit(e) le : 07/11/2013

http://www.entraide-youtubers.com/
Solid6Snake a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Création d'un Slideshow images horizontal infini (Widget)

Message par Solid6Snake le Ven 13 Jan 2017 - 20:30

Up
avatar

Solid6Snake
*****

Messages : 514
Inscrit(e) le : 07/11/2013

http://www.entraide-youtubers.com/
Solid6Snake a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Création d'un Slideshow images horizontal infini (Widget)

Message par Solid6Snake le Lun 16 Jan 2017 - 7:51

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

Angel

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.

avatar

Solid6Snake
*****

Messages : 514
Inscrit(e) le : 07/11/2013

http://www.entraide-youtubers.com/
Solid6Snake a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Création d'un Slideshow images horizontal infini (Widget)

Message par oxymore le Lun 16 Jan 2017 - 18:34

Bonjour

Allez c'est encore santa

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.

avatar

oxymore
***

Messages : 141
Inscrit(e) le : 09/11/2008

http://www.google.fr
oxymore a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Création d'un Slideshow images horizontal infini (Widget)

Message par Solid6Snake le Lun 16 Jan 2017 - 20:28

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

Merci.
avatar

Solid6Snake
*****

Messages : 514
Inscrit(e) le : 07/11/2013

http://www.entraide-youtubers.com/
Solid6Snake a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Création d'un Slideshow images horizontal infini (Widget)

Message par Solid6Snake le Lun 16 Jan 2017 - 21:24

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

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

Solid6Snake
*****

Messages : 514
Inscrit(e) le : 07/11/2013

http://www.entraide-youtubers.com/
Solid6Snake a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Création d'un Slideshow images horizontal infini (Widget)

Message par oxymore le Mar 17 Jan 2017 - 14:20

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>
avatar

oxymore
***

Messages : 141
Inscrit(e) le : 09/11/2008

http://www.google.fr
oxymore a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Création d'un Slideshow images horizontal infini (Widget)

Message par Solid6Snake le Mer 18 Jan 2017 - 12:16

Super !

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

Solid6Snake
*****

Messages : 514
Inscrit(e) le : 07/11/2013

http://www.entraide-youtubers.com/
Solid6Snake 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