Agrandir photo puis la déplacer en la reduisant

Version imprimable

Bonjour
je cherche un tuto ou me dire comment faire pour quand je clic sur ajout panier, agrandi une photo puis le déplace tous en la réduisant dans icône panier.
comme sur le site ici quand tu ajoute au panier sans la pop-up.
https://www.topbiz.fr/70-pc-de-bureau
j'ai fait le début mais après je ne vois pas comment faire

la fonction quand je clic sur le panier
Code:

1 2 3 4 5 6 7 8 9 10 11 12 if (document.getElementById('ajopanier')){ document.getElementById('ajopanier').addEventListener('click', function(){ imgpanier(); lookpanier('panier'); }); } function imgpanier() { var photo_princ = document.getElementById('big_pict') ; photo_princ.removeAttribute("class"); photo_princ.classList.add('zomphoto'); }
Code:

1 2 3 4 .zomphoto{ transform:scale(1.5); transition:all .25s; }
une aide, merci

28/09/2023, 22h30
mathieu

une 1re remarque si vous voulez vous baser sur le site que vous citez : l'image en question n'est pas directement déplacée mais c'est une copie de l'image qui se dirige vers le panier.
pour faire cela vous aurez besoin de la méthode suivante qui va créer une nouvelle balise img :
https://developer.mozilla.org/fr/doc.../createElement

ensuite je ne connais pas assez les transitions en css pour savoir si ça pourrait vous être utile. donc la 2e méthode serait de faire des animations pas à pas en javascript qui déplaceraient l'image tout en la réduisant.
vous pouvez utiliser la méthode suivante pour déclencher chaque étape :
https://developer.mozilla.org/fr/doc...API/setTimeout
29/09/2023, 10h50
sylvain257

Bonjour,

Je te propose de regarder les fonctionnalités de jQueryUI qui possède le genre d’événement que tu demandes (en particulier le "effect" > "transfer").

Après si c'est pour une boutique en ligne, tu utilises un CMS genre Wordpress ou Joomla ? Il y a peut être un effet à activer dans l'un deux pour avoir ce que tu recherches.

Bonne journée

Sylvain
29/09/2023, 12h46
maxtrident

merci je vais regarder tous ça.
je code à l'ancienne avec noteopat++
si je n'arrive pas avec js, je ferais avec ça
https://api.jqueryui.com/transfer-effect/
mais je cherche quelque chose de léger

jour

si tu aime le pur js essai ça

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
 
body{
 
   background-color:#91A8D2;
   height:1200px;
}
 
.rectangle1{
 
    height:50px;
        width :100px;
        margin-left:1000px;
        margin-top:80px;
        background:red;
        
}
 
.rectangle2{
 
    height:40px;
        width :60px;
        margin-left:1000px;
        margin-top:60px;
        background:blue;
        
}
 
#cible{
 
    height:60px;
        width :60px;
        left:30px;
        top:400px;
        background:white;
        position:fixed;
        
}
 
</style>
 
 
<script>
 
function preparation(elem,cible){
 
var bd=document.getElementById(elem).getBoundingClientRect();
 
var element=document.getElementById(elem).cloneNode(true);
 
element.style.id="";
element.style.position="absolute";
element.style.marginLeft="0px";
element.style.marginTop="0px";
element.style.left=bd.left+"px";
element.style.top=bd.top+"px";
 
document.body.appendChild(element);
 
var element_cible=document.getElementById(cible);
 
var duree_animation = 500;
 
var nombre_de_cycle = Math.floor(duree_animation/(1000/25));
 
var taille_h_finale=5;
 
var taille_w_finale=5;
 
 
var place=element_cible.getBoundingClientRect()
 
 
 
var distance_l=( element_cible.offsetWidth/2)+place.left-element.offsetLeft-(taille_w_finale/2);
 
var distance_t=( element_cible.offsetHeight/2)+place.top-element.offsetTop-(taille_h_finale/2);
 
var donne={
 
                nombre_de_cycle:Math.floor(duree_animation/(1000/25)),
 
                taille_ho:element.offsetHeight,
 
                distance_lo:element.offsetLeft,
 
                distance_to:element.offsetTop,
 
                compteur:0,
 
                taille_h_par_cycle:(element.offsetHeight-taille_h_finale) / nombre_de_cycle,
 
                taille_w_ratio:element.offsetWidth/element.offsetHeight,
 
                distance_l_par_cycle:distance_l / nombre_de_cycle,
 
                distance_t_par_cycle:distance_t / nombre_de_cycle,
 
                angle:360/nombre_de_cycle,
 
                element:element
 
        }
 
        deplacer(donne)
 
}
 
 
function deplacer(donne){
 
        donne.element.style.left=donne.distance_lo+donne.distance_l_par_cycle*donne.compteur+"px";
 
        donne.element.style.top=donne.distance_to+donne.distance_t_par_cycle*donne.compteur+document.documentElement.scrollTop+"px";
 
        donne.element.style.height=donne.taille_ho-donne.taille_h_par_cycle*donne.compteur+"px";
 
        donne.element.style.width=donne.taille_w_ratio*donne.element.offsetHeight+"px";
 
        donne.element.style.transform='rotate('+donne.angle*donne.compteur+'deg)';
 
        donne.compteur++
        
        if(donne.compteur<=donne.nombre_de_cycle){
 
                setTimeout(deplacer,(1000/25),donne)
        }
        
        else{
        donne.element.remove()
        
        }
}
 
</script>
</head>
<body>
 
<br>
<button onclick='preparation("rectangle1","cible")'>rectangle rouge</button>
<button onclick='preparation("rectangle2","cible")'>rectangle bleu</button>
 
<div id='rectangle1' class='rectangle1'>
</div>
 
<div id='rectangle2' class='rectangle2'>
</div>
 
 
<div id='cible'>
</div>
</body></html>

29/09/2023, 17h35
NoSmoking

Bonjour,
ne pas hésiter à regarder également du côté de l'API Animate alliant JavaScript et CSS.

merci encore pleins de possibilité.
une question la je fait la copie de l'image
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 function imgpanier() { var photo_princ = document.getElementById('big_pict') ; let div = document.createElement("div"); div.classList.add("card"); let img = document.createElement("img"); img.classList.add("zomphoto"); img.alt = "Photo de l'article"; img.src = photo_princ.src; div.appendChild(img); div.style.zIndex = 2; document.querySelector("body").appendChild(div); }
mais elle est positionné en bas de page.
Est ce que je dois la bouger avec du css: position absolute mais qui risque de foiré en responsive ou il y a un moyen de la placer sur l'image actuelle
avec du js ?

29/09/2023, 18h26
NoSmoking

Citation:

une question la je fait la copie de l'image

regarde ce qu'a fait melka one, il a cloné l'image/conteneur

Code:

var element=document.getElementById(elem).cloneNode(true);
01/10/2023, 10h26
maxtrident

merci a tous

bonjour
je ne vois pas comment faire une condition avec le script de melka one
je voudrais afficher une rotation en fonction de l'emplacement cliqué.
je devrais ajouter dans var donne if (rota == 1) { rota:1, }EDIT: c'est bon j'ai trouvé...je ne sais pas si c'est la meilleur methode avec Object.assign

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
var donne={
 
                nombre_de_cycle:Math.floor(duree_animation/(1000/25)),
 
                taille_ho:element.offsetHeight,
 
                distance_lo:element.offsetLeft,
 
                distance_to:element.offsetTop,
 
                compteur:0,
 
                taille_h_par_cycle:(element.offsetHeight-taille_h_finale) / nombre_de_cycle,
 
                taille_w_ratio:element.offsetWidth/element.offsetHeight,
 
                distance_l_par_cycle:distance_l / nombre_de_cycle,
 
                distance_t_par_cycle:distance_t / nombre_de_cycle,
 
                angle:360/nombre_de_cycle,
 
                element:element
 
        }
 if(rota == 1){
	var donne2={ rota:1 }
 } else { var donne2={ rota:0 }}
const returnedTarget = Object.assign(donne, donne2);
        deplacer(donne)
 
 
}
 
 
function deplacer(donne){
 
        donne.element.style.left=donne.distance_lo+donne.distance_l_par_cycle*donne.compteur+"px";
 
        donne.element.style.top=donne.distance_to+donne.distance_t_par_cycle*donne.compteur+document.documentElement.scrollTop+"px";
 
        donne.element.style.height=donne.taille_ho-donne.taille_h_par_cycle*donne.compteur+"px";
 
        donne.element.style.width=donne.taille_w_ratio*donne.element.offsetHeight+"px";
 if(donne.rota == 1){
        donne.element.style.transform='rotate('+donne.angle*donne.compteur+'deg)';
 }
        donne.compteur++
 
        if(donne.compteur<=donne.nombre_de_cycle){
 
                setTimeout(deplacer,(1000/25),donne)
        }
 
        else{
        donne.element.remove()
 
        }
}

18/10/2023, 11h56
NoSmoking

Citation:

EDIT: c'est bon j'ai trouvé...je ne sais pas si c'est la meilleur methode avec Object.assign

Là ça sent l'« enlisement » dans le script, tu pourrais très bien le gérer en tant que paramètre, ou encore mettre la propriété angle à zéro, mais peut-être que melka one t'en dira plus.

le plus simple serais de déclarer la rotation dans la fonction préparation et comme le suggère NoSmoking le gérer en tant que paramètre ce qui donne

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
 
body{
 
   background-color:#91A8D2;
   height:1200px;
}
 
.rectangle1{
 
    
        width :150px;
        margin-left:1000px;
        margin-top:80px;
        background:red;
        
}
 
.rectangle2{
 
    height:40px;
        width :60px;
        margin-left:1000px;
        margin-top:60px;
        background:blue;
        
}
 
#cible{
 
    height:60px;
        width :60px;
        left:30px;
        top:400px;
        background:white;
        position:fixed;
        
}
 
</style>
 
<script>
 
function preparation(elem,cible,nbtour){
 
        var bd=document.getElementById(elem).getBoundingClientRect();
 
        var element=document.getElementById(elem).cloneNode(true);
 
        element.style.id="";
        element.style.position="absolute";
        element.style.marginLeft="0px";
        element.style.marginTop="0px";
        element.style.left=bd.left+"px";
        element.style.top=bd.top+"px";
 
        document.body.appendChild(element);
 
        var element_cible=document.getElementById(cible);
 
        var duree_animation = 800;
        
        var image_par_seconde=30;
 
        var nombre_de_cycle = Math.floor(duree_animation/(1000/image_par_seconde));
 
        var taille_h_finale=20;
 
        var taille_w_finale=element.offsetWidth/element.offsetHeight*taille_h_finale;
 
        var place=element_cible.getBoundingClientRect()
 
        var distance_l=( element_cible.offsetWidth/2)+place.left-element.offsetLeft-(taille_w_finale/2);
 
        var distance_t=( element_cible.offsetHeight/2)+place.top-element.offsetTop-(taille_h_finale/2);
        
        var nb_tour=nbtour
 
        var donne={
        
                image_par_seconde:image_par_seconde,
 
                nombre_de_cycle:nombre_de_cycle,
 
                taille_ho:element.offsetHeight,
 
                distance_lo:element.offsetLeft,
 
                distance_to:element.offsetTop,
 
                compteur:0,
 
                taille_h_par_cycle:(element.offsetHeight-taille_h_finale) / nombre_de_cycle,
 
                taille_w_ratio:element.offsetWidth/element.offsetHeight,
 
                distance_l_par_cycle:distance_l / nombre_de_cycle,
 
                distance_t_par_cycle:distance_t / nombre_de_cycle,
 
                angle:(nb_tour*360)/nombre_de_cycle,
                
                opacite:0.9/nombre_de_cycle,
 
                element:element
        }
 
        deplacer(donne)
 
}
 
function deplacer(donne){
 
        donne.element.style.left=donne.distance_lo+donne.distance_l_par_cycle*donne.compteur+"px";
 
        donne.element.style.top=donne.distance_to+donne.distance_t_par_cycle*donne.compteur+document.documentElement.scrollTop+"px";
 
        donne.element.style.height=donne.taille_ho-donne.taille_h_par_cycle*donne.compteur+"px";
 
        donne.element.style.width=donne.taille_w_ratio*donne.element.offsetHeight+"px";
 
        donne.element.style.transform='rotate('+donne.angle*donne.compteur+'deg)';
        
        donne.element.style.opacity=1-(donne.opacite*donne.compteur);
 
        donne.compteur++
        
        if(donne.compteur<=donne.nombre_de_cycle){
 
                setTimeout(deplacer,(1000/donne.image_par_seconde),donne)
        }
        else{
                donne.element.remove()
        }
}
 
</script>
</head>
<body>
 
<br>
<button onclick='preparation("rectangle1","cible",2)'>rectangle rouge</button>
<button onclick='preparation("rectangle2","cible",0)'>rectangle bleu</button>
 
<img src="y.jpg" id='rectangle1' class='rectangle1'/>
 
 
<div id='rectangle2' class='rectangle2'>
</div>
 
 
<div id='cible'>
</div>
</body></html>

dans le code j'ai ai ajouter l’opacité