Diaporama photos aleatoires + fondu

Résolu/Fermé

chouk - Modifié par chouk le 5/07/2011 à 11:07
zap221 - 14 sept. 2012 à 23:47

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:

Diaporama photos aleatoires + fondu
Partage de photos - Guide
Toutes mes photos - Guide
Doublons photos - Guide
Faire un diaporama photo avec musique windows 10 - Guide
Photos de profil - Guide

3 réponses

Réponse 1 / 3

adns Messages postés 1094 Date d'inscription vendredi 23 février 2007 Statut Membre Dernière intervention 27 mars 2012 153
6 juil. 2011 à 11:50

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

chouk571 Messages postés 4 Date d'inscription mercredi 6 juillet 2011 Statut Membre Dernière intervention 11 juillet 2011
6 juil. 2011 à 19:32

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>

Réponse 2 / 3

adns Messages postés 1094 Date d'inscription vendredi 23 février 2007 Statut Membre Dernière intervention 27 mars 2012 153
7 juil. 2011 à 15:19

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>

chouk571 Messages postés 4 Date d'inscription mercredi 6 juillet 2011 Statut Membre Dernière intervention 11 juillet 2011
7 juil. 2011 à 15:58

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

adns Messages postés 1094 Date d'inscription vendredi 23 février 2007 Statut Membre Dernière intervention 27 mars 2012 153
7 juil. 2011 à 15:59

C'est ca juste avec de changer l'image j'utilise fadeOut et apres avoir changer l'image j'utilise fadeIn

chouk571 Messages postés 4 Date d'inscription mercredi 6 juillet 2011 Statut Membre Dernière intervention 11 juillet 2011
7 juil. 2011 à 16:01

Ca marche nickel, merci BEAUCOUP en tout cas

adns Messages postés 1094 Date d'inscription vendredi 23 février 2007 Statut Membre Dernière intervention 27 mars 2012 153
8 juil. 2011 à 07:53

Place ton sujet en résolu donc :)

zap221
14 sept. 2012 à 23:47

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.

Réponse 3 / 3

centrale24
21 févr. 2012 à 21:49

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

Discussions similaires

Une musique qui évoque le souvenir ?

Boucle sur la première diapositive d'une présentation

pour un diapo automatique combien de temps mettre sur les photos Merci

Ne pas voir sur le fil d'actualité mon identification

suggestion de chanson pour montage photo

Discussions similaires

Newsletters