Formulaire de recherche<\/title>\n <style>\n #search-form {\n display: flex;\/* Utilise un conteneur flexible pour les \u00e9l\u00e9ments enfants *\/\n flex-wrap: wrap;\/* Permet aux \u00e9l\u00e9ments enfants de passer \u00e0 la ligne si n\u00e9cessaire *\/\n justify-content: space-between; \/* Espace les \u00e9l\u00e9ments enfants uniform\u00e9ment avec de l'espace entre eux *\/\n max-width: 600px;\/* Limite la largeur maximale du formulaire \u00e0 600 pixels *\/\n }\n #search-form label,\n #search-form select {\n width: 48%;\/* D\u00e9finit la largeur des labels et des s\u00e9lecteurs \u00e0 48% pour qu'ils tiennent sur une ligne *\/\n }\n \n\t\t.btn {\n width: 50px;\n height: 50px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n font-size: 24px;\n color: white;\n margin-top: 10px; \/* Ajoute une marge en haut des boutons *\/\n }\n .btn-green {\n background-color: #4CAF50; \/* Vert *\/\nmargin-left: 40px; \/* Deplace le bouton vers la droite*\/\n }\n .btn-red {\n background-color: #F44336; \/* Rouge *\/\nmargin-right: 40px; \/* Deplace le bouton vers la gauche*\/\n }\n #selected-criteria {\n margin-top: 20px;\/* Ajoute une marge en haut pour espacer du contenu pr\u00e9c\u00e9dent *\/\n padding: 10px;\/* Ajoute du padding int\u00e9rieur pour espacer le contenu interne *\/\n border: 1px solid #ddd;\/* Ajoute une bordure grise claire autour de l'\u00e9l\u00e9ment *\/\n background-color: #f9f9f9;\/* D\u00e9finit une couleur de fond gris clair pour l'\u00e9l\u00e9ment *\/\n display: none;\n }\n\t\t\n\t\t\n <\/style>\n<\/head>\n<body>\n <form id=\"search-form\">\n\t\n <label for=\"menuA\">Rallye :<\/label>\n <select id=\"menuA\">\n\t\t\t<option value=\"\">Tout<\/option>\n <option value=\"PlaqueRallye-Alsace\">Alsace<\/option>\n <option value=\"PlaqueRallye-Ardeche\">Ard\u00e8che<\/option>\n\t\t\t<option value=\"PlaqueRallye-Automne\">Automne<\/option>\n <option value=\"PlaqueRallye-Besse-Sur-Bray\">B\u00e9ss\u00e9 sur Bray<\/option>\n\t\t\t<option value=\"PlaqueRallye-Bethune\">B\u00e9thune<\/option>\n\t\t\t<option value=\"PlaqueRallye-Cevennes\">Ronde C\u00e9venole<\/option>\n\t\t\t<option value=\"PlaqueRallye-Charlemagne\">Charlemagne<\/option>\n\t\t\t<option value=\"PlaqueRallye-Chataigne\">Chata\u00eegne<\/option>\n\t\t\t<option value=\"PlaqueRallye-Coeur-De-France\">Coeur de France<\/option>\n\t\t\t<option value=\"PlaqueRallye-Cotes-Du-Tarn\">C\u00f4te du Tarn<\/option>\n\t\t\t<option value=\"PlaqueRallye-Indre\">Indre<\/option>\n\t\t\t<option value=\"PlaqueRallye-Jeanne-Hachette\">Jeanne Hachette<\/option>\n\t<option value=\"PlaqueRallye-Jeanne-d-Arc\">Jeanne d’Arc<\/option>\n\t\t\t<option value=\"PlaqueRallye-KaltBec\">Kalt Bec<\/option>\n\t\t\t<option value=\"PlaqueRallye-Limousin\">Limousin<\/option>\n\t\t\t<option value=\"PlaqueRallye-Lorraine\">Lorraine<\/option>\n\t\t\t\n\t\t\t<option value=\"PlaqueRallye-Manx\">Manx Rally<\/option>\n\t\t\t<option value=\"PlaqueRallye-Mont-Blanc\">Mont Blanc<\/option>\n\t\t\t<option value=\"PlaqueRallye-Oise\">de l’Oise<\/option>\n\t\t\t<option value=\"PlaqueRallye-Pays-Du-Gier\">Pays du Gier<\/option>\n\t\t\t<option value=\"PlaqueRallye-Picardie\">Picardie<\/option>\n\t\t\t<option value=\"PlaqueRallye-Porte-Normande\">Porte Normande<\/option>\n\t\t\t<option value=\"PlaqueRallye-Rouergue\">Rouergue<\/option>\n\t\t\t<option value=\"PlaqueRallye-Yonne\">Senonais<\/option>\n\t\t\t<option value=\"PlaqueRallye-Yonne\">Yonne<\/option>\n\t\t\t<option value=\"PlaqueRallye-Solognot\">Solognot<\/option>\n\t\t\t<option value=\"PlaqueRallye-Ste-Baume\">Ste Baume<\/option>\n\t\t\t<option value=\"PlaqueRallye-Thymerais\">Thymerais<\/option>\n\t\t\t<option value=\"PlaqueRallye-Touquet\">Touquet<\/option>\n\t\t\t<option value=\"PlaqueRallye-Ternois\">Ternois<\/option>\n\t\t\t<option value=\"PlaqueRallye-Val-D-Agout\">Val d’Agout<\/option>\n\t\t\t<option value=\"PlaqueRallye-Val-De-Loire\">Val de Loire<\/option>\n\t\t\t<option value=\"PlaqueRallye-Val-de-juine\">Val de Juine<\/option>\n\t\t\t<option value=\"PlaqueRallye-Vallee-Du-Cher\">Vall\u00e9e du Cher<\/option>\n\t\t\t<option value=\"PlaqueRallye-Var\">Var<\/option>\n <option value=\"PlaqueRallye-Vins\">Rallye des Vins<\/option>\n\t\t\t<option value=\"PlaqueRallye-Macon\">Vin de M\u00e2con<\/option>\n\t\t\t<option value=\"PlaqueRallye-Vendee\">Vend\u00e9e<\/option>\n\t\t\t\t\t\t\n <\/select>\n\t\t\n\t\t\n\t\t\n <label for=\"menuB\">Num\u00e9ro<\/label>\n <select id=\"menuB\">\n <option value=\"\">Tout<\/option>\n<option value=\"N11\">11<\/option>\n<option value=\"N014\">14<\/option>\n<option value=\"N015\">15<\/option>\n<option value=\"N16\">16<\/option>\n<option value=\"N17\">17<\/option>\n<option value=\"N020\">20<\/option>\n<option value=\"N21\">21<\/option>\n<option value=\"N28\">28<\/option>\n<option value=\"N29\">29<\/option>\n<option value=\"N31\">31<\/option>\n<option value=\"N32\">32<\/option>\n<option value=\"N35\">35<\/option>\n<option value=\"N36\">36<\/option>\n<option value=\"N37\">37<\/option>\n<option value=\"N38\">38<\/option>\n<option value=\"N39\">39<\/option>\n<option value=\"N40\">40<\/option>\n<option value=\"N41\">41<\/option>\n<option value=\"N42\">42<\/option>\n<option value=\"N43\">43<\/option>\n<option value=\"N44\">44<\/option>\n<option value=\"N45\">45<\/option>\n<option value=\"N47\">47<\/option>\n<option value=\"N48\">48<\/option>\n<option value=\"N49\">49<\/option>\n<option value=\"N50\">50<\/option>\n<option value=\"N52\">52<\/option>\n<option value=\"N53\">53<\/option>\n<option value=\"N54\">54<\/option>\n<option value=\"N55\">55<\/option>\n<option value=\"N56\">56<\/option>\n<option value=\"N58\">58<\/option>\n<option value=\"N60\">60<\/option>\n<option value=\"N61\">61<\/option>\n<option value=\"N62\">62<\/option>\n<option value=\"N63\">63<\/option>\n<option value=\"N65\">65<\/option>\n<option value=\"N66\">66<\/option>\n<option value=\"N67\">67<\/option>\n<option value=\"N69\">69<\/option>\n<option value=\"N71\">71<\/option>\n<option value=\"N72\">72<\/option>\n<option value=\"N73\">73<\/option>\n<option value=\"N74\">74<\/option>\n<option value=\"N75\">75<\/option>\n<option value=\"N76\">76<\/option>\n<option value=\"N78\">78<\/option>\n<option value=\"N79\">79<\/option>\n<option value=\"N80\">80<\/option>\n<option value=\"N81\">81<\/option>\n<option value=\"N82\">82<\/option>\n<option value=\"N83\">83<\/option>\n<option value=\"N84\">84<\/option>\n<option value=\"N85\">85<\/option>\n<option value=\"N86\">86<\/option>\n<option value=\"N88\">88<\/option>\n<option value=\"N89\">89<\/option>\n<option value=\"N90\">90<\/option>\n<option value=\"N92\">92<\/option>\n<option value=\"N93\">93<\/option>\n<option value=\"N94\">94<\/option>\n<option value=\"N98\">98<\/option>\n<option value=\"N100\">100<\/option>\n<option value=\"N101\">101<\/option>\n<option value=\"N102\">102<\/option>\n<option value=\"N103\">103<\/option>\n<option value=\"N105\">105<\/option>\n<option value=\"N109\">109<\/option>\n<option value=\"N113\">113<\/option>\n<option value=\"N114\">114<\/option>\n<option value=\"N115\">115<\/option>\n<option value=\"N116\">116<\/option>\n<option value=\"N120\">120<\/option>\n<option value=\"N123\">123<\/option>\n<option value=\"N125\">125<\/option>\n<option value=\"N131\">131<\/option>\n<option value=\"N145\">145<\/option>\n<option value=\"N154\">154<\/option>\t\n<option value=\"N201\">201<\/option>\t\t\t\t\t\t\n <\/select>\n\t\t\n\t\t\n \n \n\t\t\n\t\t\n <label for=\"menuC\">Ann\u00e9es<\/label>\n <select id=\"menuC\">\n <option value=\"\">Tout<\/option>\n <\/select>\n\t\t\n\t\t\n\t\t\n <button type=\"button\" class=\"btn btn-green\" id=\"search-button\">✔<\/button> \n <button type=\"button\" class=\"btn btn-red\" id=\"reset-button\">✖<\/button> \n <\/form>\n\t\n <div id=\"selected-criteria\"><\/div>\n <script>\n document.addEventListener(\"DOMContentLoaded\", function() {\n const menuA = document.getElementById(\"menuA\"); \n const menuB = document.getElementById(\"menuB\"); \n const menuC = document.getElementById(\"menuC\");\n\n \n for (let year = 1989; year <= 2014; year++) {\n menuC.innerHTML += `<option value=\"${year}\">${year}<\/option>`;\n }\n });\n\t\t\n\t\t document.getElementById(\"search-button\").addEventListener(\"click\", function() {\n afficherSelection();\n });\n\n document.getElementById(\"reset-button\").addEventListener(\"click\", function() {\n reinitialiserMenus();\n });\n\t\t\n\t\t\t\n\n function afficherSelection() {\n const selections = {\n MenuA: document.getElementById(\"menuA\").value, \n MenuB: document.getElementById(\"menuB\").value, \n MenuC: document.getElementById(\"menuC\").value,\t\t\n };\n\n \/\/ Afficher les crit\u00e8res s\u00e9lectionn\u00e9s en ignorant \"Tout\"\n const selectedCriteria = document.getElementById(\"selected-criteria\");\n \/\/ selectedCriteria.innerHTML = `\n \/\/ <p><strong>Menu A:<\/strong> ${selections.MenuA !== \"\" ? selections.MenuA : \"\"}<\/p> \n \/\/ <p><strong>Menu B:<\/strong> ${selections.MenuB !== \"\" ? selections.MenuB : \"\"}<\/p> \n \/\/ <p><strong>Menu C:<\/strong> ${selections.MenuC !== \"\" ? selections.MenuC : \"\"}<\/p>\n\t\t\n\t\t\n \/\/ `;\n \/\/ selectedCriteria.style.display = \"block\";\n}\n\n \nfunction reinitialiserMenus() {\n \/\/ R\u00e9initialiser les menus \u00e0 leurs valeurs par d\u00e9faut\n document.getElementById(\"menuA\").value = \"\";\n \n document.getElementById(\"menuB\").value = \"\";\n \n document.getElementById(\"menuC\").value = \"\";\n\t\t\t\n\t\t\t\n \/\/ R\u00e9initialiser l'affichage des crit\u00e8res s\u00e9lectionn\u00e9s\n const selectedCriteria = document.getElementById(\"selected-criteria\");\n selectedCriteria.style.display = \"none\";\n }\n\n\n\n\n\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<!DOCTYPE html>\n<html lang=\"fr\">\n<head>\n \n <meta charset=\"UTF-8\">\n \n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n \n <title>Galerie d’images filtr\u00e9e<\/title>\n <style>\n \/* Styles pour la galerie d'images *\/\n #gallery {\n display: grid; \/* Utilisation de grid pour une disposition en grille *\/\n grid-template-columns: repeat(2, 1fr); \/* Trois colonnes de largeur \u00e9gale *\/\n gap: 10px; \/* Espacement entre les \u00e9l\u00e9ments *\/\n justify-items: center; \/* Centre les \u00e9l\u00e9ments dans chaque cellule *\/\n }\n\n \/* Style pour les miniatures d'images *\/\n .thumbnail {\n width: 100%; \/* L'image prend toute la largeur de sa cellule *\/\n max-height: 150px; \/* Hauteur maximale pour les miniatures *\/\n object-fit: cover; \/* L'image couvre l'espace tout en conservant ses proportions *\/\n cursor: pointer; \/* Curseur en forme de main pour indiquer qu'il s'agit d'un lien *\/\n }\n\n \/* Styles pour la lightbox (fen\u00eatre d'image agrandie) *\/\n .lightbox {\n position: fixed; \/* Positionnement fixe \u00e0 l'\u00e9cran *\/\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.8); \/* Fond sombre avec transparence *\/\n display: none; \/* Cach\u00e9e par d\u00e9faut *\/\n justify-content: center; \/* Centre les \u00e9l\u00e9ments dans la lightbox *\/\n align-items: center; \/* Aligne les \u00e9l\u00e9ments verticalement *\/\n }\n\n \/* Contenu de la lightbox *\/\n .lightbox-content {\n display: flex;\n flex-direction: column; \/* Les \u00e9l\u00e9ments sont dispos\u00e9s verticalement *\/\n justify-content: center; \/* Centre le contenu verticalement *\/\n align-items: center;\n height: 100%; \/* Assure que l'\u00e9l\u00e9ment prend toute la hauteur de la fen\u00eatre *\/\n width: 100%; \/* Assure que l'\u00e9l\u00e9ment prend toute la largeur de la fen\u00eatre *\/\n\n\n \/*position: relative; Position relative pour les fl\u00e8ches de navigation *\/\n }\n\n \/* Style de l'image dans la lightbox *\/\n .lightbox img {\n max-width: 100%; \/* Limite la largeur de l'image \u00e0 80% de l'\u00e9cran *\/\n max-height: 100%; \/* Limite la hauteur \u00e0 80% de la hauteur de l'\u00e9cran *\/\n object-fit: contain; \/* L'image conserve ses proportions sans \u00eatre d\u00e9form\u00e9e *\/\n }\n\n \/* Style pour la l\u00e9gende sous l'image *\/\n .caption {\n color: white;\n text-align: center; \/* Centrage du texte *\/\n margin-top: 10px; \/* Espacement au-dessus de la l\u00e9gende *\/\n font-size: 18px;\n font-weight: bold; \/* Police en gras *\/\n }\n\n \/* Fl\u00e8ches de navigation dans la lightbox *\/\n .arrow {\n position: absolute; \/* Positionnement absolu pour placer les fl\u00e8ches sur l'image *\/\n top: 50%; \n transform: translateY(-50%); \/* Centrage vertical *\/\n font-size: 20px;\n color: white;\n background: rgba(0, 0, 0, 0.5); \/* Fond sombre semi-transparent *\/\n border: none;\n padding: 5px;\n cursor: pointer; \/* Curseur en forme de main *\/\n }\n\n .arrow-left { left: 10px; } \/* Position de la fl\u00e8che gauche *\/\n .arrow-right { right: 10px; } \/* Position de la fl\u00e8che droite *\/\n\n <\/style>\n<\/head>\n<body>\n\n \n <div id=\"motscles-affiches\">Mots-cl\u00e9s s\u00e9lectionn\u00e9s : <\/div>\n \n <div id=\"gallery\"><\/div>\n\n \n <div id=\"lightbox\" class=\"lightbox\">\n <div class=\"lightbox-content\">\n <button class=\"arrow arrow-left\">◀<\/button> \n <img decoding=\"async\" id=\"lightbox-image\" src=\"\" alt=\"\"> \n <button class=\"arrow arrow-right\">▶<\/button> \n <div id=\"lightbox-caption\" class=\"caption\"><\/div> \n <\/div>\n <\/div>\n\n <script>\n let imagesFiltrees = []; \/* Tableau pour stocker les images filtr\u00e9es *\/\n let currentIndex = 0; \/* Index de l'image actuellement affich\u00e9e dans la lightbox *\/\n\n \/\/ Fonction pour r\u00e9cup\u00e9rer les mots-cl\u00e9s s\u00e9lectionn\u00e9s dans les menus\nfunction getMotsCles() {\n const exclusions = [\"logo\",\"doc\"]; \/* Mots-cl\u00e9s \u00e0 exclure *\/\n const motsCles = []; \/\/ Initialisation unique du tableau des mots-cl\u00e9s\n\n \/\/ R\u00e9cup\u00e8re les valeurs des diff\u00e9rents menus de s\u00e9lection\n const selections = {\n MenuA: document.getElementById(\"menuA\")?.value || \"\", \n MenuB: document.getElementById(\"menuB\")?.value || \"\", \n MenuC: document.getElementById(\"menuC\")?.value || \"\",\n FixedKey: \"plaquerallye\" \/\/ Ajout du 4\u00e8me mot-cl\u00e9 fig\u00e9\n };\n\n \/\/ R\u00e9cup\u00e8re les mots-cl\u00e9s s\u00e9lectionn\u00e9s\n for (let key in selections) {\n if (selections[key] !== \"Tout\" && selections[key] !== \"\") {\n motsCles.push(selections[key].toLowerCase());\n }\n }\n\n console.log(motsCles); \/\/ V\u00e9rifie le contenu du tableau\n\n return { inclusions: motsCles, exclusions: exclusions };\n}\n\n\n \/\/ Fonction pour afficher la galerie avec les images filtr\u00e9es\n function afficherGalerie() {\n const { inclusions, exclusions } = getMotsCles(); \/\/ R\u00e9cup\u00e8re les mots-cl\u00e9s\n document.getElementById(\"motscles-affiches\").textContent = \"Mots-cl\u00e9s s\u00e9lectionn\u00e9s : \" + (inclusions.length ? inclusions.join(\", \") : \"Aucun\");\n\n if (!window.allImages) return; \/* V\u00e9rifie si les images sont charg\u00e9es *\/\n\n const gallery = document.getElementById(\"gallery\");\n gallery.innerHTML = \"\"; \/* Vide la galerie avant d'afficher les nouvelles images *\/\n\n \/\/ Filtre les images en fonction des mots-cl\u00e9s inclus et exclus\n imagesFiltrees = window.allImages.filter(image => {\n const nomImage = image.nom.toLowerCase(); \n return inclusions.every(mot => nomImage.includes(mot)) &&\n !exclusions.some(mot => nomImage.includes(mot));\n }).sort((a, b) => a.nom.localeCompare(b.nom)); \/* Trie les images par nom *\/\n\n if (imagesFiltrees.length === 0) {\n gallery.innerHTML = \"<p>Aucune image trouv\u00e9e.<\/p>\"; \/* Message en cas d'absence d'images *\/\n return;\n }\n\n \/\/ Affiche les miniatures des images filtr\u00e9es\n imagesFiltrees.forEach((image, index) => {\n const imgElement = document.createElement(\"img\");\n imgElement.src = image.src;\n imgElement.alt = image.nom;\n imgElement.classList.add(\"thumbnail\");\n imgElement.addEventListener(\"click\", () => afficherLightbox(index)); \/* Ouvre la lightbox au clic *\/\n gallery.appendChild(imgElement);\n });\n }\n\n \/\/ Fonction pour afficher la lightbox avec l'image s\u00e9lectionn\u00e9e\n function afficherLightbox(index) {\n const lightbox = document.getElementById(\"lightbox\");\n const lightboxImage = document.getElementById(\"lightbox-image\");\n const lightboxCaption = document.getElementById(\"lightbox-caption\");\n\n lightbox.style.display = \"flex\"; \/* Affiche la lightbox *\/\n lightboxImage.src = imagesFiltrees[index].src;\n lightboxCaption.textContent = imagesFiltrees[index].nom;\n\n currentIndex = index; \/* Met \u00e0 jour l'index de l'image actuelle *\/\n\n lightbox.addEventListener(\"click\", fermerLightbox); \/* Ferme la lightbox en cliquant dessus *\/\n document.addEventListener(\"keydown\", naviguerClavier); \/* Permet de naviguer avec les touches clavier *\/\n }\n\n \/\/ Fonction pour fermer la lightbox\n function fermerLightbox() {\n document.getElementById(\"lightbox\").style.display = \"none\"; \/* Masque la lightbox *\/\n document.removeEventListener(\"keydown\", naviguerClavier); \/* Supprime l'\u00e9v\u00e9nement clavier *\/\n }\n\n \/\/ Fonction pour afficher l'image suivante\n function showNextImage() {\n currentIndex = (currentIndex + 1) % imagesFiltrees.length;\n afficherLightbox(currentIndex); \/* Affiche l'image suivante *\/\n }\n\n \/\/ Fonction pour afficher l'image pr\u00e9c\u00e9dente\n function showPreviousImage() {\n currentIndex = (currentIndex - 1 + imagesFiltrees.length) % imagesFiltrees.length;\n afficherLightbox(currentIndex); \/* Affiche l'image pr\u00e9c\u00e9dente *\/\n }\n\n \/\/ Fonction pour naviguer avec le clavier (fl\u00e8ches et \u00e9chap)\n function naviguerClavier(event) {\n if (event.key === \"ArrowRight\") {\n showNextImage();\n } else if (event.key === \"ArrowLeft\") {\n showPreviousImage();\n } else if (event.key === \"Escape\") {\n fermerLightbox();\n }\n }\n\t\tlet touchStartX = 0;\nlet touchEndX = 0;\n\ndocument.getElementById(\"lightbox\").addEventListener(\"touchstart\", function(event) {\n touchStartX = event.changedTouches[0].screenX; \/\/ R\u00e9cup\u00e8re la position de d\u00e9part du toucher\n}, false);\n\ndocument.getElementById(\"lightbox\").addEventListener(\"touchend\", function(event) {\n touchEndX = event.changedTouches[0].screenX; \/\/ R\u00e9cup\u00e8re la position de fin du toucher\n handleSwipe();\n}, false);\n\nfunction handleSwipe() {\n let swipeDistance = touchEndX - touchStartX;\n \n if (swipeDistance > 50) { \/\/ D\u00e9tection d'un glissement vers la droite (image pr\u00e9c\u00e9dente)\n showPreviousImage();\n } else if (swipeDistance < -50) { \/\/ D\u00e9tection d'un glissement vers la gauche (image suivante)\n showNextImage();\n }\n}\n\n\n \/\/ Ajout des \u00e9v\u00e9nements aux fl\u00e8ches de navigation\n document.querySelector(\".arrow-left\").addEventListener(\"click\", function(event) {\n event.stopPropagation(); \/* Emp\u00eache la propagation du clic *\/\n showPreviousImage(); \/* Affiche l'image pr\u00e9c\u00e9dente *\/\n });\n\n document.querySelector(\".arrow-right\").addEventListener(\"click\", function(event) {\n event.stopPropagation(); \/* Emp\u00eache la propagation du clic *\/\n showNextImage(); \/* Affiche l'image suivante *\/\n });\n\n \/\/ Chargement des images depuis un fichier PHP et affichage de la galerie\n fetch('\/wp-content\/themes\/twenty-twenty-five-enfant\/get-images.php')\n .then(response => response.json())\n .then(data => {\n window.allImages = data; \/* Stocke les images dans une variable globale *\/\n \/*afficherGalerie(); Affiche la galerie *\/\n })\n .catch(error => console.error(\"Erreur lors du chargement des images :\", error));\n\n \/\/ \u00c9v\u00e9nement pour afficher la galerie lors d'un clic sur un bouton\n document.querySelector('button[type=\"button\"]').addEventListener(\"click\", afficherGalerie);\n <\/script>\n\n<\/body>\n<\/html>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Formulaire de recherche Rallye : ToutAlsaceArd\u00e8cheAutomneB\u00e9ss\u00e9 sur BrayB\u00e9thuneRonde C\u00e9venoleCharlemagneChata\u00eegneCoeur de FranceC\u00f4te du TarnIndreJeanne HachetteJeanne d’ArcKalt BecLimousinLorraineManx RallyMont Blancde l’OisePays du GierPicardiePorte NormandeRouergueSenonaisYonneSolognotSte BaumeThymeraisTouquetTernoisVal d’AgoutVal de LoireVal de JuineVall\u00e9e du CherVarRallye des VinsVin de M\u00e2conVend\u00e9e Num\u00e9ro Tout1114151617202128293132353637383940414243444547484950525354555658606162636566676971727374757678798081828384858688899092939498100101102103105109113114115116120123125131145154201 Ann\u00e9es Tout ✔ ✖ Galerie d’images filtr\u00e9e Mots-cl\u00e9s s\u00e9lectionn\u00e9s : ◀ ▶<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-5293","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/objectifrallye.fr\/index.php?rest_route=\/wp\/v2\/pages\/5293","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/objectifrallye.fr\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/objectifrallye.fr\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/objectifrallye.fr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/objectifrallye.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=5293"}],"version-history":[{"count":80,"href":"https:\/\/objectifrallye.fr\/index.php?rest_route=\/wp\/v2\/pages\/5293\/revisions"}],"predecessor-version":[{"id":6652,"href":"https:\/\/objectifrallye.fr\/index.php?rest_route=\/wp\/v2\/pages\/5293\/revisions\/6652"}],"wp:attachment":[{"href":"https:\/\/objectifrallye.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=5293"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":5293,"date":"2025-03-02T22:35:34","date_gmt":"2025-03-02T21:35:34","guid":{"rendered":"https:\/\/objectifrallye.fr\/?page_id=5293"},"modified":"2025-05-02T09:39:05","modified_gmt":"2025-05-02T07:39:05","slug":"plaques-rallye-2","status":"publish","type":"page","link":"https:\/\/objectifrallye.fr\/?page_id=5293","title":{"rendered":"Plaques Rallye"},"content":{"rendered":"\n\n\n\n \n \n Formulaire de recherche<\/title>\n <style>\n #search-form {\n display: flex;\/* Utilise un conteneur flexible pour les \u00e9l\u00e9ments enfants *\/\n flex-wrap: wrap;\/* Permet aux \u00e9l\u00e9ments enfants de passer \u00e0 la ligne si n\u00e9cessaire *\/\n justify-content: space-between; \/* Espace les \u00e9l\u00e9ments enfants uniform\u00e9ment avec de l'espace entre eux *\/\n max-width: 600px;\/* Limite la largeur maximale du formulaire \u00e0 600 pixels *\/\n }\n #search-form label,\n #search-form select {\n width: 48%;\/* D\u00e9finit la largeur des labels et des s\u00e9lecteurs \u00e0 48% pour qu'ils tiennent sur une ligne *\/\n }\n \n\t\t.btn {\n width: 50px;\n height: 50px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n font-size: 24px;\n color: white;\n margin-top: 10px; \/* Ajoute une marge en haut des boutons *\/\n }\n .btn-green {\n background-color: #4CAF50; \/* Vert *\/\nmargin-left: 40px; \/* Deplace le bouton vers la droite*\/\n }\n .btn-red {\n background-color: #F44336; \/* Rouge *\/\nmargin-right: 40px; \/* Deplace le bouton vers la gauche*\/\n }\n #selected-criteria {\n margin-top: 20px;\/* Ajoute une marge en haut pour espacer du contenu pr\u00e9c\u00e9dent *\/\n padding: 10px;\/* Ajoute du padding int\u00e9rieur pour espacer le contenu interne *\/\n border: 1px solid #ddd;\/* Ajoute une bordure grise claire autour de l'\u00e9l\u00e9ment *\/\n background-color: #f9f9f9;\/* D\u00e9finit une couleur de fond gris clair pour l'\u00e9l\u00e9ment *\/\n display: none;\n }\n\t\t\n\t\t\n <\/style>\n<\/head>\n<body>\n <form id=\"search-form\">\n\t\n <label for=\"menuA\">Rallye :<\/label>\n <select id=\"menuA\">\n\t\t\t<option value=\"\">Tout<\/option>\n <option value=\"PlaqueRallye-Alsace\">Alsace<\/option>\n <option value=\"PlaqueRallye-Ardeche\">Ard\u00e8che<\/option>\n\t\t\t<option value=\"PlaqueRallye-Automne\">Automne<\/option>\n <option value=\"PlaqueRallye-Besse-Sur-Bray\">B\u00e9ss\u00e9 sur Bray<\/option>\n\t\t\t<option value=\"PlaqueRallye-Bethune\">B\u00e9thune<\/option>\n\t\t\t<option value=\"PlaqueRallye-Cevennes\">Ronde C\u00e9venole<\/option>\n\t\t\t<option value=\"PlaqueRallye-Charlemagne\">Charlemagne<\/option>\n\t\t\t<option value=\"PlaqueRallye-Chataigne\">Chata\u00eegne<\/option>\n\t\t\t<option value=\"PlaqueRallye-Coeur-De-France\">Coeur de France<\/option>\n\t\t\t<option value=\"PlaqueRallye-Cotes-Du-Tarn\">C\u00f4te du Tarn<\/option>\n\t\t\t<option value=\"PlaqueRallye-Indre\">Indre<\/option>\n\t\t\t<option value=\"PlaqueRallye-Jeanne-Hachette\">Jeanne Hachette<\/option>\n\t<option value=\"PlaqueRallye-Jeanne-d-Arc\">Jeanne d’Arc<\/option>\n\t\t\t<option value=\"PlaqueRallye-KaltBec\">Kalt Bec<\/option>\n\t\t\t<option value=\"PlaqueRallye-Limousin\">Limousin<\/option>\n\t\t\t<option value=\"PlaqueRallye-Lorraine\">Lorraine<\/option>\n\t\t\t\n\t\t\t<option value=\"PlaqueRallye-Manx\">Manx Rally<\/option>\n\t\t\t<option value=\"PlaqueRallye-Mont-Blanc\">Mont Blanc<\/option>\n\t\t\t<option value=\"PlaqueRallye-Oise\">de l’Oise<\/option>\n\t\t\t<option value=\"PlaqueRallye-Pays-Du-Gier\">Pays du Gier<\/option>\n\t\t\t<option value=\"PlaqueRallye-Picardie\">Picardie<\/option>\n\t\t\t<option value=\"PlaqueRallye-Porte-Normande\">Porte Normande<\/option>\n\t\t\t<option value=\"PlaqueRallye-Rouergue\">Rouergue<\/option>\n\t\t\t<option value=\"PlaqueRallye-Yonne\">Senonais<\/option>\n\t\t\t<option value=\"PlaqueRallye-Yonne\">Yonne<\/option>\n\t\t\t<option value=\"PlaqueRallye-Solognot\">Solognot<\/option>\n\t\t\t<option value=\"PlaqueRallye-Ste-Baume\">Ste Baume<\/option>\n\t\t\t<option value=\"PlaqueRallye-Thymerais\">Thymerais<\/option>\n\t\t\t<option value=\"PlaqueRallye-Touquet\">Touquet<\/option>\n\t\t\t<option value=\"PlaqueRallye-Ternois\">Ternois<\/option>\n\t\t\t<option value=\"PlaqueRallye-Val-D-Agout\">Val d’Agout<\/option>\n\t\t\t<option value=\"PlaqueRallye-Val-De-Loire\">Val de Loire<\/option>\n\t\t\t<option value=\"PlaqueRallye-Val-de-juine\">Val de Juine<\/option>\n\t\t\t<option value=\"PlaqueRallye-Vallee-Du-Cher\">Vall\u00e9e du Cher<\/option>\n\t\t\t<option value=\"PlaqueRallye-Var\">Var<\/option>\n <option value=\"PlaqueRallye-Vins\">Rallye des Vins<\/option>\n\t\t\t<option value=\"PlaqueRallye-Macon\">Vin de M\u00e2con<\/option>\n\t\t\t<option value=\"PlaqueRallye-Vendee\">Vend\u00e9e<\/option>\n\t\t\t\t\t\t\n <\/select>\n\t\t\n\t\t\n\t\t\n <label for=\"menuB\">Num\u00e9ro<\/label>\n <select id=\"menuB\">\n <option value=\"\">Tout<\/option>\n<option value=\"N11\">11<\/option>\n<option value=\"N014\">14<\/option>\n<option value=\"N015\">15<\/option>\n<option value=\"N16\">16<\/option>\n<option value=\"N17\">17<\/option>\n<option value=\"N020\">20<\/option>\n<option value=\"N21\">21<\/option>\n<option value=\"N28\">28<\/option>\n<option value=\"N29\">29<\/option>\n<option value=\"N31\">31<\/option>\n<option value=\"N32\">32<\/option>\n<option value=\"N35\">35<\/option>\n<option value=\"N36\">36<\/option>\n<option value=\"N37\">37<\/option>\n<option value=\"N38\">38<\/option>\n<option value=\"N39\">39<\/option>\n<option value=\"N40\">40<\/option>\n<option value=\"N41\">41<\/option>\n<option value=\"N42\">42<\/option>\n<option value=\"N43\">43<\/option>\n<option value=\"N44\">44<\/option>\n<option value=\"N45\">45<\/option>\n<option value=\"N47\">47<\/option>\n<option value=\"N48\">48<\/option>\n<option value=\"N49\">49<\/option>\n<option value=\"N50\">50<\/option>\n<option value=\"N52\">52<\/option>\n<option value=\"N53\">53<\/option>\n<option value=\"N54\">54<\/option>\n<option value=\"N55\">55<\/option>\n<option value=\"N56\">56<\/option>\n<option value=\"N58\">58<\/option>\n<option value=\"N60\">60<\/option>\n<option value=\"N61\">61<\/option>\n<option value=\"N62\">62<\/option>\n<option value=\"N63\">63<\/option>\n<option value=\"N65\">65<\/option>\n<option value=\"N66\">66<\/option>\n<option value=\"N67\">67<\/option>\n<option value=\"N69\">69<\/option>\n<option value=\"N71\">71<\/option>\n<option value=\"N72\">72<\/option>\n<option value=\"N73\">73<\/option>\n<option value=\"N74\">74<\/option>\n<option value=\"N75\">75<\/option>\n<option value=\"N76\">76<\/option>\n<option value=\"N78\">78<\/option>\n<option value=\"N79\">79<\/option>\n<option value=\"N80\">80<\/option>\n<option value=\"N81\">81<\/option>\n<option value=\"N82\">82<\/option>\n<option value=\"N83\">83<\/option>\n<option value=\"N84\">84<\/option>\n<option value=\"N85\">85<\/option>\n<option value=\"N86\">86<\/option>\n<option value=\"N88\">88<\/option>\n<option value=\"N89\">89<\/option>\n<option value=\"N90\">90<\/option>\n<option value=\"N92\">92<\/option>\n<option value=\"N93\">93<\/option>\n<option value=\"N94\">94<\/option>\n<option value=\"N98\">98<\/option>\n<option value=\"N100\">100<\/option>\n<option value=\"N101\">101<\/option>\n<option value=\"N102\">102<\/option>\n<option value=\"N103\">103<\/option>\n<option value=\"N105\">105<\/option>\n<option value=\"N109\">109<\/option>\n<option value=\"N113\">113<\/option>\n<option value=\"N114\">114<\/option>\n<option value=\"N115\">115<\/option>\n<option value=\"N116\">116<\/option>\n<option value=\"N120\">120<\/option>\n<option value=\"N123\">123<\/option>\n<option value=\"N125\">125<\/option>\n<option value=\"N131\">131<\/option>\n<option value=\"N145\">145<\/option>\n<option value=\"N154\">154<\/option>\t\n<option value=\"N201\">201<\/option>\t\t\t\t\t\t\n <\/select>\n\t\t\n\t\t\n \n \n\t\t\n\t\t\n <label for=\"menuC\">Ann\u00e9es<\/label>\n <select id=\"menuC\">\n <option value=\"\">Tout<\/option>\n <\/select>\n\t\t\n\t\t\n\t\t\n <button type=\"button\" class=\"btn btn-green\" id=\"search-button\">✔<\/button> \n <button type=\"button\" class=\"btn btn-red\" id=\"reset-button\">✖<\/button> \n <\/form>\n\t\n <div id=\"selected-criteria\"><\/div>\n <script>\n document.addEventListener(\"DOMContentLoaded\", function() {\n const menuA = document.getElementById(\"menuA\"); \n const menuB = document.getElementById(\"menuB\"); \n const menuC = document.getElementById(\"menuC\");\n\n \n for (let year = 1989; year <= 2014; year++) {\n menuC.innerHTML += `<option value=\"${year}\">${year}<\/option>`;\n }\n });\n\t\t\n\t\t document.getElementById(\"search-button\").addEventListener(\"click\", function() {\n afficherSelection();\n });\n\n document.getElementById(\"reset-button\").addEventListener(\"click\", function() {\n reinitialiserMenus();\n });\n\t\t\n\t\t\t\n\n function afficherSelection() {\n const selections = {\n MenuA: document.getElementById(\"menuA\").value, \n MenuB: document.getElementById(\"menuB\").value, \n MenuC: document.getElementById(\"menuC\").value,\t\t\n };\n\n \/\/ Afficher les crit\u00e8res s\u00e9lectionn\u00e9s en ignorant \"Tout\"\n const selectedCriteria = document.getElementById(\"selected-criteria\");\n \/\/ selectedCriteria.innerHTML = `\n \/\/ <p><strong>Menu A:<\/strong> ${selections.MenuA !== \"\" ? selections.MenuA : \"\"}<\/p> \n \/\/ <p><strong>Menu B:<\/strong> ${selections.MenuB !== \"\" ? selections.MenuB : \"\"}<\/p> \n \/\/ <p><strong>Menu C:<\/strong> ${selections.MenuC !== \"\" ? selections.MenuC : \"\"}<\/p>\n\t\t\n\t\t\n \/\/ `;\n \/\/ selectedCriteria.style.display = \"block\";\n}\n\n \nfunction reinitialiserMenus() {\n \/\/ R\u00e9initialiser les menus \u00e0 leurs valeurs par d\u00e9faut\n document.getElementById(\"menuA\").value = \"\";\n \n document.getElementById(\"menuB\").value = \"\";\n \n document.getElementById(\"menuC\").value = \"\";\n\t\t\t\n\t\t\t\n \/\/ R\u00e9initialiser l'affichage des crit\u00e8res s\u00e9lectionn\u00e9s\n const selectedCriteria = document.getElementById(\"selected-criteria\");\n selectedCriteria.style.display = \"none\";\n }\n\n\n\n\n\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<!DOCTYPE html>\n<html lang=\"fr\">\n<head>\n \n <meta charset=\"UTF-8\">\n \n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n \n <title>Galerie d’images filtr\u00e9e<\/title>\n <style>\n \/* Styles pour la galerie d'images *\/\n #gallery {\n display: grid; \/* Utilisation de grid pour une disposition en grille *\/\n grid-template-columns: repeat(2, 1fr); \/* Trois colonnes de largeur \u00e9gale *\/\n gap: 10px; \/* Espacement entre les \u00e9l\u00e9ments *\/\n justify-items: center; \/* Centre les \u00e9l\u00e9ments dans chaque cellule *\/\n }\n\n \/* Style pour les miniatures d'images *\/\n .thumbnail {\n width: 100%; \/* L'image prend toute la largeur de sa cellule *\/\n max-height: 150px; \/* Hauteur maximale pour les miniatures *\/\n object-fit: cover; \/* L'image couvre l'espace tout en conservant ses proportions *\/\n cursor: pointer; \/* Curseur en forme de main pour indiquer qu'il s'agit d'un lien *\/\n }\n\n \/* Styles pour la lightbox (fen\u00eatre d'image agrandie) *\/\n .lightbox {\n position: fixed; \/* Positionnement fixe \u00e0 l'\u00e9cran *\/\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.8); \/* Fond sombre avec transparence *\/\n display: none; \/* Cach\u00e9e par d\u00e9faut *\/\n justify-content: center; \/* Centre les \u00e9l\u00e9ments dans la lightbox *\/\n align-items: center; \/* Aligne les \u00e9l\u00e9ments verticalement *\/\n }\n\n \/* Contenu de la lightbox *\/\n .lightbox-content {\n display: flex;\n flex-direction: column; \/* Les \u00e9l\u00e9ments sont dispos\u00e9s verticalement *\/\n justify-content: center; \/* Centre le contenu verticalement *\/\n align-items: center;\n height: 100%; \/* Assure que l'\u00e9l\u00e9ment prend toute la hauteur de la fen\u00eatre *\/\n width: 100%; \/* Assure que l'\u00e9l\u00e9ment prend toute la largeur de la fen\u00eatre *\/\n\n\n \/*position: relative; Position relative pour les fl\u00e8ches de navigation *\/\n }\n\n \/* Style de l'image dans la lightbox *\/\n .lightbox img {\n max-width: 100%; \/* Limite la largeur de l'image \u00e0 80% de l'\u00e9cran *\/\n max-height: 100%; \/* Limite la hauteur \u00e0 80% de la hauteur de l'\u00e9cran *\/\n object-fit: contain; \/* L'image conserve ses proportions sans \u00eatre d\u00e9form\u00e9e *\/\n }\n\n \/* Style pour la l\u00e9gende sous l'image *\/\n .caption {\n color: white;\n text-align: center; \/* Centrage du texte *\/\n margin-top: 10px; \/* Espacement au-dessus de la l\u00e9gende *\/\n font-size: 18px;\n font-weight: bold; \/* Police en gras *\/\n }\n\n \/* Fl\u00e8ches de navigation dans la lightbox *\/\n .arrow {\n position: absolute; \/* Positionnement absolu pour placer les fl\u00e8ches sur l'image *\/\n top: 50%; \n transform: translateY(-50%); \/* Centrage vertical *\/\n font-size: 20px;\n color: white;\n background: rgba(0, 0, 0, 0.5); \/* Fond sombre semi-transparent *\/\n border: none;\n padding: 5px;\n cursor: pointer; \/* Curseur en forme de main *\/\n }\n\n .arrow-left { left: 10px; } \/* Position de la fl\u00e8che gauche *\/\n .arrow-right { right: 10px; } \/* Position de la fl\u00e8che droite *\/\n\n <\/style>\n<\/head>\n<body>\n\n \n <div id=\"motscles-affiches\">Mots-cl\u00e9s s\u00e9lectionn\u00e9s : <\/div>\n \n <div id=\"gallery\"><\/div>\n\n \n <div id=\"lightbox\" class=\"lightbox\">\n <div class=\"lightbox-content\">\n <button class=\"arrow arrow-left\">◀<\/button> \n <img decoding=\"async\" id=\"lightbox-image\" src=\"\" alt=\"\"> \n <button class=\"arrow arrow-right\">▶<\/button> \n <div id=\"lightbox-caption\" class=\"caption\"><\/div> \n <\/div>\n <\/div>\n\n <script>\n let imagesFiltrees = []; \/* Tableau pour stocker les images filtr\u00e9es *\/\n let currentIndex = 0; \/* Index de l'image actuellement affich\u00e9e dans la lightbox *\/\n\n \/\/ Fonction pour r\u00e9cup\u00e9rer les mots-cl\u00e9s s\u00e9lectionn\u00e9s dans les menus\nfunction getMotsCles() {\n const exclusions = [\"logo\",\"doc\"]; \/* Mots-cl\u00e9s \u00e0 exclure *\/\n const motsCles = []; \/\/ Initialisation unique du tableau des mots-cl\u00e9s\n\n \/\/ R\u00e9cup\u00e8re les valeurs des diff\u00e9rents menus de s\u00e9lection\n const selections = {\n MenuA: document.getElementById(\"menuA\")?.value || \"\", \n MenuB: document.getElementById(\"menuB\")?.value || \"\", \n MenuC: document.getElementById(\"menuC\")?.value || \"\",\n FixedKey: \"plaquerallye\" \/\/ Ajout du 4\u00e8me mot-cl\u00e9 fig\u00e9\n };\n\n \/\/ R\u00e9cup\u00e8re les mots-cl\u00e9s s\u00e9lectionn\u00e9s\n for (let key in selections) {\n if (selections[key] !== \"Tout\" && selections[key] !== \"\") {\n motsCles.push(selections[key].toLowerCase());\n }\n }\n\n console.log(motsCles); \/\/ V\u00e9rifie le contenu du tableau\n\n return { inclusions: motsCles, exclusions: exclusions };\n}\n\n\n \/\/ Fonction pour afficher la galerie avec les images filtr\u00e9es\n function afficherGalerie() {\n const { inclusions, exclusions } = getMotsCles(); \/\/ R\u00e9cup\u00e8re les mots-cl\u00e9s\n document.getElementById(\"motscles-affiches\").textContent = \"Mots-cl\u00e9s s\u00e9lectionn\u00e9s : \" + (inclusions.length ? inclusions.join(\", \") : \"Aucun\");\n\n if (!window.allImages) return; \/* V\u00e9rifie si les images sont charg\u00e9es *\/\n\n const gallery = document.getElementById(\"gallery\");\n gallery.innerHTML = \"\"; \/* Vide la galerie avant d'afficher les nouvelles images *\/\n\n \/\/ Filtre les images en fonction des mots-cl\u00e9s inclus et exclus\n imagesFiltrees = window.allImages.filter(image => {\n const nomImage = image.nom.toLowerCase(); \n return inclusions.every(mot => nomImage.includes(mot)) &&\n !exclusions.some(mot => nomImage.includes(mot));\n }).sort((a, b) => a.nom.localeCompare(b.nom)); \/* Trie les images par nom *\/\n\n if (imagesFiltrees.length === 0) {\n gallery.innerHTML = \"<p>Aucune image trouv\u00e9e.<\/p>\"; \/* Message en cas d'absence d'images *\/\n return;\n }\n\n \/\/ Affiche les miniatures des images filtr\u00e9es\n imagesFiltrees.forEach((image, index) => {\n const imgElement = document.createElement(\"img\");\n imgElement.src = image.src;\n imgElement.alt = image.nom;\n imgElement.classList.add(\"thumbnail\");\n imgElement.addEventListener(\"click\", () => afficherLightbox(index)); \/* Ouvre la lightbox au clic *\/\n gallery.appendChild(imgElement);\n });\n }\n\n \/\/ Fonction pour afficher la lightbox avec l'image s\u00e9lectionn\u00e9e\n function afficherLightbox(index) {\n const lightbox = document.getElementById(\"lightbox\");\n const lightboxImage = document.getElementById(\"lightbox-image\");\n const lightboxCaption = document.getElementById(\"lightbox-caption\");\n\n lightbox.style.display = \"flex\"; \/* Affiche la lightbox *\/\n lightboxImage.src = imagesFiltrees[index].src;\n lightboxCaption.textContent = imagesFiltrees[index].nom;\n\n currentIndex = index; \/* Met \u00e0 jour l'index de l'image actuelle *\/\n\n lightbox.addEventListener(\"click\", fermerLightbox); \/* Ferme la lightbox en cliquant dessus *\/\n document.addEventListener(\"keydown\", naviguerClavier); \/* Permet de naviguer avec les touches clavier *\/\n }\n\n \/\/ Fonction pour fermer la lightbox\n function fermerLightbox() {\n document.getElementById(\"lightbox\").style.display = \"none\"; \/* Masque la lightbox *\/\n document.removeEventListener(\"keydown\", naviguerClavier); \/* Supprime l'\u00e9v\u00e9nement clavier *\/\n }\n\n \/\/ Fonction pour afficher l'image suivante\n function showNextImage() {\n currentIndex = (currentIndex + 1) % imagesFiltrees.length;\n afficherLightbox(currentIndex); \/* Affiche l'image suivante *\/\n }\n\n \/\/ Fonction pour afficher l'image pr\u00e9c\u00e9dente\n function showPreviousImage() {\n currentIndex = (currentIndex - 1 + imagesFiltrees.length) % imagesFiltrees.length;\n afficherLightbox(currentIndex); \/* Affiche l'image pr\u00e9c\u00e9dente *\/\n }\n\n \/\/ Fonction pour naviguer avec le clavier (fl\u00e8ches et \u00e9chap)\n function naviguerClavier(event) {\n if (event.key === \"ArrowRight\") {\n showNextImage();\n } else if (event.key === \"ArrowLeft\") {\n showPreviousImage();\n } else if (event.key === \"Escape\") {\n fermerLightbox();\n }\n }\n\t\tlet touchStartX = 0;\nlet touchEndX = 0;\n\ndocument.getElementById(\"lightbox\").addEventListener(\"touchstart\", function(event) {\n touchStartX = event.changedTouches[0].screenX; \/\/ R\u00e9cup\u00e8re la position de d\u00e9part du toucher\n}, false);\n\ndocument.getElementById(\"lightbox\").addEventListener(\"touchend\", function(event) {\n touchEndX = event.changedTouches[0].screenX; \/\/ R\u00e9cup\u00e8re la position de fin du toucher\n handleSwipe();\n}, false);\n\nfunction handleSwipe() {\n let swipeDistance = touchEndX - touchStartX;\n \n if (swipeDistance > 50) { \/\/ D\u00e9tection d'un glissement vers la droite (image pr\u00e9c\u00e9dente)\n showPreviousImage();\n } else if (swipeDistance < -50) { \/\/ D\u00e9tection d'un glissement vers la gauche (image suivante)\n showNextImage();\n }\n}\n\n\n \/\/ Ajout des \u00e9v\u00e9nements aux fl\u00e8ches de navigation\n document.querySelector(\".arrow-left\").addEventListener(\"click\", function(event) {\n event.stopPropagation(); \/* Emp\u00eache la propagation du clic *\/\n showPreviousImage(); \/* Affiche l'image pr\u00e9c\u00e9dente *\/\n });\n\n document.querySelector(\".arrow-right\").addEventListener(\"click\", function(event) {\n event.stopPropagation(); \/* Emp\u00eache la propagation du clic *\/\n showNextImage(); \/* Affiche l'image suivante *\/\n });\n\n \/\/ Chargement des images depuis un fichier PHP et affichage de la galerie\n fetch('\/wp-content\/themes\/twenty-twenty-five-enfant\/get-images.php')\n .then(response => response.json())\n .then(data => {\n window.allImages = data; \/* Stocke les images dans une variable globale *\/\n \/*afficherGalerie(); Affiche la galerie *\/\n })\n .catch(error => console.error(\"Erreur lors du chargement des images :\", error));\n\n \/\/ \u00c9v\u00e9nement pour afficher la galerie lors d'un clic sur un bouton\n document.querySelector('button[type=\"button\"]').addEventListener(\"click\", afficherGalerie);\n <\/script>\n\n<\/body>\n<\/html>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Formulaire de recherche Rallye : ToutAlsaceArd\u00e8cheAutomneB\u00e9ss\u00e9 sur BrayB\u00e9thuneRonde C\u00e9venoleCharlemagneChata\u00eegneCoeur de FranceC\u00f4te du TarnIndreJeanne HachetteJeanne d’ArcKalt BecLimousinLorraineManx RallyMont Blancde l’OisePays du GierPicardiePorte NormandeRouergueSenonaisYonneSolognotSte BaumeThymeraisTouquetTernoisVal d’AgoutVal de LoireVal de JuineVall\u00e9e du CherVarRallye des VinsVin de M\u00e2conVend\u00e9e Num\u00e9ro Tout1114151617202128293132353637383940414243444547484950525354555658606162636566676971727374757678798081828384858688899092939498100101102103105109113114115116120123125131145154201 Ann\u00e9es Tout ✔ ✖ Galerie d’images filtr\u00e9e Mots-cl\u00e9s s\u00e9lectionn\u00e9s : ◀ ▶<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-5293","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/objectifrallye.fr\/index.php?rest_route=\/wp\/v2\/pages\/5293","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/objectifrallye.fr\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/objectifrallye.fr\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/objectifrallye.fr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/objectifrallye.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=5293"}],"version-history":[{"count":80,"href":"https:\/\/objectifrallye.fr\/index.php?rest_route=\/wp\/v2\/pages\/5293\/revisions"}],"predecessor-version":[{"id":6652,"href":"https:\/\/objectifrallye.fr\/index.php?rest_route=\/wp\/v2\/pages\/5293\/revisions\/6652"}],"wp:attachment":[{"href":"https:\/\/objectifrallye.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=5293"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}