Les lightboxes sont une technique JavaScript utilisée pour afficher le contenu dans des boîtes. Je suis sûr que vous les avez déjà vus utilisés sur des sites Web à plusieurs reprises. Dans le monde de WordPress, ils sont couramment 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 surbrillance.

Les lightbox 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 de produits.

Les lightboxes sont un outil 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 lightboxes vous permettent de parcourir le contenu en cliquant simplement à gauche et à droite sur la galerie.

Aujourd’hui, j’aimerais parler d’un excellent plugin de lightbox premium pour WordPress appelé Foobox. Le plugin vous permet d’utiliser des lightbox pour des images, des vidéos, du HTML et plus encore.

Obtenez Foobox

Belles lightboxes réactives

Foobox est l’un des plugins de lightbox les plus avancés. Ce sont de nombreuses fonctionnalités utiles et un design réactif qui ont 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 reçoit une URL unique. Cela permet aux visiteurs de partager vos images sur les services de médias sociaux populaires tels que Facebook et Twitter.

Le plugin a un support natif pour la galerie WordPress intégrée. Il prend également en charge les plugins WordPress populaires Justified Image Grid, Jetpack et NextGEN Gallery.

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 de manière plus visible ou pour afficher votre boîte d’inscription à la newsletter.

Il vous permet également d’afficher du contenu à l’aide d’iframes. Vous pouvez utiliser cette fonction pour afficher un site Web complet dans la zone Lightbox, ce qui est utile si vous ne souhaitez pas que les visiteurs quittent la page.

Exemple Foobox Iframe

Pour mieux comprendre ce que Foobox peut faire, examinons de plus près la zone des paramètres de Foobox.

Configurer Foobox

Votre licence Foobox est nécessaire pour obtenir les mises à jour automatiques du plugin et pour activer l’onglet support. Le plugin adhère à la licence publique générale, donc la licence n’est pas nécessaire pour que le plugin fonctionne.

L’onglet des 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 des légendes. Vous pouvez également activer Foobox automatiquement pour tous les types d’images.

Paramètres généraux Foobox

Deux skins sont inclus avec le plugin: Rounded et Metro. Il est également livré avec cinq jeux de couleurs, douze jeux d’icônes et onze icônes pour le chargement.

Paramètres d'aspect et de convivialité Foobox

Les sous-titres ne sont pas quelque chose auquel je prête normalement beaucoup d’attention; cependant Foobox offre de nombreuses options de personnalisation pour les légendes. Vous pouvez choisir si les sous-titres sont affichés sur les images, les vidéos, le HTML et les iframes.

Le titre et la description de la légende peuvent également être remplacés par le titre d’ancrage 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 sous le nom «day-at-beach-456» serait renommée «Day at Beach».

Paramètres d'aspect et de convivialité Foobox

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 utilisée par Foobox pour les images.

Paramètres des fonctions Foobox

Les autres options incluent un bouton plein écran, le préchargement des images pour améliorer la vitesse de navigation, la protection des images, un compteur de statistiques et un diaporama.

Paramètres des fonctions Foobox

Les icônes de partage de médias sociaux peuvent être affichées sur n’importe quel type de lightbox. Les icônes peuvent être placées au-dessus ou en dessous de la zone de contenu. Ils peuvent également être alignés à gauche, au centre ou à droite.

Paramètres des icônes sociales Foobox

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 soit affichée.

Paramètres des icônes sociales Foobox

Des options de configuration supplémentaires sont disponibles pour Le protocole Open Graph, Facebook et Twitter.

Paramètres des icônes sociales Foobox

Une fois que vous avez activé les réseaux sociaux de votre choix, la barre de partage s’affiche dans votre lightbox. Cela ressemblera à quelque chose comme ceci:

Exemple d'icônes sociales Foobox

D’autres fonctions diverses sont placées sous l’onglet avancé. Il existe une option pour intégrer votre URL d’affiliation Foobox avec la lightbox et gagner de l’argent supplémentaire.

D’autres options incluent la désactivation d’autres lightbox, le chargement de fichiers Javascript dans le pied de page et l’activation du mode de débogage.

Paramètres avancés Foobox

Foobox vous permet également de modifier vos lightboxes en ajoutant du CSS et du Javascript personnalisés. Ceci est principalement destiné aux développeurs qui souhaitent étendre les fonctionnalités de Foobox.

Paramètres Foobox JS et CSS

Vous n’êtes pas obligé de modifier vos publications et vos pages pour voir à quoi ressemblent vos lightbox. Après avoir modifié vos paramètres, tels que votre jeu 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.

Démo Foobox

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 la fonctionnalité de votre galerie actuelle, plutôt que de la remplacer. Par conséquent, il 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 gratuitement des mises à jour directement dans votre boîte de réception en vous inscrivant à notre newsletter hebdomadaire.

Comme toujours, si vous avez des questions concernant le plugin, laissez un commentaire et je ferai de mon mieux pour y répondre.

Kevin

Share: