Les lightbox sont une technique JavaScript utilisée pour afficher du contenu dans des boîtes. Je suis sûr que vous les avez déjà vus utilisés sur des sites Web plusieurs fois auparavant. Dans le monde de WordPress, ils sont généralement associés aux galeries. Lorsqu’un utilisateur clique sur une image de la galerie, l’image apparaît dans une boîte contextuelle et le reste de la page s’assombrit pour que l’image soit mise en évidence.
Les boîtes lumineuses sont également utilisées sur d’autres types de sites Web. Par exemple, de nombreuses boutiques en ligne utilisent la technique Lightbox pour mettre en valeur les images des produits.
Les Lightbox sont un moyen convivial pour les visiteurs de parcourir le contenu. Avec les galeries d’images de base, telles que la galerie WordPress intégrée à WordPress, l’utilisateur doit cliquer sur l’image pour voir l’image dans son intégralité, puis cliquer sur le bouton Précédent pour revenir à la galerie, puis cliquer sur l’image suivante. Les Lightbox vous permettent de parcourir le contenu en cliquant simplement à gauche et à droite sur la galerie.
Aujourd’hui, je voudrais parler d’un excellent plugin lightbox premium pour WordPress appelé Foobox. Le plugin vous permet d’utiliser des lightbox pour les images, les vidéos, le HTML et plus encore.
Obtenez Foobox
De belles boîtes lumineuses réactives
Foobox est l’un des plugins lightbox les plus avancés. Il s’agit de nombreuses fonctionnalités utiles et d’un design réactif qui a fière allure sur les ordinateurs de bureau, les tablettes et les téléphones mobiles. Les utilisateurs peuvent également glisser d’un côté à l’autre pour naviguer dans votre contenu.
Chaque image téléchargée se voit attribuer une URL unique. Cela permet aux visiteurs de partager vos images sur des services de médias sociaux populaires tels que Facebook et Twitter.
Le plugin prend en charge nativement la galerie WordPress intégrée. Il prend également en charge les plugins WordPress populaires Justified Image Grid, Jetpack et la galerie NextGEN.
Comme je l’ai noté précédemment, Foobox ne gère pas seulement les images. Le plugin peut également être utilisé avec des vidéos et du HTML. Par exemple, vous pouvez l’utiliser pour afficher des vidéos YouTube plus en évidence ou afficher votre boîte d’inscription à la newsletter.
Il vous permet également d’afficher du contenu à l’aide d’iframes. Vous pouvez utiliser cette fonctionnalité pour afficher un site Web complet dans la zone de la visionneuse, ce qui est utile si vous ne souhaitez pas que les visiteurs quittent la page.
Pour mieux comprendre ce que Foobox peut faire, examinons de plus près la zone de paramètres de Foobox.
Configuration de Foobox
Votre licence Foobox est requise pour obtenir les mises à jour automatiques des plugins et pour activer l’onglet support. Le plugin adhère à la licence publique générale, donc la licence n’est pas requise pour que le plugin fonctionne.
L’onglet Paramètres généraux traite des types d’images utilisés avec Foobox. Il peut être activé pour les galeries WordPress, les images de pièces jointes et les images avec légendes. Vous pouvez également activer Foobox automatiquement pour tous les types d’images.
Deux skins sont inclus avec le plugin : Rounded et Metro. Il est également livré avec cinq schémas de couleurs, douze jeux d’icônes et onze icônes pour le chargement.
Les légendes ne sont pas quelque chose à quoi je prête normalement beaucoup d’attention ; cependant Foobox propose de nombreuses options de personnalisation pour les légendes. Vous pouvez choisir si les légendes sont affichées sur les images, les vidéos, le HTML et les iframes.
Le titre de la légende et la description peuvent également être remplacés par le titre de l’ancre ou le titre alternatif de l’image. Il existe également une fonctionnalité qui prend le nom du fichier image et le convertit en quelque chose de lisible. Par exemple, une image téléchargée en tant que « day-at-beach-456 » serait renommée « Day at Beach ».
La page des paramètres des fonctions propose une grande variété d’options telles que le masquage des barres de défilement et des boutons de navigation. Vous pouvez également désactiver l’URL unique que Foobox utilise pour les images.
Les autres options incluent un bouton plein écran, le préchargement des images pour améliorer les vitesses de navigation, la protection des images, un compteur de statistiques et un diaporama.
Les icônes de partage de réseaux sociaux peuvent être affichées sur n’importe quel type de lightbox. Les icônes peuvent être placées au-dessus ou au-dessous de la zone de contenu. Ils peuvent également être alignés à gauche, au centre ou à droite.
Dix services de médias sociaux peuvent être affichés aux utilisateurs. Vous pouvez également afficher un lien e-mail et une option pour télécharger l’image. Chaque service de médias sociaux doit être activé pour que l’icône sociale correspondante s’affiche.
Des options de configuration supplémentaires sont disponibles pour Le protocole Open Graph, Facebook et Twitter.
Une fois que vous avez activé les réseaux de médias sociaux que vous avez choisis, la barre de partage s’affichera dans votre lightbox. Cela ressemblera à quelque chose comme ceci :
D’autres fonctions diverses sont placées sous l’onglet avancé. Il existe une option pour intégrer votre URL d’affiliation Foobox à la lightbox et gagner de l’argent supplémentaire.
D’autres options incluent la désactivation d’autres visionneuses, le chargement de fichiers Javascript dans le pied de page et l’activation du mode de débogage.
Foobox vous permet également de modifier vos lightbox en ajoutant du CSS et du Javascript personnalisés. Ceci est principalement destiné aux développeurs qui souhaitent étendre les fonctionnalités de Foobox.
Vous n’avez pas besoin de modifier vos publications et vos pages pour voir à quoi ressemblent vos lightbox. Après avoir modifié vos paramètres, tels que votre palette de couleurs ou vos options de partage sur les réseaux sociaux, accédez simplement à l’onglet démo et voyez à quoi ressemble votre lightbox avec une variété d’images, de vidéos et d’iframes.
Aperçu
Foobox est l’un des meilleurs moyens d’afficher du contenu sur votre site Web à l’aide de lightbox. Le plugin coûte 27 $ pour une licence personnelle, 67 $ pour une licence multisite et 97 $ pour une licence commerciale.
Il est important de noter que Foobox est un plugin qui améliore les fonctionnalités de votre galerie actuelle, plutôt que de la remplacer. Par conséquent, il lui manque les fonctionnalités que vous verriez dans les plugins de galerie tels que Envira Gallery.
Avec sa prise en charge des vidéos, du HTML et des iframes, Foobox est un plugin polyvalent qui peut être utilisé de différentes manières. Veuillez visiter le site officiel de Foobox pour en savoir plus sur le plugin 🙂
Si vous avez apprécié cet article, je vous encourage à vous abonner à Themelocal pour les futures mises à jour via RSS, Facebook, Twitter ou Google+. Vous pouvez également recevoir des mises à jour directement dans votre boîte de réception gratuitement en vous inscrivant à notre newsletter hebdomadaire.
Comme toujours, si vous avez des questions concernant le plugin, veuillez laisser un commentaire et je ferai de mon mieux pour y répondre.
Kévin