testing glider.js
davvalent commited on 2023-03-21 13:58:35
Showing 1 changed files, with 77 additions and 4 deletions.
- js/main.js b6f7376..d5831bf
| ... | ... |
@@ -177,15 +177,55 @@ |
| 177 | 177 |
} |
| 178 | 178 |
|
| 179 | 179 |
const popUpInformation = ` |
| 180 |
+ <div class="glide"> |
|
| 181 |
+ |
|
| 182 |
+ <div class="glider-contain"> |
|
| 183 |
+ <div class="glider"> |
|
| 184 |
+ <div> |
|
| 185 |
+ <img src="https://archivesdemontreal.ica-atom.org/uploads/r/ville-de-montreal-section-des-archives/1/7/178126/VM94C196-0132.jpg"> |
|
| 186 |
+ <div class="overlay"></div> |
|
| 187 |
+ </div> |
|
| 188 |
+ <div> |
|
| 189 |
+ <img src="https://archivesdemontreal.ica-atom.org/uploads/r/ville-de-montreal-section-des-archives/1/8/184246/VM94C196-0839.jpg"> |
|
| 190 |
+ <div class="overlay"></div> |
|
| 191 |
+ </div> |
|
| 192 |
+ <div> |
|
| 193 |
+ <img src="https://archivesdemontreal.ica-atom.org/uploads/r/ville-de-montreal-section-des-archives/1/7/177798/VM94C196-0038.jpg"> |
|
| 194 |
+ <div class="overlay"></div> |
|
| 195 |
+ </div> |
|
| 196 |
+ </div> |
|
| 197 |
+ |
|
| 198 |
+ <button aria-label="Previous" class="glider-prev">«</button> |
|
| 199 |
+ <button aria-label="Next" class="glider-next">»</button> |
|
| 200 |
+ <div role="tablist" class="dots"></div> |
|
| 201 |
+ |
|
| 202 |
+ </div> |
|
| 203 |
+ |
|
| 204 |
+ <!-- |
|
| 205 |
+ <div class="glide__arrows" data-glide-el="controls"> |
|
| 206 |
+ <button class="slider__arrow slider__arrow--left glide__arrow glide__arrow--left" data-glide-dir="<"> |
|
| 207 |
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"> |
|
| 208 |
+ <path fill="#fff" d="M15.293 3.293 6.586 12l8.707 8.707 1.414-1.414L9.414 12l7.293-7.293-1.414-1.414z"/> |
|
| 209 |
+ </svg> |
|
| 210 |
+ </button> |
|
| 211 |
+ <button class="slider__arrow slider__arrow--right glide__arrow glide__arrow--right" data-glide-dir=">"> |
|
| 212 |
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"> |
|
| 213 |
+ <path fill="#fff" d="M7.293 4.707 14.586 12l-7.293 7.293 1.414 1.414L17.414 12 8.707 3.293 7.293 4.707z"/> |
|
| 214 |
+ </svg> |
|
| 215 |
+ </button> |
|
| 216 |
+ </div> |
|
| 217 |
+ --> |
|
| 218 |
+ </div> |
|
| 219 |
+ |
|
| 220 |
+ <div class="rdf-data"> |
|
| 180 | 221 |
<h1>${feature.properties.URI}</h1>
|
| 222 |
+ <div> |
|
| 181 | 223 |
<pre>${JSON.stringify(jsonLD, undefined, 2)}</pre>
|
| 224 |
+ </div> |
|
| 225 |
+ </div> |
|
| 182 | 226 |
`; |
| 183 | 227 |
|
| 184 | 228 |
popup.setContent(popUpInformation); |
| 185 |
- }, |
|
| 186 |
- (reason) => {
|
|
| 187 |
- /* rejection handler */ |
|
| 188 |
- }); |
|
| 189 | 229 |
|
| 190 | 230 |
/** |
| 191 | 231 |
* Déplacement et centrage de la punaise |
| ... | ... |
@@ -200,6 +240,39 @@ |
| 200 | 240 |
targetPoint = pifm.project(targetLatLng, targetZoom).subtract([popUpWidth / 2, 0]); |
| 201 | 241 |
targetLatLng = pifm.unproject(targetPoint, targetZoom); |
| 202 | 242 |
pifm.setView(targetLatLng, targetZoom); |
| 243 |
+ |
|
| 244 |
+ setTimeout(() => {
|
|
| 245 |
+ |
|
| 246 |
+ new Glider(document.querySelector('.glider'), {
|
|
| 247 |
+ slidesToShow: "auto", |
|
| 248 |
+ itemWidth: 250, |
|
| 249 |
+ arrows: {
|
|
| 250 |
+ prev: '.glider-prev', |
|
| 251 |
+ next: '.glider-next' |
|
| 252 |
+ } |
|
| 253 |
+ }); |
|
| 254 |
+ |
|
| 255 |
+ // const glide = new Glide(".glide", {
|
|
| 256 |
+ // type: 'carousel', |
|
| 257 |
+ // slideWidth: 400, |
|
| 258 |
+ // perView: 2, |
|
| 259 |
+ // focusAt: "center", |
|
| 260 |
+ // gap: 4, |
|
| 261 |
+ // animationDuration: 200, |
|
| 262 |
+ // keyboard: false |
|
| 263 |
+ // }); |
|
| 264 |
+ |
|
| 265 |
+ // glide.mount(); |
|
| 266 |
+ |
|
| 267 |
+ }, 1000); |
|
| 268 |
+ }, |
|
| 269 |
+ (reason) => {
|
|
| 270 |
+ /* rejection handler */ |
|
| 271 |
+ }).catch(err => console.log(err)); |
|
| 272 |
+ |
|
| 273 |
+ if (dev()) {
|
|
| 274 |
+ console.log("Dev popup:", popup);
|
|
| 275 |
+ } |
|
| 203 | 276 |
}); |
| 204 | 277 |
} |
| 205 | 278 |
}), |
| 206 | 279 |