pbl combiner popup + images aléatoireFermé

Question

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

Dalida · Answer

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 !

jessikou · Answer

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: le code pour la fenêtrte pop up concernant juste une image:

merci

Dalida · Answer

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 : document.write(img(0)).jpg"','Popup','toolbar=0,location=0,directories=0,status=0,scrollbars=1,resizable=1,copyhistory=0,menuBar=0,width=794,height=516');return(false)">

document.write(img(0)).jpg" alt="images du live" border="0"> document.write(img(1)).jpg"','Popup','toolbar=0,location=0,directories=0,status=0,scrollbars=1,resizable=1,copyhistory=0,menuBar=0,width=794,height=516');return(false)">

document.write(img(1)).jpg" alt="images du live" border="0"> document.write(img(2)).jpg"','Popup','toolbar=0,location=0,directories=0,status=0,scrollbars=1,resizable=1,copyhistory=0,menuBar=0,width=794,height=516');return(false)">

document.write(img(2)).jpg" alt="images du live" border="0"> 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…

jessikou · Answer

ok je crée 3 dossiers concert : concert1, concert2, concert3 dans lesquels je place 8 images (les vignettes et les images de tailles normales) 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 ??? document.write(img(0)).jpg"','Popup','toolbar=0,location=0,directories=0,status=0,scrollbars=1,resizable=1,copyhistory=0,menuBar=0,width=794,height=516');return(false)">

document.write(img(0)).jpg" alt="images du live" border="0"> document.write(img(1)).jpg"','Popup','toolbar=0,location=0,directories=0,status=0,scrollbars=1,resizable=1,copyhistory=0,menuBar=0,width=794,height=516');return(false)">

document.write(img(1)).jpg" alt="images du live" border="0"> document.write(img(2)).jpg"','Popup','toolbar=0,location=0,directories=0,status=0,scrollbars=1,resizable=1,copyhistory=0,menuBar=0,width=794,height=516');return(false)">

document.write(img(2)).jpg" alt="images du live" border="0"> merci

Dalida · Answer

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 :

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…

jessikou · Answer

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??? ensuite document.write('img_'+img(0)+'.jpg'))"'Popup','toolbar=0,location=0,directories=0,status=0,scrollbars=1,resizable=1,copyhistory=0,menuBar=0,width=794,height=516');return(false)">

document.write('vignette_'+img(0)+'.jpg'))" alt="images du live" border="0"> ou document.write(img(0)).jpg"','Popup','toolbar=0,location=0,directories=0,status=0,scrollbars=1,resizable=1,copyhistory=0,menuBar=0,width=794,height=516');return(false)">

document.write(img(0)).jpg" alt="images du live" border="0"> 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

Dalida · Answer

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é ?

jessikou · Answer

bien...alors pr le tableau ca donne: et le reste document.write('img_'+img(0)+'.jpg'))"'Popup','toolbar=0,location=0,directories=0,status=0,scrollbars=1,resizable=1,copyhistory=0,menuBar=0,width=794,height=516');return(false)">

document.write('vignette_'+img(0)+'.jpg'))" alt="images du live" border="0"> document.write('img_'+img(1)+'.jpg'))"'Popup','toolbar=0,location=0,directories=0,status=0,scrollbars=1,resizable=1,copyhistory=0,menuBar=0,width=794,height=516');return(false)">

document.write('vignette_'+img(0)+'.jpg'))" alt="images du live" border="0"> document.write('img_'+img(2)+'.jpg'))"'Popup','toolbar=0,location=0,directories=0,status=0,scrollbars=1,resizable=1,copyhistory=0,menuBar=0,width=794,height=516');return(false)">

document.write('vignette_'+img(2)+'.jpg'))" alt="images du live" border="0"> 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

Dalida · Answer

c'est correct??
il faut un essai, c'est le seul juge compétent en la matière !!!

jessikou · Answer

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

Dalida · Answer

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 !

jessikou · Answer

ben voila mon code...est ce que l'erreur est dedans ou peut être au niveau de la gestion des photos?? merci Musique en live

document.write('img_'+img(0)+'.jpg')')",'Popup','toolbar=0,location=0,directories=0,status=0,scrollbars=1,resizable=1,copyhistory=0,menuBar=0,width=794,height=516');return(false)">

document.write('vignette_'+img(0)+'.jpg'))" alt="images du live" border="0">

document.write(img(1)).jpg"','Popup','toolbar=0,location=0,directories=0,status=0,scrollbars=1,resizable=1,copyhistory=0,menuBar=0,width=794,height=516');return(false)">

document.write(img(1)).jpg" alt="images du live" border="0">

document.write(img(2)).jpg"','Popup','toolbar=0,location=0,directories=0,status=0,scrollbars=1,resizable=1,copyhistory=0,menuBar=0,width=794,height=516');return(false)">

document.write(img(2)).jpg" alt="images du live" border="0">

Dalida · Answer

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

si ça fonctionne on verra si on peut améliorer et je t'expliquerai ce que j'ai fait.

jessikou · Answer

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

jessikou · Answer

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

Dalida · Answer

ben en fait comme je n'arrivais pas à écrire la variable dans le '' mais que je sais le faire au chargement de la page ("") 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 '' et '' 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)

jessikou · Answer

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

jessikou · Answer

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

jessikou · Answer

est ce que qulequ'un a une idée pour améliorer le système??

merci

Dalida · Answer

salut,

je viens de refaire le tour de la discussion et je m'y perds un peu&hellip;

peux-tu nous coller le script que tu utilises maintenant ?

zatamine · Answer

il faut metre random généré dans s'un tbleau et vrifier a chque fois si le rand généré existe dans le tableau ...

jessikou · Answer

ben voila mon code est le suivant: j'ai juste crée 3 dossiers et c'est là que ca foire alors que qd tt les images st dans concert ca va nikel avec le precedent code.... merci Musique en live

Dalida · Answer

pourquoi veux-tu les mettre dans trois dossiers différents ?
pour afficher trois pages différentes ?

une version sans les répétitions dans le 'random()'.

jessikou · Answer

parceque si je met toutes les images dans le même dossier prafois elles apparaissent plusieurs fois sur la page et puis je veux mettre un certain type d'image pour la vignette 1, idem pour la 2 et la 3....mais finalement je crois que ca marche, enfin ca depend des fois....

Dalida · Answer

tu as regardé mon dernier lien ?
avec ce script là, plus de répétition.

jessikou · Answer

oui et ca correspond tout à fait a part que je n'ai qu'une seule page....merci

ca me fait penser à mon autre question
comment fait on lorque l'on a une image aléatoire mais cette fois ci lorsque l'on clique dessus ce n'est pas une image pop up qui s'ouvre mais c'est un lien vers une autre page

une image = un lien

j'imagine que c'est presque le même système ....faut mettre les url dans un tableau ou faire une fonction??

jessikou · Answer

sinon j'ai une autre question, pourquoi cela fonctionne avec certaines images et pas d'autres, pourtant c'est aussi des jpg!! c'est à devenir dingue!! vous avez une idée??

merci

caro777 · Answer

salut,

je trouve ce code intéressant et du coup je l'ai adapté pour mon site mais je me rend compte qu'il y a un soucis avec firefox...en effet lorsque l'on clique sur la petite image la grande est beaucoup trop grande dans firefox mais de taille plus réduite (aprés avoir été redimensionnée) dans internet explorer....j'ai vu qu'il y avait une fonction checksize, est ce que ca vient de là???

sinon pour le le lien par rapport à une image aléatoire (ca peut être aussi trés intéressant) il ya ca:

php images aleatoire avec lien

a presto

Dalida · Answer

salut caro777,

en effet lorsque l'on clique sur la petite image la grande est beaucoup trop grande dans firefox mais de taille plus réduite (aprés avoir été redimensionnée) dans internet explorer
je ne comprends pas ce que tu veux dire.
as-tu une url à nous soumettre ou une capture d'écran ?

caro777 · Answer

hello dalida,

c'est vrai, quand je me relis c'est pas trés clair ;-)!!! en fait avec le code que tu as donné on peut cliquer sur une "vignette" et une image popup s'ouvre....elle apparaissait immense alors j'ai réduit la taille de cette image du coup dans IE ca marche parafaitement....en effet l'image grande s'ouvre mais ne prend pas tout l'écran alors que dans firefox elle s'ouvre toujours 10 fois trop grande, on ne voit même pas l'image dans son ensemble!!! Le fait de l'avoir redimensionné n'a rien changé.... 
t'as une idée??

thanks
a presto,

Dalida · Answer

salut,

t'as une idée?? 
oui !!

en fait, ce n'est pas une idée, c'est un réflex !
quand tu fais des modifs et que rien ne se passe &rarr; vide le cache de ton navigateur !!!

&bull; [ Ctrl ] + [ F5 ] pour actualiser la page, cela oblige le navigateur à ignorer le cache et à recharger tous les éléments de la page (donc la photo retaillée&hellip;) ;
&bull; sous FireFox, plus radical et plus pointu : l'extension Cache Status qui te permets de gérer les caches de FF.

à plus

caro777 · Answer

hi,

merci pour les conseils cependant je ne peux pas installer "Cache Status" pour l'instant même si je trouve que ca peut être particulièrement pratique!!! en faisant  [ Ctrl ] + [ F5 ] ca ne fonctionne toujours pas par contre pour une photo que j'avais redimensionné avant ca fonctionne...est ce que ca doit être immédiat?? ya t-il d'autres options??

thanks

Dalida · Answer

re,

est ce que ca doit être immédiat ?
ba oui puisque les dimensions physiques de l'image sont différentes.
si la modification n'est pas visible, c'est soit que l'image n'est pas retaillée, soit que l'image affichée est stockée en mémoire et non pas celle que tu as retaillée.
es-tu sure que l'image que tu cibles est bien celle qui a été retaillée ?

pour une photo que j'avais redimensionné avant ca fonctionne...
es-tu sure que tout est identique ?

caro777 · Answer

ben oui je viens encore de faire le test.....je remplace la photo trop grande par la photo redimensionnée....j'ai vérifié la taille, c'est tout bon!! Je ne vois pas d'ou vient l'erreur....pour la photo qui fonctionne je ne sais plus comment je my suis prise, peut être qu'elle était d'origine à la bonne taille...si t'as une autre idée sinon c'est pas grave....je ferai autrement!!

thanks

Dalida · Answer

si la version est en ligne, peux-tu me filer l'url stp ?

caro777 · Answer

et non c'est pas encore en ligne.....:-(

c'est pour bientôt

pas grave

thanks dalida, a +

Pbl combiner popup + images aléatoire

36 réponses

Discussions similaires

Newsletters