Changer et la taille et l'image

Version imprimable

18/09/2009, 08h10
doowy38

Changer et la taille et l'image

Bonjour,

Je débute tout juste en JS et donc je viens solliciter votre aide.
J'affiche sur mon site des miniatures, et j'aimerais que quand on clique sur l'une d'entre elle, elle soit remplacée (et non pas agrandie) par l'originale, qui est donc plus grande, et que lorsqu'on clique sur l'originale elle soit de nouveau remplacée par la miniature, tout ça sans recharger la page.
Les miniatures sont dans un dossier et les originales dans un autre.

Est-ce possible ? J'ai cherché sur google mais je ne trouve que des effets de zoom (ce n'est pas ce que je veux) ou des remplacements de photos mais ayant les mêmes dimensions.

Merci d'avance !
18/09/2009, 08h53
andry.aime

Bonjour,
Modifie l'attribut src de l'image avec l'url de l'image original et vise versa selon l'état lors du click.
18/09/2009, 21h15
doowy38

D'accord, mais comment je fais pour récupérer l'état ?

Je pense qu'il faut que j'appelle une fonction à partir des balises img, qui prendrait en argument le nom de l'image concernée, qui testerait le chemin associé à cette image, et le changerais.

Seulement, je ne sais pas vraiment comment faire ça... appeler une fonction quand on clique sur une image, ça c'est bon. Lui donner comme argument le nom de l'image ça je ne sais pas faire, et ensuite tester le chemin d'accès à l'image je ne sais pas faire non plus... de plus si je change le chemin d'accès, il faut aussi que je spécifie les nouvelles dimension de l'image que je souhaite afficher...

Bref le concept ça va, la réalisation est par contre un peu plus confuse...

Et quelque chose comme çà ?
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <script> var enlarge=0; function change(objet){ if (enlarge==0){ objet.src='57.gif' enlarge=1 }else {objet.src='thumb57.gif';enlarge=0;} } </script> </head> <body> <img src="thumb57.gif" width="100" height="125" onclick="javascript: change(this) ;">
Bien sûr "change(objet,image)" avec image='57' et (...) src='thumb'+image+'gif' serait encore mieux.

Salutations,

18/09/2009, 23h15
doowy38

Ca a l'air plutôt bien, mais si je ne me trompe pas la variable enlarge est dite globale ?
Ce qui veut dire qu'elle serait la même pour toutes les images.
Donc si quelqu'un agrandi une image, puis une autre sans réduire la première, enlarge sera déjà à 1 et il ne se passera rien. Il faudra attendre un deuxième clic.

Ai-je raison ? Si non, peux-tu m'expliquer où je me trompe ?

Et également, ne faut-il pas indiquer les nouvelles dimensions de l'image ?

En tout cas merci pour ton aide !

Donc comme je le pensais, la variable est bien globale, il faut donc que je trouve un autre moyen de tester si l'image est une miniature ou une originale. Je pensais faire un test sur la taille de l'image, est-ce que je peux le faire si cette taille n'est spécifiée nulle part ? Ou faut-il obligatoirement qu'elle apparaisse dans la balise <img /> ?

Sinon, comme je l'ai dit, mes images sont dans différents dossiers. J'ai adapté le code qui a été donné un peu plus haut pour que la fonction marche avec différentes images du même dossier, en rajoutant name="" dans les balises <img />. Cependant, si je change de dossier, ma fonction ne marche plus. En effet, je ne sais pas comment faire pour récupérer le nom du dossier où se trouve l'image... Une idée ?

Voici mon code :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 var taille=0; function changerPhoto(photo) { if (taille==0) { photo.src='09-06-09/' + photo.name + '.JPG'; taille=1; } else { photo.src='09-06-09_mini/' + photo.name + '.JPG'; taille=0; } }

20/09/2009, 15h38
Bovino

Salut

Citation:

En effet, je ne sais pas comment faire pour récupérer le nom du dossier où se trouve l'image...

Ca, tu ne pourras pas le déterminer avec JavaScript...
21/09/2009, 20h50
doowy38

Ah... comment puis-je faire alors ?

Et une autre question : l'attribut name dans la balise <img /> rend mon code invalide quand je le passe au validateur du w3. Est-ce parce que je suis en XHTML 1.0 Strict ? Si oui, à quelle version dois-je passer ?

Merci
23/09/2009, 07h50
doowy38

Je me permet juste de relancer mon sujet, avis aux amateurs !
23/09/2009, 10h53
pasc06

La réponse ?

Apparemment ce que tu cherches se trouve ici :
http://www.jarodxxx.com/index.php?po...-texte-en-AJAX

Je ne l'ai jamais testé, tiens nous au courant ! ;)
05/10/2009, 06h11
doowy38

Merci pour le lien, je vais tester ça dans la semaine et je vous tiendrais au courant.

(désolé j'avais oublié ce topic... :oops:)
14/10/2009, 06h01
doowy38

Salut, j'ai testé le lien qui a été donné, mais ce n'est pas exactement ce que je recherche (ceci dit c'est pas mal, il y a une page montrant un exemple).

Par contre je crois avoir progressé, mais je n'en suis qu'à la théorie, dites-moi ce que vous en pensez :

1) Je récupère la source de l'image
2) J'utilise une regex pour tester la présence d'un certain motif dans la source de l'image
3) Suivant si le motif est présent ou non, je modifie la source en conséquence

L'avantage est que je n'ai plus besoin de l'attribut "name" (donc que mon code redevient valide pour le validateur du w3) et qu'il n'y a plus besoin d'utiliser une variable globale pour savoir quelle image est affichée (ce qui présentait d'ailleurs un défaut si je cliquais sur une autre image avant de réduire la précédente).

Alors, j'ai bon ? :calim2:
31/10/2009, 06h01
doowy38

Bonjour à tous,

J'ai finalement trouvé mon bonheur sur la toile. Je me sers des scripts javascript lightbox2 !
Très facile à mettre en place (du moins sur un site personnel), ça crée un diaporama des images que vous désirez. Vous pouvez également créer plusieurs diaporama par page, et également simplement afficher une image unique.
Le plus simple est de se rendre sur le site, où vous aurez une démonstration en cliquant sur les images : http://www.lokeshdhakar.com/projects/lightbox2 !

Il est possible de changer le design des boutons (il suffit de remplacer l'image correspondante) et certainement les effets visuels si on se penche un peu sur les scripts (qui ont l'air plutôt bien écrit et commenté pour le peu que j'en ai vu).
A noter quand même que cela ne marche que pour des images. Il existe cependant des projets similaires pour des vidéos, des animations flash... que sais-je encore.

Là-dessus, sujet résolu !