Discussion :

[michell001]

Bonjour,

J'essaie d'ajouter un effet de transition via un code javascript. La situation est la suivante :

J'ai 2 colonnes. Celle de gauche représente l'image agrandie de celle cliquée dans la colonne de droite. La colonne de droite contient des vignettes des images à agrandir (dans la colonne de gauche). La colonne de gauche contient un div avec un id ("enlargedimg"). Les vignettes sont englobées chacune dans un tag button qui déclenche une action sur un click (onclick event).

A l'id "enlargedimg" j'ajoute ou retire les classes css "img01, img02, img03, img04" contenant l'image agrandie via le code javascript.

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

<button class="btn-product" onclick= "showproduct('img01')"><img src="" class=""></button>

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.img01 {content: url("img/image1.jpeg");}
.img02 {content: url("img/image2.jpeg");}
..

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function showproduct($image) {
  $product_win = document.getElementById("enlargedimg");
  switch ($image) {
    case "img01":
       $product_win.classList.toggle($image);
       $product_win.classList.remove("img02", "img03", "img04");
       break;
    case "img02":
       $product_win.classList.toggle($image);
       $product_win.classList.remove("img01", "img03", "img04");
       break;
    case "img03":
       $product_win.classList.toggle($image);
       $product_win.classList.remove("img01", "img02", "img04");
       break;
    case "img04":
       $product_win.classList.toggle($image);
       $product_win.classList.remove("img01", "img02", "img03");
       break;
   }
}

J'ai essayé

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
case "img01":
       document.getElementById("enlargedimg").style.transition = "all 2s"; 
       $product_win.classList.toggle($image);
       $product_win.classList.remove("img02", "img03", "img04");
       break;

Mais cela ne marche pas. Le but étant que l'affichage de l'image agrandie se fasse de manière soft (smooth).
Merci pour votre aide.
PS: je ne connais pas le javascript étant néophyte en la matière.

[ProgElecT]

Salut

A voir la colorisation dans le code JavaScript, on voit qu'il y a des simples quottes ' mélangées avec des doubles ", erreur de frappe ?

[michell001]

Oui erreur de frappe..

[danielhagnoul]

Vous devez remplacer show-product par showProduct ou show_product dans les codes HTML et JS (- pas accepté en JS).

$product_win = document.getElementById("enlargedimg"); : id inconnu dans les codes que vous avez donnés.

[michell001]

Oui c'est fait mais je n'ai toujours pas cet effet de transition.. Est-ce dû au fait de l'utilisation de content:url() en css ?

Le ID est celui d'un tag DIV qui va contenir l'image agrandie

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<div id="enlargedimg"></div>

A cet ID je rajoute ou enlève la classe img0X qui contient l'image agrandie après avoir cliqué sur l'une des vignettes qui se trouvent dans la colonne de droite.