Slider Galerie Native Responsive

Ce plugin ajoute les styles alternatifs “Slider”, “Diaporama”, “Carrousel”, “Carrousel Paginé”, “Justifié”, “Carré”, “Masonry”,“Album”, et “Comparaison” au bloc Galerie natif de WordPress (Gutenberg).

Les styles Slider, Diaporama et Carrousel sont réalisés principalement en CSS, grâce aux nouvelles fonctionnalités CSS (scroll-snap, overflow, anchor-name).

Un léger script JavaScript est utilisé pour ajouter la navigation clavier avec les touches fléchées (← →), la gestion tactile et le défilement automatique des modes Diaporama et Carrousel, mais aussi gérer le style Comparaison.

Les styles Justifié, Carré, Masonry, et Album sont entièrement gérés en CSS et peuvent être utilisés directement dans l’éditeur de blocs et sur le Front End.

• Fonctionne avec le bloc Galerie natif de WordPress
• Styles “Slider”, “Diaporama”, “Caroussel”, “Carrousel Paginé”, “Justifié”, “Carré”, “Masonry”, “Album”, “Comparaison” sélectionnables dans le panneau Styles du bloc
• Slider: navigation manuelle avec boutons, marqueurs, clavier et défilement tactile
• Diaporama: défilement automatique avec transitions fluides en fondu toutes les 5 secondes, avec au survol pause automatique et navigation manuelle possible
• Carrousel: affichage de plusieurs images selon le nombre de colonnes défini dans la Galerie
• Carrousel: défilement automatique image par image toutes les 5 secondes avec bouclage circulaire et pause automatique au survol
• Carrousel: navigation manuelle avec les boutons natifs, les marqueurs de défilement, les touches fléchées du clavier et le défilement tactile
• Carrousel Paginé : même principe que le Carrousel, mais chaque défilement avance d’une page entière, le nombre d’images de chaque page correspond au nombre de colonnes défini dans les réglages du bloc Galerie
• Carrousel Paginé : un marqueur de défilement par page sur ordinateur, sur mobile défilement et marqueurs image par image comme le Carrousel classique
• Justifié : affichage des images ayant le même ratio sous forme de grille en conservant leur ratio
• Carré : affichage des images ayant le même ratio au format carré avec un ratio 1/1, façon Instagram
• Masonry : les images ayant des ratios différents sont affichées dans une grille et sont imbriquées les unes sous les autres de manière compacte, sans laisser de grands espaces vides.
• Album: Seule la 1ère image de la galerie est visible avec le titre de l’album, pour visualiser l’album utiliser la lightbox native de WordPress
• Comparaison: par exemple comparaison de deux images Avant & Aprés travaux
• Responsive: largeur automatique en fonction de la taille medium_large de la première image, pour les styles Slider et Diaporama
• Navigation avec boutons & marqueurs de défilement intégrés du navigateur
• Une fois que le slider ou le Carrousel à le focus, la navigation clavier est possible avec flèche gauche (←) et flèche droite (→)
• Animation fluide au défilement (fade-in / fade-out)

✅ Compatible avec thème classique & thème de blocs(FSE).

Utilisation

1. Dans l’éditeur de blocs (Gutenberg), insérez un bloc Galerie et ajoutez-y les images.
2. Dans le panneau Styles des paramètres du bloc, sélectionnez l’un des styles proposés:
   • Slider
   • Diaporama
   • Carrousel
   • Carrousel Paginé
   • Justifié
   • Carré
   • Masonry
   • Album
   • Comparaison
3. Visualisez le bloc Galerie en Front End avec le style sélectionné.

Les styles Slider, Diaporama, Carrousel et Carrousel Paginé sont principalement destinés à l’affichage en Front End.

Les styles Justifié, Carré, Masonry, Album sont visibles dans l’éditeur de blocs ainsi que sur le Front End.

Pour le style Album:

• A partir de la barre d’outils du bloc galerie, appliquer aux images le lien « Agrandir au clic ».
• Définissez le titre de l’album avec la légende de la galerie.
• Visualiser en Front End les images de l’album avec la visionneuse native de WordPress.

Pour le style Comparaison:

• Pour dimensionner le bloc galerie vous pouvez par exemple l’incorporer dans un bloc colonnes.
• Veiller dans les paramètres du bloc galerie a ne mettre aucun lien pour les images.
• Les intitulés « AVANT » & « APRÉS » sont renseignés avec la légende de l’image.

Pour les styles Carrousel:

• Si par exemple vous avez sélectionné trois colonnes aux paramètres du bloc galerie, et si le carrousel affiche un peu plus que trois images,alors augmenter l’espacement horizontal des blocs.

Lightbox Fancybox

L’extension utilise la fenêtre contextuelle Fancybox pour apporter une lightbox aux images & galeries WordPress.

La lightbox est désactivée par défaut. Pour l’activer et la paramétrer, rendez-vous dans le menu SGNR Réglages du tableau de bord WordPress, puis cochez Activer la lightbox.

Réglages disponibles

• Thème de la lightbox : sombre ou clair
• Mode plein écran à l’ouverture de la lightbox
• Type de vignettes : classique, moderne ou scrollable
• Masquer les vignettes de la lightbox sur mobile
• Taille des images par rapport à la lightbox : adapter, couvrir ou taille originale
• Valeur maximale du zoom de l’image, en % (entre 0 et 400)
• Durée par diapositive du diaporama, en secondes (entre 3 et 10)

Fonctionnement

• La lightbox s’applique aux images et aux galeries des articles et des pages.
• Pour chaque galerie: la navigation (flèches, vignettes, clavier) se fait entre les images de la même galerie.
• La légende de l’image, si elle existe, est affichée dans la lightbox.
• Les liens des images doivent pointer vers un fichier image (jpg, jpeg, png, gif, webp, svg, avif). Les autres liens ne sont pas modifiés.
• Raccourcis clavier : touches + et – pour zoomer, flèches ← → pour naviguer, Échap pour fermer.
• Un double-clic sur l’image zoome au maximum.
• Un diaporama est lancé depuis le bouton lecture de la barre d’outils de la lightbox.
• Sur mobile, les boutons plein écran et vignettes sont masqués pour garantir un affichage correct.

Configuration requise pour les images

• Assurez-vous de lier l’image au fichier média et non à la page de pièce jointe.
• Pour les galeries, liez les images aux fichiers médias et non aux pages de fichiers joints.

Thème OceanWP

Veuillez désactiver la lightbox par défaut du thème :

Menu Apparence / Personnaliser / Options générales / Performance / Visionneuse

Autres thèmes

Si votre thème ou une autre extension propose déjà une lightbox, désactivez-la pour éviter tout conflit.

Remarques

• La bibliothèque Fancybox est incluse dans l’extension et chargée en local : aucune requête vers un service externe n’est effectuée. Elle est chargée uniquement sur les articles et les pages qui contiennent une galerie ou une image.

Limitation connue

• En raison du fonctionnement interne de la visionneuse native de WordPress,
  le style « Carré » n’est pas compatible avec cette visionneuse.
  Vous pouvez utiliser la lightbox fournit par l’extension.

• le style « Album » est compatible avec la visionneuse native de WordPress,
  à condition que toutes les images de la galerie aient le même ratio.

Démo

Découvrez le plugin en action sur notre Site De Démos

Traductions

◆ Anglais
◆ Français

Découvrez nos autres plugins

◆ Easy Custom Event Tickets
◆ Editor Custom Color Palette
◆ Filter Bar Custom Post Type
◆ Rouergue Creation Top Notice Bar
◆ Rouergue Creation Events Sidebar
◆ Rouergue Creation Carousel Style Query Loop
◆ Rouergue Creation Slider Native Cover Block