-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
147 lines (116 loc) · 3.82 KB
/
script.js
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
// La pagina si caricherà solo quando tutto sarà visibile
window.addEventListener('load', function () {
document.body.style.visibility = 'visible';
});
// Bottone menu
let moved = false;
function move() {
let barrafiltro = document.getElementById('barrafiltro');
if (!moved) {
barrafiltro.style = "transform: translateX(-150px);";
moved = true;
} else {
barrafiltro.style = "transform: translateX(0px);";
moved = false;
}
}
// 360° view main page
var productViewer = new ProductViewer({
element: document.querySelector('.homeproduct_viewer .product_viewer'),
imagePath: './images/homepagescarpa/',
filePrefix: 'img',
fileExtension: '.webp',
});
// 360° icon disappear when clicked
document.querySelector('.product_viewer').addEventListener('mousedown', function () {
document.querySelector('.turnaroundicon').style = 'color: rgba(0, 0, 0, 0); background-color: rgba(0, 0, 0, 0);';
});
document.querySelector('.product_viewer').addEventListener('mouseup', function () {
document.querySelector('.turnaroundicon').style = 'color: white; background-color: rgba(0, 0, 0, 0.616);';
});
// if you want to see it will roted 360 deg once it loaded then you have to write some extra code
productViewer.once('loaded', function () {
productViewer.animate360();
})
//cookie
function chiudiCookie() {
document.getElementById('cookie').style.display = 'none';
}
//************//
//GRIGLIA.HTML//
//************//
// Initialize Swiper//
var swiper = new Swiper(".mySwiper", {
spaceBetween: 30,
centeredSlides: true,
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
//************//
//Prodotto1.HTML//
//************//
//change image when hover
function changeImage(smallImage) {
var bigImage = document.querySelector('.big-image');
bigImage.src = smallImage.src;
}
//il modello 3d appare
function viewAppear() {
var scarpa3d = document.querySelector('.viewbox1');
scarpa3d.style = 'display: block;';
var overlay = document.querySelector('#overlay');
// If overlay does not exist, create a new one
if (!overlay) {
overlay = document.createElement('div');
overlay.style.position = 'fixed';
overlay.style.top = '0';
overlay.style.left = '0';
overlay.style.width = '100%';
overlay.style.height = '100%';
overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.93)';
overlay.style.zIndex = '1';
overlay.id = 'overlay';
document.body.appendChild(overlay);
}
overlay.style.display = 'block';
}
//close button
function viewDisappear() {
var overlay = document.querySelector('#overlay');
// If overlay exists, hide it
if (overlay) {
overlay.style.display = 'none';
}
var scarpa3d = document.querySelector('.viewbox1');
scarpa3d.style.display = 'none';
}
// //
//Change color bg
function bgColorChange() {
var modelViewer = document.querySelector('model-viewer');
var blackWhiteButton = document.querySelector('.blackbgmodel');
var coloreScarpa = document.querySelector('.colorescarpa')
if (modelViewer.style.backgroundColor === 'black') {
modelViewer.style.backgroundColor = 'white';
modelViewer.style.border = '2px solid rgba(255, 255, 255, 0.479)';
blackWhiteButton.style.backgroundColor === 'white';
blackWhiteButton.style.backgroundColor = 'black';
coloreScarpa.style.color === 'white';
coloreScarpa.style.color = 'black';
} else {
modelViewer.style.backgroundColor = 'black';
modelViewer.style.border = 'none';
blackWhiteButton.style.backgroundColor = 'white';
coloreScarpa.style.color = 'white';
}
}