Diaporama avec affichage dans un ordre aléatoire

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

Résolu Diaporama avec affichage dans un ordre aléatoire

Message par @To le Ven 10 Juil 2015 - 19:54

Détails techniques


Version du forum : PunBB
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://www.diamant-mandarin-evo.com/

Description du problème

Bonsoir à tous,

J'ai réalisé un diaporama avec ce tutoriel: http://forum.forumactif.com/t377148-creer-un-diaporama-images-defilantes?highlight=diaporama

Je souhaiterais que les photos s'affiche dans un ordre aléatoire, est-ce possible en modifiant le code?

Merci de votre aide.


Dernière édition par tony26 le Dim 12 Juil 2015 - 11:43, édité 1 fois

@To
*****

Masculin
Messages : 964
Inscrit(e) le : 26/02/2015

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

Résolu Re: Diaporama avec affichage dans un ordre aléatoire

Message par @To le Sam 11 Juil 2015 - 20:24

Up

Bonne soirée.

@To
*****

Masculin
Messages : 964
Inscrit(e) le : 26/02/2015

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

Résolu Re: Diaporama avec affichage dans un ordre aléatoire

Message par no_way le Sam 11 Juil 2015 - 20:31

Bonjour, peut-on avoir votre code actuel ?

no_way
Aidactif
Aidactif

Messages : 1773
Inscrit(e) le : 26/03/2010

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

Résolu Re: Diaporama avec affichage dans un ordre aléatoire

Message par @To le Sam 11 Juil 2015 - 20:37

Bonjour,

Le voici:

Code:
<style type="text/css">#rotator1433082509450 {height:148px;} #rotator1433082509450 a{position:absolute;background:transparent;border:0px solid transparent;padding:0px;} #rotator1433082509450 img { height:148px;width:190px; }</style>
<div id="rotator1433082509450">
           <a id="itemActif1433082509450" style="z-index:999" href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/veenen16.jpg" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/24664310.jpg" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/19/15/93/26/nzc_ve12.jpg" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/agaat-11.jpg" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/blackf11.jpg" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/grijs-11.jpg" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/isabel11.jpg" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/oranje10.jpg" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/pastel14.jpg" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/veenen13.jpg" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/pastel12.jpg" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/veenen14.jpg" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/pastel16.jpg" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/veenen11.png" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/img_5810.jpg" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/nzc_sh10.jpg" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/nzc_sh11.jpg" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/veenen15.jpg" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/veenen17.jpg" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/veenen18.jpg" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/11490313.jpg" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/masker13.jpg" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/img_6310.jpg" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/nzc_sh12.jpg" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/veenen19.jpg" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/nzc_sh13.jpg" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/veenen21.jpg" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/veenen12.png" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/nzc_ve17.jpg" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/veenen23.jpg" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/zwartw11.jpg" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/veenen24.jpg" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/veenen13.png" alt="" /></a><a href="#" title="" target="_blank"><img src="http://illiweb.com/fa/empty.gif" alt="" /></a>
</div><script type="text/javascript">(function(){var r = document.getElementById("rotator1433082509450"), l = r.getElementsByTagName("A"), rotate = window.setInterval(function() {var a = document.getElementById("itemActif1433082509450"), n = jQuery(a).next()[0] || l[0]; if (!a) return window.clearInterval(rotate); n.style.opacity = 1;n.style.zIndex = 998;jQuery(a).animate({"opacity":0},800,"linear",function() {a.id = "";a.style.zIndex = "";n.id = "itemActif1433082509450";n.style.zIndex = 999})},5300)})();</script>

@To
*****

Masculin
Messages : 964
Inscrit(e) le : 26/02/2015

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

Résolu Re: Diaporama avec affichage dans un ordre aléatoire

Message par no_way le Sam 11 Juil 2015 - 21:21

Remplacez-le par celui-ci:
Code:
        <style type="text/css">#rotator1433082509450 {height:148px;} #rotator1433082509450 a{position:absolute;background:transparent;border:0px solid transparent;padding:0px;} #rotator1433082509450 img { height:148px;width:190px; }</style>       
<div id="rotator1433082509450"><a id="itemActif1433082509450" style="z-index:999" href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/veenen16.jpg" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/24664310.jpg" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/19/15/93/26/nzc_ve12.jpg" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/agaat-11.jpg" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/blackf11.jpg" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/grijs-11.jpg" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/isabel11.jpg" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/oranje10.jpg" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/pastel14.jpg" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/veenen13.jpg" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/pastel12.jpg" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/veenen14.jpg" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/pastel16.jpg" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/veenen11.png" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/img_5810.jpg" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/nzc_sh10.jpg" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/nzc_sh11.jpg" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/veenen15.jpg" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/veenen17.jpg" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/veenen18.jpg" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/11490313.jpg" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/masker13.jpg" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/img_6310.jpg" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/nzc_sh12.jpg" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/veenen19.jpg" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/nzc_sh13.jpg" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/veenen21.jpg" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/veenen12.png" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/nzc_ve17.jpg" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/veenen23.jpg" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/zwartw11.jpg" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/veenen24.jpg" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/veenen13.png" alt="" /></a><a href="#" title="" target="_blank"><img src="http://illiweb.com/fa/empty.gif" alt="" /></a>       
</div><script type="text/javascript">(function(){var r = document.getElementById("rotator1433082509450"), l = r.getElementsByTagName("A"), rotate = window.setInterval(function() {
var a = document.getElementById("itemActif1433082509450"),rand=function(r){return r[parseInt(r.length*Math.random())]}, n =rand(jQuery("a",r)); if (!a) return window.clearInterval(rotate); n.style.opacity = 1;n.style.zIndex = 998;jQuery(a).animate({"opacity":0},800,"linear",function() {a.id = "";a.style.zIndex = "";n.id = "itemActif1433082509450";n.style.zIndex = 999})},5300)})();</script>

no_way
Aidactif
Aidactif

Messages : 1773
Inscrit(e) le : 26/03/2010

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

Résolu Re: Diaporama avec affichage dans un ordre aléatoire

Message par @To le Sam 11 Juil 2015 - 21:24

Super! merci

Juste une chose, la première reste la même, peut on aussi la rendre aléatoire?

@To
*****

Masculin
Messages : 964
Inscrit(e) le : 26/02/2015

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

Résolu Re: Diaporama avec affichage dans un ordre aléatoire

Message par no_way le Sam 11 Juil 2015 - 21:54

Je vous fais ça pour demain, j'éditerai ce message Wink
Edit:
Code:
<style type="text/css">#rotator1433082509450 {height:148px;} #rotator1433082509450 a{position:absolute;background:transparent;border:0px solid transparent;padding:0px;} #rotator1433082509450 img { height:148px;width:190px; }</style><div id="rotator1433082509450"><a style="z-index:999" href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/veenen16.jpg" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/24664310.jpg" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/19/15/93/26/nzc_ve12.jpg" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/agaat-11.jpg" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/blackf11.jpg" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/grijs-11.jpg" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/isabel11.jpg" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/oranje10.jpg" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/pastel14.jpg" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/veenen13.jpg" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/pastel12.jpg" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/veenen14.jpg" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/pastel16.jpg" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/veenen11.png" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/img_5810.jpg" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/nzc_sh10.jpg" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/nzc_sh11.jpg" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/veenen15.jpg" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/veenen17.jpg" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/veenen18.jpg" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/11490313.jpg" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/masker13.jpg" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/img_6310.jpg" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/nzc_sh12.jpg" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/veenen19.jpg" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/nzc_sh13.jpg" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/veenen21.jpg" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/veenen12.png" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/nzc_ve17.jpg" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/veenen23.jpg" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/zwartw11.jpg" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/veenen24.jpg" alt="" /></a><a href="#" title="" target="_blank"><img src="http://i19.servimg.com/u/f19/18/66/91/59/veenen13.png" alt="" /></a></div><script type="text/javascript">(function(){var r = jQuery("#rotator1433082509450"),rand=function(r){var p;r.each(function(){this.id="";this.style.zIndex=""});p=r[parseInt(r.length*Math.random())];p.id="itemActif1433082509450";return p},l=jQuery("a",r) ,rotate = window.setInterval(function() {var a=jQuery("#itemActif1433082509450"), n =jQuery(rand(l)); if (!a) return window.clearInterval(rotate);a.css({"z-index":999,"opacity":1});n.css({"z-index":998,"opacity":1});a.animate({"opacity":0},800,"linear",function() {a[0].style.zIndex="";})},5300),p=!jQuery("#itemActif1433082509450").length&&jQuery(rand(l)).css({"z-index":999,"opacity":1});})();</script>


Dernière édition par no_way le Dim 12 Juil 2015 - 6:16, édité 1 fois

no_way
Aidactif
Aidactif

Messages : 1773
Inscrit(e) le : 26/03/2010

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

Résolu Re: Diaporama avec affichage dans un ordre aléatoire

Message par @To le Sam 11 Juil 2015 - 21:55

Ok, merci encore Very Happy

Bonne soirée, Tony

@To
*****

Masculin
Messages : 964
Inscrit(e) le : 26/02/2015

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

Résolu Re: Diaporama avec affichage dans un ordre aléatoire

Message par @To le Dim 12 Juil 2015 - 11:43

Bonjour no_way,

Yes! parfait Very Happy

Bon dimanche Wink

résolu

@To
*****

Masculin
Messages : 964
Inscrit(e) le : 26/02/2015

@To 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