Sujet Précédent Sujet Suivant

Pbl combiner popup + images aléatoire

Fermé
jessikou Messages postés 43 Date d'inscription jeudi 29 mars 2007 Statut Membre Dernière intervention 6 octobre 2007 - 4 sept. 2007 à 13:24
 caro777 - 13 sept. 2007 à 14:33
salut tt le monde,

ben voila g un gros pbl...en fait j'ai sur un site 3 petites vignettes...lorsqu'on clique sur une, une fenêtre popup s'ouvre jusqu'ici tt va bien...ca se corse lorsqu'il faut que les images des vignettes soient aléatoires

donc 3 vignettes qui lorsque l'on réactualise la page changent mais lorsque l'on clique sur l'une d'entre elle la pop up qui correspond s'ouvre

je sais faire les 2 independament mais combiné non

est ce que quelqu'un peut m'aider??

merci

36 réponses

  • 1
  • 2
Réponse 1 / 36
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 921
4 sept. 2007 à 16:29
c'est correct??
il faut un essai, c'est le seul juge compétent en la matière !!!
1
Réponse 2 / 36
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 921
4 sept. 2007 à 13:48
salut,

peux-tu nous montrer ce que tu as fait (url ou copier/coller) ?

et s'il te plait n'écris pas en abréviations, merci !
0
Réponse 3 / 36
jessikou Messages postés 43 Date d'inscription jeudi 29 mars 2007 Statut Membre Dernière intervention 6 octobre 2007 3
4 sept. 2007 à 13:56
désolée c l'habitude on s'en rend même plus compte après....

le code pour les images aléatoires qui st nommées 1, 2, 3 dans un dossier 100:
<script language="JavaScript">
var nombre_photos = 3;
var i = Math.round(Math.random() * (nombre_photos - 1)) + 1;
document.write('<img src="<? echo $pref['sources']['images'] ?>100/' + i + '.gif" width="100" style="border-color:#993333;">');
</script>

le code pour la fenêtrte pop up concernant juste une image:
<a href="#"onclick="window.open('../www/images/concert/im628.jpg','Popup','toolbar=0,location=0,directories=0,status=0,scrollbars=1,resizable=1,copyhistory=0,menuBar=0,width=794,height=516');return(false)">
<img src="../www/images/concert/im628_vt.jpg" alt="images du live" border="0"></a>

merci
0
Réponse 4 / 36
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 921
4 sept. 2007 à 14:05
ok, donc il n'y a pas de rapport entre tes deux codes ?
il faut que le résultat produit par le 'random()' soit stocké dans un tableau qui servira pour le lien de la pop-up. 
img = Array();
img(0) = Math.round(Math.random() * (nombre_photos - 1)) + 1;
img(1) = Math.round(Math.random() * (nombre_photos - 1)) + 1;
img(2) = Math.round(Math.random() * (nombre_photos - 1)) + 1;

et après tu ajouteras : 
<a href="#"onclick="window.open('../www/images/concert/<script language="Javascript">document.write(img(0))</script>.jpg"','Popup','toolbar=0,location=0,directories=0,status=0,scrollbars=1,resizable=1,copyhistory=0,menuBar=0,width=794,height=516');return(false)">
<img src="../www/images/concert/<script language="Javascript">document.write(img(0))</script>.jpg" alt="images du live" border="0"></a>
<a href="#"onclick="window.open('../www/images/concert/<script language="Javascript">document.write(img(1))</script>.jpg"','Popup','toolbar=0,location=0,directories=0,status=0,scrollbars=1,resizable=1,copyhistory=0,menuBar=0,width=794,height=516');return(false)">
<img src="../www/images/concert/<script language="Javascript">document.write(img(1))</script>.jpg" alt="images du live" border="0"></a>
<a href="#"onclick="window.open('../www/images/concert/<script language="Javascript">document.write(img(2))</script>.jpg"','Popup','toolbar=0,location=0,directories=0,status=0,scrollbars=1,resizable=1,copyhistory=0,menuBar=0,width=794,height=516');return(false)">
<img src="../www/images/concert/<script language="Javascript">document.write(img(2))</script>.jpg" alt="images du live" border="0"></a>

c'est du très approximatif !!!
je l'ai codé en direct sur le site, donc ne t'attends pas à ce que ça fonctionne direct !
par contre j'espère que tu comprendras ce que je veux dire…
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 36
jessikou
4 sept. 2007 à 14:39
ok

je crée 3 dossiers concert : concert1, concert2, concert3 dans lesquels je place 8 images (les vignettes et les images de tailles normales)

<html>
<head>
<script type="text/javascript">
img = Array();
img(0) = Math.round(Math.random() * (8 - 1)) + 1;
img(1) = Math.round(Math.random() * (8 - 1)) + 1;
img(2) = Math.round(Math.random() * (8 - 1)) + 1;

</script>
</head>
</html>

ensuite si j'ai bien compris quand on clique sur une vignette aléatoire avec le script intégré on ouvre l'image qui lui correspond mais là il s'agit plutôt du dossier avec img(0) img(1)... non comme sait-il que pour l'image_vignette du dossier concert2 correspond l'image_taillemormale de ce dossier ???

<a href="#"onclick="window.open('../www/images/concert/concert1/<script language="Javascript">document.write(img(0))</script>.jpg"','Popup','toolbar=0,location=0,directories=0,status=0,scrollbars=1,resizable=1,copyhistory=0,menuBar=0,width=794,height=516');return(false)">
<img src="../www/images/concert/concert1/<script language="Javascript">document.write(img(0))</script>.jpg" alt="images du live" border="0"></a>

<a href="#"onclick="window.open('../www/images/concert/concert2/<script language="Javascript">document.write(img(1))</script>.jpg"','Popup','toolbar=0,location=0,directories=0,status=0,scrollbars=1,resizable=1,copyhistory=0,menuBar=0,width=794,height=516');return(false)">
<img src="../www/images/concert/concert2/<script language="Javascript">document.write(img(1))</script>.jpg" alt="images du live" border="0"></a>

<a href="#"onclick="window.open('../www/images/concert/concert3/<script language="Javascript">document.write(img(2))</script>.jpg"','Popup','toolbar=0,location=0,directories=0,status=0,scrollbars=1,resizable=1,copyhistory=0,menuBar=0,width=794,height=516');return(false)">
<img src="../www/images/concert/concert3/<script language="Javascript">document.write(img(2))</script>.jpg" alt="images du live" border="0"></a>

merci
0
Réponse 6 / 36
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 921
4 sept. 2007 à 15:22
ah oui, d'accord !

pour le tableau, on est ok ?
pour les liens : ben en fait c'est à toi de faire ta cuisine !!!

il faut que tu adaptes le code et les noms de fichiers.
les images doivent toutes avoir le même nom (ex: img_1.jpg à laquelle correspond vignette_1.jpg)
donc dans ton code le JS ne viendra inscrire que le "1", le reste étant codé en dur.
pour le dossier tu fais comme tu as fait avant, avec php.

on va dire que le script à généré un tableau contenant 5, 3, 8.

pour la première image le code serait : 
<a href="#"onclick="window.open('../www/images/concert/img_5.jpg','Popup','toolbar=0,location=0,directories=0,status=0,scrollbars=1,resizable=1,copyhistory=0,menuBar=0,width=794,height=516');return(false)">
<img src="../www/images/concert/vignette_5.jpg" alt="images du live" border="0"></a>

ce qui est souligné est généré par les scripts, le reste est écrit en html.

php doit écrire '../www/images/concert/', ça tu l'as fait.

et il faut que le JS ne fasse qu'écrire "img_5.jpg" et "vignette_5.jpg".
le "5" c'est le premier chiffre du tableau et le reste c'est pareil pour toutes les images. 
document.write('img_'+img(0)+'.jpg')

et 
document.write('vignette_'+img(0)+'.jpg')


j'espère t'avoir bien comprise…
0
Réponse 7 / 36
jessikou
4 sept. 2007 à 16:07
là c moi qui ne comprend plus....entre le php et le JS

Je récapitule et tu me dis si je me trompe....

j'ai un dossier concert et dans ce dossier il ya à la fois mes grandes images et mes vignettes...en tt 9 vignettes et 9 grandes images...sur ma page m'apparait que 3 vignettes donc 3 photos différentes par vignettes qd on actualise...

je mets ca pr le tableau???

<html>
<head>
<script type="text/javascript">
img=Array();
img(0)=Math.round(Math.random()*(9-1))+1;
img(1)=Math.round(Math.random()*(9-1))+1;
img(3)=Math.round(Math.random()*(9-1))+1;
img(4)=Math.round(Math.random()*(9-1))+1;
img(5)=Math.round(Math.random()*(9-1))+1;
img(6)=Math.round(Math.random()*(9-1))+1;
img(7)=Math.round(Math.random()*(9-1))+1;
img(8)=Math.round(Math.random()*(9-1))+1;
img(9)=Math.round(Math.random()*(9-1))+1;
</script>
</head>
</html>

ensuite

<a href="#"onclick="window.open('../www/images/concert/<script language="Javascript">document.write('img_'+img(0)+'.jpg'))"</script>'Popup','toolbar=0,location=0,directories=0,status=0,scrollbars=1,resizable=1,copyhistory=0,menuBar=0,width=794,height=516');return(false)">
<img src="../www/images/concert/<script language="Javascript">document.write('vignette_'+img(0)+'.jpg'))"</script> alt="images du live" border="0"></a>

ou

<a href="#"onclick="window.open('../www/images/concert/<script language="Javascript">document.write(img(0))</script>.jpg"','Popup','toolbar=0,location=0,directories=0,status=0,scrollbars=1,resizable=1,copyhistory=0,menuBar=0,width=794,height=516');return(false)">
<img src="../www/images/concert/<script language="Javascript">document.write(img(0))</script>.jpg" alt="images du live" border="0"></a>

et j'en fais ainsi 3 pr mes 3 vignettes??? img(1), img(2), img(3)??? j'ai peur de pas tt avoir compris

merci
0
Réponse 8 / 36
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 921
4 sept. 2007 à 16:14
oui !
pour le tableau il suffit de créer seulement trois nombres puisqu'il sera rechargé à chaque affichage et que de toute façon tu n'as besoin que de trois nombres !

pour le reste, oui aussi si le dossier est le même à chaque fois !
je suppose que ce dossier change en fonction de la page choisie.

as-tu essayé ?
0
Réponse 9 / 36
jessikou Messages postés 43 Date d'inscription jeudi 29 mars 2007 Statut Membre Dernière intervention 6 octobre 2007 3
4 sept. 2007 à 16:23
bien...alors pr le tableau ca donne:

<html>
<head>
<script type="text/javascript">
img=Array();
img(0)=Math.round(Math.random()*(9-1))+1;
img(1)=Math.round(Math.random()*(9-1))+1;
img(2)=Math.round(Math.random()*(9-1))+1;
</script>
</head>
</html>

et le reste

<a href="#"onclick="window.open('../www/images/concert/<script language="Javascript">document.write('img_'+img(0)+'.jpg'))"</script>'Popup','toolbar=0,location=0,directories=0,status=0,scrollbars=1,resizable=1,copyhistory=0,menuBar=0,width=794,height=516');return(false)">
<img src="../www/images/concert/<script language="Javascript">document.write('vignette_'+img(0)+'.jpg'))"</script> alt="images du live" border="0"></a>

<a href="#"onclick="window.open('../www/images/concert/<script language="Javascript">document.write('img_'+img(1)+'.jpg'))"</script>'Popup','toolbar=0,location=0,directories=0,status=0,scrollbars=1,resizable=1,copyhistory=0,menuBar=0,width=794,height=516');return(false)">
<img src="../www/images/concert/<script language="Javascript">document.write('vignette_'+img(0)+'.jpg'))"</script> alt="images du live" border="0"></a>

<a href="#"onclick="window.open('../www/images/concert/<script language="Javascript">document.write('img_'+img(2)+'.jpg'))"</script>'Popup','toolbar=0,location=0,directories=0,status=0,scrollbars=1,resizable=1,copyhistory=0,menuBar=0,width=794,height=516');return(false)">
<img src="../www/images/concert/<script language="Javascript">document.write('vignette_'+img(2)+'.jpg'))"</script> alt="images du live" border="0"></a>


Quant à la derniére question je n'ai pas compris....j'ai effectivement un dossier pour un concert qui correspond à une page avec 3 vignettes mais 9 photos et une autre page avec un autre concert avec 3 vignettes correspondantes et 9 autres photos...

mais pour un concert j'ai mis les 9 vignettes + les 9 photos dans le même dossier....

c'est correct??

merci
0
Réponse 10 / 36
jessikou Messages postés 43 Date d'inscription jeudi 29 mars 2007 Statut Membre Dernière intervention 6 octobre 2007 3
4 sept. 2007 à 16:58
et bien ca ne marche pas....il me met une petite croix à la place de l'image et qd je la survole j'ai tt le code qui s''affiche de 'document.write' à 'bordure> est ce que c'est une erreur dans le code??

merci
0
Réponse 11 / 36
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 921
4 sept. 2007 à 22:43
oui, ça y ressemble fort !!!
la croix c'est qu'il ne trouve pas l'image, le code c'est qu'un guillemet (ou une balise) n'est pas fermé.

peux tu nous copier la partie de code correspondante ?
mais la version affichée par le navigateur.

merci !
0
Réponse 12 / 36
jessikou Messages postés 43 Date d'inscription jeudi 29 mars 2007 Statut Membre Dernière intervention 6 octobre 2007 3
5 sept. 2007 à 10:57
ben voila mon code...est ce que l'erreur est dedans ou peut être au niveau de la gestion des photos??

merci

<html>
<head>
<title>Musique en live
</title>

<link rel="stylesheet" href="styles/mel.css" type="text/css">
</head>

<body>


<td align="center" valign="top" width="520" bgcolor="#FFFF99">
<html>
<head>
<script type="text/javascript">
img=Array();
img(0)=Math.round(Math.random()*(9-1))+1;
img(1)=Math.round(Math.random()*(9-1))+1;
img(3)=Math.round(Math.random()*(9-1))+1;

</script>

</head>
</html>


<table width="520" border="0" align="left">
<tr height="130">

<td width="50%">

<table width="520">
<tr align="center" valign="middle" height="130">
<td width="33%" bgcolor="#999933">


<a href="#"onclick="window.open('../www/images/concert/<script language="Javascript">document.write('img_'+img(0)+'.jpg')</script>')",'Popup','toolbar=0,location=0,directories=0,status=0,scrollbars=1,resizable=1,copyhistory=0,menuBar=0,width=794,height=516');return(false)">

<img src="../www/images/concert/<script language="Javascript">document.write('vignette_'+img(0)+'.jpg'))"</script> alt="images du live" border="0"></a>
</td>
</tr>

<tr align="center" valign="middle" height="130">
<td width="33%" bgcolor="#999933">


<a href="#"onclick="window.open('../www/images/concert/<script language="Javascript">document.write(img(1))</script>.jpg"','Popup','toolbar=0,location=0,directories=0,status=0,scrollbars=1,resizable=1,copyhistory=0,menuBar=0,width=794,height=516');return(false)">
<img src="../www/images/concert/<script language="Javascript">document.write(img(1))</script>.jpg" alt="images du live" border="0"></a>

</td>
</tr>

<tr align="center" valign="middle" height="130">
<td width="33%" bgcolor="#999933">


<a href="#"onclick="window.open('../www/images/concert/<script language="Javascript">document.write(img(2))</script>.jpg"','Popup','toolbar=0,location=0,directories=0,status=0,scrollbars=1,resizable=1,copyhistory=0,menuBar=0,width=794,height=516');return(false)">
<img src="../www/images/concert/<script language="Javascript">document.write(img(2))</script>.jpg" alt="images du live" border="0"></a>
</td>
</tr>





</table>
</td>
</tr>

</table>
</body>
</html>
0
Réponse 13 / 36
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 921
5 sept. 2007 à 14:01
salut,

bon ben si ça veut pas faire simple, on va corser un peu.
peux-tu essayer avec ce code, stp : 
<html>
<head>
<title>Musique en live
</title>

<link rel="stylesheet" href="styles/mel.css" type="text/css">
</head>

<body>


<td align="center" valign="top" width="520" bgcolor="#FFFF99">
<html>
<head>
<script type="text/javascript">
img=Array();
img[0]=Math.round(Math.random()*(9-1))+1;
img[1]=Math.round(Math.random()*(9-1))+1;
img[2]=Math.round(Math.random()*(9-1))+1;

function loading()
{
	document.getElementById('image1').src = '../www/images/concert/vignette_'+img[0]+'.jpg';
	document.getElementById('lien1').href = "javascript:popupImage('../www/images/concert/img_"+img[0]+".jpg');";
	
	document.getElementById('image2').src = '../www/images/concert/vignette_'+img[1]+'.jpg';
	document.getElementById('lien2').href = "javascript:popupImage('../www/images/concert/img_"+img[1]+".jpg');";

	document.getElementById('image3').src = '../www/images/concert/vignette_'+img[2]+'.jpg';
	document.getElementById('lien3').href = "javascript:popupImage('../www/images/concert/img_"+img[2]+".jpg');";
}

function popupImage(img) {
titre="Agrandissement";
w=open("",'image','width=400,height=400,toolbar=no,scrollbars=no,resizable=no');
w.document.write("<HTML><HEAD><TITLE>"+titre+"</TITLE></HEAD>");
w.document.write("<SCRIPT language=javascript>function checksize() { if (document.images[0].complete) { window.resizeTo(document.images[0].width+10,document.images[0].height+30); window.focus();} else { setTimeout('checksize()',250) } }</"+"SCRIPT>");
w.document.write("<BODY onload='checksize()' onblur='window.close()' onclick='window.close()' leftMargin=0 topMargin=0 marginwidth=0 marginheight=0>");
w.document.write("<TABLE width='100%' border='0' cellspacing='0' cellpadding='0' height='100%'><TR>");
w.document.write("<TD valign='middle' align='center'><IMG src='"+img+"' border=0 alt='Mon image'>");
w.document.write("</TD></TR></TABLE>");
w.document.write("</BODY></HTML>");
w.document.close();
}

</script>

</head>
<body onload="javascript:loading()">


<table width="520" border="0" align="left">
<tr height="130">

<td width="50%">

<table width="520">
<tr align="center" valign="middle" height="130">
<td width="33%" bgcolor="#999933">

<a id="lien1" href="#" >
	<img id="image1" src="" alt="images du live" border="0">
</a>

</td>
</tr>

<tr align="center" valign="middle" height="130">
<td width="33%" bgcolor="#999933">

<a id="lien2" href="#" >
	<img id="image2" src="" alt="images du live" border="0">
</a>


</td>
</tr>

<tr align="center" valign="middle" height="130">
<td width="33%" bgcolor="#999933">

<a id="lien3" href="#" >
	<img id="image3" src="" alt="images du live" border="0">
</a>

</td>
</tr>





</table>
</td>
</tr>

</table>
</body>
</html>


si ça fonctionne on verra si on peut améliorer et je t'expliquerai ce que j'ai fait.
0
Réponse 14 / 36
jessikou Messages postés 43 Date d'inscription jeudi 29 mars 2007 Statut Membre Dernière intervention 6 octobre 2007 3
5 sept. 2007 à 14:49
yes!!! ca fonctionne...seulement comme j'avais toutes les images au même endroit desfois on pouvait retrouver la même image plusieurs fois, j'ai donc crée 3 dossiers ou j'ai réparti mes images et j'ai modifié le nombre d'images dans le math.random....

même si je vois comment ca fonctionne je ne comprends pas tout ce que tu as fait alors je veux bien que tu m'expliques....et pour améliorer pourquoi pas même si ca fait maintenant exactement ce que je voulais

un grand grand merci
0
Réponse 15 / 36
jessikou Messages postés 43 Date d'inscription jeudi 29 mars 2007 Statut Membre Dernière intervention 6 octobre 2007 3
5 sept. 2007 à 14:57
heu....en fait est ce que l'on peut adapter ton code pour faire ceci:

j'ai une image aléatoire dans un coin de la page et lorsque je clique dessus elle me renvoie à une autre page....ca c'est bon mais suivant les images j'aimerai aller à des pages différentes....le systéme finalement est plus ou moins le même??

merci
0
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 921
5 sept. 2007 à 15:19
oups, posts croisés !
je ne comprends pas ce que tu veux faire…

la popup doit contenir une image différente à chaque fois mais identique à la vignette. ça fonctionne bien ça ?
0
Réponse 16 / 36
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 921
5 sept. 2007 à 15:10
ben en fait comme je n'arrivais pas à écrire la variable dans le '<body>' mais que je sais le faire au chargement de la page ("<body onload="javascript:loading()">") j'ai fait avec comme ça.
et pour la popup, ton code ne m'arrangeait pas non plus donc je suis allé en cherché un autre sur le net.

donc maintenant tu as deux fonctions JS ('loading' et 'popupImage').
la première modifie les balises '<a>' et '<img>' au chargement (en ajoutant la fonction 'popupImage' comme cible du lien). la deuxième ouvre la popup. la fenêtre est censée s'adapter à la taille de l'image.

pour les améliorations, il doit y en avoir. je n'y connais presque rien en JS et je ne sais pas si le code fonctionne partout. par ailleurs si JS n'est activé, il n'y a pas de comportement alternatif. bref, peux mieux faire !
-;o)
0
Réponse 17 / 36
jessikou Messages postés 43 Date d'inscription jeudi 29 mars 2007 Statut Membre Dernière intervention 6 octobre 2007 3
5 sept. 2007 à 17:07
heu....ca marche sans problème avec 2 images mais pas 3!!!

il faut bien mettre :
img[0]=Math.round(Math.random()*(3-1))+1;

et puis on met une image "img_3" et "vignette_3"???

merci
0
Réponse 18 / 36
jessikou Messages postés 43 Date d'inscription jeudi 29 mars 2007 Statut Membre Dernière intervention 6 octobre 2007 3
5 sept. 2007 à 22:41
je suis en train de mettre toutes mes vignettes et j'en ai pas mal et je me rend qu'il y a des choses qui ne vont pas....
en fait la 1ère vignette affiche 2 images et pas 3, la 2ème une seule image et la derniere rien du tout....


si on augmente le chiffre on a droit quà des croix à la place des images....
img[0]=Math.round(Math.random()*(3-1))+1;

et puis on met une image "img_3" et "vignette_3"???

là je suis perdue

merci
0
Réponse 19 / 36
jessikou Messages postés 43 Date d'inscription jeudi 29 mars 2007 Statut Membre Dernière intervention 6 octobre 2007 3
6 sept. 2007 à 16:00
est ce que qulequ'un a une idée pour améliorer le système??

merci
0
Réponse 20 / 36
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 921
6 sept. 2007 à 22:10
salut,

je viens de refaire le tour de la discussion et je m'y perds un peu…

peux-tu nous coller le script que tu utilises maintenant ?
0

Discussions similaires

calcule nombre des pixels "noir" dans un image (noir/blanc)
neji55 -
nath84150 -

3 réponses
voir ses images enregistrés
bastUltra -
bastUltra -

2 réponses
ou sont enregistrées les images
RAKAMA -
mathejea -

4 réponses
tirage aléatoire sans doublon
missfraise02 -
sc -

14 réponses
récupérer des images et vidéos enregistrées sur facebook
karamel24 -
karamel24 -

3 réponses