Diaporama photos aleatoires + fondu

Résolu
chouk -  
 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
A voir également:

3 réponses

Réponse 1 / 3
adns Messages postés 1094 Date d'inscription   Statut Membre Dernière intervention   153
 
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
0
chouk571 Messages postés 4 Date d'inscription   Statut Membre Dernière intervention  
 
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>
0
Réponse 2 / 3
adns Messages postés 1094 Date d'inscription   Statut Membre Dernière intervention   153
 
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>
0
chouk571 Messages postés 4 Date d'inscription   Statut Membre Dernière intervention  
 
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
0
adns Messages postés 1094 Date d'inscription   Statut Membre Dernière intervention   153
 
C'est ca juste avec de changer l'image j'utilise fadeOut et apres avoir changer l'image j'utilise fadeIn
0
chouk571 Messages postés 4 Date d'inscription   Statut Membre Dernière intervention  
 
Ca marche nickel, merci BEAUCOUP en tout cas
0
adns Messages postés 1094 Date d'inscription   Statut Membre Dernière intervention   153
 
Place ton sujet en résolu donc :)
0
zap221
 
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.
0
Réponse 3 / 3
centrale24
 
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
0

Discussions similaires

Durée d'une diapositive animée
bibibibi99 -
bibibibi99 -

2 réponses
Inserer plusieurs musiques dans un diaporama
valeryves -
Tsoubi -

13 réponses
enchainement de musique sur un diaporama powerpoint
sandra -
jc80 -

2 réponses