|
document.addEventListener('DOMContentLoaded', function () {
|
|
|
|
|
|
// Récupérer toutes les images de la galerie
|
|
const imagesSpGallery = [];
|
|
let currentIndex = 0;
|
|
|
|
$('.sp-gallery-interaction img').each(function() {
|
|
$(this).attr('title', 'Ouvrir en visionneuse');
|
|
const src = $(this).attr('src');
|
|
const alt = $(this).attr('alt') || 'Image';
|
|
imagesSpGallery.push({
|
|
src: src,
|
|
alt: alt
|
|
});
|
|
});
|
|
|
|
// Créer le HTML du carrousel
|
|
function createSpCarGal() {
|
|
const SpCarGalHTML = `
|
|
<div class="carousel-overlay">
|
|
<div class="carousel-container">
|
|
<button class="carousel-close">×</button>
|
|
<button class="carousel-prev">❮</button>
|
|
<div class="carousel-content">
|
|
<img class="carousel-image" src="${imagesSpGallery[currentIndex].src}" alt="${imagesSpGallery[currentIndex].alt}">
|
|
<div class="carousel-counter"><span class="current-index">${currentIndex + 1}</span> / ${imagesSpGallery.length}</div>
|
|
</div>
|
|
<button class="carousel-next">❯</button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
return SpCarGalHTML;
|
|
}
|
|
|
|
// Ajouter le CSS du carrousel
|
|
const SpCarGalCSS = `
|
|
<style>
|
|
.carousel-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: rgba(0, 0, 0, 0.9);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
z-index: 9999;
|
|
animation: fadeIn 0.3s ease-in-out;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.carousel-container {
|
|
position: relative;
|
|
width:100%;
|
|
height:100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.carousel-content {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.carousel-image {
|
|
max-width: 100%;
|
|
max-height: 85vh;
|
|
object-fit: contain;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.carousel-counter {
|
|
color: white;
|
|
margin-top: 15px;
|
|
font-size: 14px;
|
|
text-align: center;
|
|
}
|
|
|
|
.carousel-close,
|
|
.carousel-prev,
|
|
.carousel-next {
|
|
position: absolute;
|
|
top: 20px;
|
|
z-index:10;
|
|
background-color:#333;
|
|
background-color:var(--couleur-principale);
|
|
color: white;
|
|
border: 1px solid #FFF;
|
|
padding: 10px 15px;
|
|
font-size: 28px;
|
|
cursor: pointer;
|
|
border-radius: 4px;
|
|
transition: background-color 0.3s ease;
|
|
}
|
|
|
|
.carousel-close {
|
|
right: 20px;
|
|
top: 20px;
|
|
padding: 5px 12px;
|
|
font-size: 32px;
|
|
}
|
|
|
|
.carousel-close:hover {
|
|
background-color: rgba(255, 255, 255, 0.5);
|
|
}
|
|
|
|
.carousel-prev {
|
|
left: 20px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.carousel-next {
|
|
right: 20px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.carousel-prev:hover,
|
|
.carousel-next:hover {
|
|
background-color: rgba(255, 255, 255, 0.5);
|
|
}
|
|
|
|
.carousel-prev:disabled,
|
|
.carousel-next:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* Responsive */
|
|
@media (max-width: 768px) {
|
|
.carousel-prev,
|
|
.carousel-next {
|
|
padding: 8px 12px;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.carousel-image {
|
|
max-height: 70vh;
|
|
}
|
|
}
|
|
</style>
|
|
`;
|
|
|
|
// Injecter le CSS
|
|
$('head').append(SpCarGalCSS);
|
|
|
|
// Fonction pour afficher le carrousel
|
|
function showSpCarGal(index) {
|
|
currentIndex = index;
|
|
const $overlay = $('.carousel-overlay');
|
|
|
|
$overlay.html(createSpCarGal());
|
|
updateSpCarGalButtons();
|
|
}
|
|
|
|
// Fonction pour mettre à jour les boutons
|
|
function updateSpCarGalButtons() {
|
|
const $overlay = $('.carousel-overlay');
|
|
const $prevBtn = $overlay.find('.carousel-prev');
|
|
const $nextBtn = $overlay.find('.carousel-next');
|
|
|
|
// Désactiver/activer les boutons selon la position
|
|
$prevBtn.prop('disabled', currentIndex === 0);
|
|
$nextBtn.prop('disabled', currentIndex === imagesSpGallery.length - 1);
|
|
|
|
// Mettre à jour l'image et le compteur
|
|
$overlay.find('.carousel-image').attr('src', imagesSpGallery[currentIndex].src);
|
|
$overlay.find('.current-index').text(currentIndex + 1);
|
|
}
|
|
|
|
// Gestionnaires d'événements
|
|
$(document).on('click', '.carousel-prev', function() {
|
|
if (currentIndex > 0) {
|
|
currentIndex--;
|
|
updateSpCarGalButtons();
|
|
}
|
|
});
|
|
|
|
$(document).on('click', '.carousel-next', function() {
|
|
if (currentIndex < imagesSpGallery.length - 1) {
|
|
currentIndex++;
|
|
updateSpCarGalButtons();
|
|
}
|
|
});
|
|
|
|
// Fermeture
|
|
$(document).on('click', '.carousel-overlay', function(e) {
|
|
if ($(e.target).hasClass('carousel-overlay')) {
|
|
$(this).remove();
|
|
}
|
|
});
|
|
|
|
$(document).on('keydown', function(e) {
|
|
if ($('.carousel-overlay').length === 0) return;
|
|
|
|
if (e.key === 'Escape') {
|
|
$('.carousel-overlay').remove();
|
|
}
|
|
});
|
|
|
|
$(document).on('click', '.carousel-close', function() {
|
|
$('.carousel-overlay').remove();
|
|
});
|
|
|
|
|
|
// Lancement du carousel au clic
|
|
$('.sp-gallery-interaction img').on('click', function() {
|
|
const clickedSrc = $(this).attr('src');
|
|
const index = imagesSpGallery.findIndex(img => img.src === clickedSrc);
|
|
|
|
if (index !== -1) {
|
|
$('body').append(createSpCarGal());
|
|
showSpCarGal(index);
|
|
}
|
|
});
|
|
|
|
|
|
});
|
