blob: f30f934ecae3d82199d467fdeda1d75359c8bd7b (
plain) (
blame)
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
|
function createCarousel(images) {
const carousel = document.createElement('div');
carousel.className = 'carousel';
let currentIndex = 0;
// Create main image container
const mainImageContainer = document.createElement('div');
mainImageContainer.className = 'carousel-main-image';
carousel.appendChild(mainImageContainer);
// Create vignette container
const vignetteContainer = document.createElement('div');
vignetteContainer.className = 'carousel-vignettes';
carousel.appendChild(vignetteContainer);
// Function to update the main displayed image
function updateMainImage() {
mainImageContainer.innerHTML = '';
const img = document.createElement('img');
img.src = images[currentIndex];
img.style.width = '100%';
img.style.height = 'auto';
mainImageContainer.appendChild(img);
}
// Function to create vignettes
function createVignettes() {
vignetteContainer.innerHTML = '';
const containerWidth = carousel.offsetWidth;
const vignetteWidth = 120;
const vignetteHeight = 80;
const vignetteMargin = 10;
const maxVignettes = Math.floor(containerWidth / (vignetteWidth + vignetteMargin));
const startIndex = Math.max(0, currentIndex - Math.floor(maxVignettes / 2));
const endIndex = Math.min(images.length, startIndex + maxVignettes);
for (let i = startIndex; i < endIndex; i++) {
const vignette = document.createElement('div');
vignette.className = 'vignette';
if (i === currentIndex) vignette.classList.add('active');
const img = document.createElement('img');
img.src = images[i];
img.style.width = vignetteWidth + 'px';
img.style.height = vignetteHeight + 'px';
img.style.objectFit = 'cover';
vignette.appendChild(img);
vignette.addEventListener('click', () => goToImage(i));
vignetteContainer.appendChild(vignette);
}
}
// Function to go to a specific image
function goToImage(index) {
currentIndex = index;
updateMainImage();
createVignettes();
}
// Function to go to the next image
function nextImage() {
currentIndex = (currentIndex + 1) % images.length;
updateMainImage();
createVignettes();
}
// Function to go to the previous image
function prevImage() {
currentIndex = (currentIndex - 1 + images.length) % images.length;
updateMainImage();
createVignettes();
}
// Event listener for keyboard navigation
document.addEventListener('keydown', (e) => {
if (e.key === 'ArrowRight') nextImage();
if (e.key === 'ArrowLeft') prevImage();
});
// Initialize the carousel
updateMainImage();
// Use setTimeout to delay the initial creation of vignettes
setTimeout(() => {
createVignettes();
}, 0);
// Recalculate vignettes on window resize
window.addEventListener('resize', createVignettes);
return carousel;
}
// Function to initialize the carousel with specific images
function initializeCarousel(containerId, images) {
document.addEventListener('DOMContentLoaded', () => {
const container = document.getElementById(containerId);
if (container) {
const carouselElement = createCarousel(images);
container.appendChild(carouselElement);
// Use ResizeObserver to detect when the carousel is fully rendered
const resizeObserver = new ResizeObserver(entries => {
for (let entry of entries) {
if (entry.target === carouselElement) {
createVignettes();
resizeObserver.disconnect(); // Stop observing once vignettes are created
}
}
});
resizeObserver.observe(carouselElement);
} else {
console.error(`Container with id "${containerId}" not found.`);
}
});
}
// Make the initializeCarousel function globally available
window.initializeCarousel = initializeCarousel;
|
