Diaporama photos aleatoires + fondu [Résolu/Fermé]

Signaler
-
 zap221 -
Bonjour,

Je cherche à créer un genre de slideshow (ou de galerie c'est au choix) qui affiche des images contenues dans un dossier avec un effet de fondu et SURTOUT que les images choisies soient aleatoires (en gros il pourrait tres bien afficher 1.jpg, 5.jpg, 8.jpg, 2.jpg, ... que 7.jpg, 3.jpg, 9.jpg, ...).
Je vois ce dont j'ai besoin : JQUERY pour gerer le FadeIn ou le FadeOut et la fonction Randomize pour les images qui apparaissent aleatoirement mais alors pour combiner les deux j'avoue la je coince.

Merci beaucoup pour votre réponse

3 réponses

Messages postés
1100
Date d'inscription
vendredi 23 février 2007
Statut
Membre
Dernière intervention
27 mars 2012
152
Bonjour,

tu as un code à nous soumettre pour que l'on t'aide ?

car si tu viens ici pour que l'on fasse le boulot à ta place il va falloir mettre la main au porte monnaie :)

Adns
Messages postés
4
Date d'inscription
mercredi 6 juillet 2011
Statut
Membre
Dernière intervention
11 juillet 2011

oui oui j'ai deja mis ca en place qui permet un slideshow aleatoire, maintenant il faudrait que la transition entre les images soit en fondu

<script language="javascript">

/*
Random image slideshow- By Tyler Clarke (tyler@ihatecoffee.com)
For this script and more, visit http://www.javascriptkit.com
*/

var delay=3000 //set delay in miliseconds
var curindex=0

var randomimages=new Array()

	randomimages[0]="img/design/logos_medium/1com.jpg"
	randomimages[1]="img/design/logos_medium/aka.jpg"
	randomimages[2]="img/design/logos_medium/bbc.jpg"
	randomimages[3]="img/design/logos_medium/ikki.jpg"
	randomimages[4]="img/design/logos_medium/clubhaus.jpg"
	randomimages[5]="img/design/logos_medium/yoyo.jpg"
	
var preload=new Array()


for (n=0;n<randomimages.length;n++)
{
	preload[n]=new Image()
	preload[n].src=randomimages[n]
}

document.write('<img name="defaultimage" src="'+randomimages[Math.floor(Math.random()*(randomimages.length))]+'" class="slideshow" />')

function rotateimage()
{

if (curindex==(tempindex=Math.floor(Math.random()*(randomimages.length)))){
curindex=curindex==0? 1 : curindex-1
}
else
curindex=tempindex

	document.images.defaultimage.src=randomimages[curindex]
}

setInterval("rotateimage()",delay)

</script>
Messages postés
1100
Date d'inscription
vendredi 23 février 2007
Statut
Membre
Dernière intervention
27 mars 2012
152
Jai du remplacer les images pour pouvoir tester..

Mais cela fonctionne si tu as besoin d'explications n'hésite pas

<script src="http://code.jquery.com/jquery-1.6.2.js"></script>

<script language="javascript">

/*
Random image slideshow- By Tyler Clarke (tyler@ihatecoffee.com)
For this script and more, visit http://www.javascriptkit.com
*/

var delay=3000; //set delay in miliseconds
var curindex=0;

var randomimages=new Array();

	randomimages[0]="http://t1.gstatic.com/images?q=tbn:ANd9GcSM82IEtpybpnUi2y1EDFqAcZxFWRwUN5xz95dWOmEXbQvSzzBg";
	randomimages[1]="http://t0.gstatic.com/images?q=tbn:ANd9GcQZfYQnPDFd3y42rhF_MWOW2c-pW5_IOJt0BNNoXb_cAIFI9sUt";
	randomimages[2]="http://t1.gstatic.com/images?q=tbn:ANd9GcSUS2U9nOKF9FGaxGHTvPEr4zEQWZNHSDq0PiwSkEwnNszONq0CVA";
	randomimages[3]="http://t1.gstatic.com/images?q=tbn:ANd9GcST_vPOfTXVwaf_GIlSIRXdeku84czAzIz0Co3G29uJlL9R1W3i";
	randomimages[4]="http://t0.gstatic.com/images?q=tbn:ANd9GcS1LkEGsT9NlLEm2semMWO6gpw4remCt1X4XcLF_7-l-JXNHooo";
	randomimages[5]="http://t0.gstatic.com/images?q=tbn:ANd9GcQitbjkZvBjG_Ud-RmdPQaRkGeN-pYgXDdaVew4mJw5yFPjQCBShw";
	
var preload=new Array();


for (n=0;n<randomimages.length;n++){
	preload[n]=new Image();
	preload[n].src=randomimages[n];
}

function rotateimage(){

if (curindex==(tempindex=Math.floor(Math.random()*(randomimages.length))))
	curindex=curindex==0? 1 : curindex-1;
else
	curindex=tempindex;
	$("#defaultimage").fadeOut(500,function(){
		$("#defaultimage").attr("src",randomimages[curindex]);
		$("#defaultimage").fadeIn(500);
	});
	
}
document.write('<img id="defaultimage" src="'+randomimages[Math.floor(Math.random()*(randomimages.length))]+'" class="slideshow" />');
setInterval("rotateimage()",delay);

</script>

Messages postés
4
Date d'inscription
mercredi 6 juillet 2011
Statut
Membre
Dernière intervention
11 juillet 2011

Vu que je suis nul en javascript je saisi pas du tout le script que j'ai dès le départ mais en faisant preuve de logique et si j'ai bien compris, tu appelles la bibliotheque jQuery et tu incorpore la fonction FadeIn / FadeOut c'est bien ça
Messages postés
1100
Date d'inscription
vendredi 23 février 2007
Statut
Membre
Dernière intervention
27 mars 2012
152
C'est ca juste avec de changer l'image j'utilise fadeOut et apres avoir changer l'image j'utilise fadeIn
Messages postés
4
Date d'inscription
mercredi 6 juillet 2011
Statut
Membre
Dernière intervention
11 juillet 2011

Ca marche nickel, merci BEAUCOUP en tout cas
Messages postés
1100
Date d'inscription
vendredi 23 février 2007
Statut
Membre
Dernière intervention
27 mars 2012
152
Place ton sujet en résolu donc :)
Oui c'est vraiment du resolu mais je voudrais savoir comment faire pour qu'il choisisse directement dans un repertoire les images afin de les afficher.
Bonjour,
J'ai copié le script car j'en avait un mais qui ne fonctionnait pas sous firefox.
En revanche je n'arrive pas à inclure le diapo dans une balise div.
Quelqu'un peut m'aider?
Merci