Sujet Précédent Sujet Suivant

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:

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
0
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>
0
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>
0
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
0
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
0
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
0
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 :)
0
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.
0
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
0

Discussions similaires

Une musique qui évoque le souvenir ?
fadilb -
Justbymeg -

5 réponses
Durée d'une diapositive animée
bibibibi99 -
bibibibi99 -

2 réponses
Transition automatique diapo suivant
Héloïse -
laugreen -

4 réponses
suggestion de chanson pour montage photo
wexer -
jujule7 -

1 réponse