Lorsque vous créez votre propre thème WordPress, vous devez prendre en compte un certain nombre d'éléments. L'un de ces éléments de page est une galerie d'images dynamiques, utilisant soit une lightbox, soit un type de panneau coulissant. Ces deux interfaces utilisateur s'intègrent parfaitement au contenu d'un article. Puisqu'ils peuvent tous deux travailler sur des sites Web typiques, il est agréable d'avoir le code prêt à être utilisé dans n'importe quel autre thème de blog.
Pour ce tutoriel, je souhaite utiliser l’effet lightbox avec un plugin appelé jQuery lightBox. C’est très facile à configurer et à personnaliser sur votre propre site Web. Certes, il y a quelques corrections fastidieuses dans le CSS, mais globalement, le plugin fonctionne parfaitement. Il existe même d'autres paramètres pour lesquels vous pouvez spécifier des propriétés telles que la vitesse d'animation ou l'opacité de l'arrière-plan.
Live Demo - Télécharger le code source
Commencer
La première étape consiste à télécharger une copie du code source principal à partir de la page d'accueil du plugin. Vous pouvez également trouver ces fichiers dans mon code source de démonstration ci-dessus. Il existe un fichier CSS personnalisé qui formate les différents éléments de la lightbox. Sinon, l'en-tête du document ne contient pas d'autres dépendances supplémentaires.
Pour cet exemple, j'ai téléchargé une copie locale de la version la plus récente de jQuery. C’est la seule condition pour que ce plugin lightBox fonctionne correctement. Un autre point important à noter est le balisage HTML sur la page. Nous devons formater la galerie d'images à l'aide de vignettes liées à l'image de résolution supérieure.
La syntaxe est assez simple et j'ai copié un exemple ci-dessous. Cela devrait aller n'importe où dans le corps de votre page et vous pouvez théoriquement utiliser n'importe quel élément pour contenir les vignettes. Je suis allé avec une liste non ordonnée parce que le schéma a du sens dans une liste de tirs aléatoires de Dribbble.
Le texte alt attaché à chaque image ne s'affichera que lorsque la vignette n'aura pas encore été chargée. Mais l'élément title se comporte à la fois comme une info-bulle et une légende pour l'image. C’est une fonctionnalité vraiment intéressante si vous aimez l’idée des galeries Lightbox légendées. Et vous pouvez définir manuellement le texte de la légende pour qu'il soit différent du titre à l'aide des paramètres de fonction.
Personnaliser le CSS
À l'intérieur du dossier jquery.lightbox-0.5.css nous pouvons trouver un certain nombre de sélecteurs importants pour l'interface de la visionneuse. Vous n'avez pas besoin de modifier ce code CSS pour que le plugin fonctionne. Mais je pense que cela vaut la peine de comprendre ce que chaque identifiant et chaque classe vont cibler sur la page. De cette façon, vous avez la possibilité d’ajouter de nouveaux effets CSS3 ou de redimensionner les icônes selon vos besoins.
Mon code CSS typique est inclus dans la feuille de style du document principal. Remarquez tout en haut que j’ai configuré un autre sélecteur pour le # lightbox-container-image-data-box élément. Cette div contient en fait les données de légende pour l'image qui effectue une animation déroulante. j'utilise boîte à bordure pour tous mes éléments de page et cela peut bousiller la légende où elle ne s'affichera pas correctement.
Mais une solution rapide peut être appliquée en ciblant simplement ce conteneur et en réinitialisant contenu-box. Il est alors beaucoup plus facile de forcer cet élément de la lightbox à se comporter normalement, tout en conservant la mise en page adaptée en utilisant les marges et le remplissage de la bordure. En dehors de cette solution rapide, je n’ai rencontré aucun autre problème avec le plugin CSS.
Comment exécuter lightBox ()
Le dernier segment que nous devons examiner appelle ce plugin avec sa fonction JavaScript. Un seul sélecteur requis doit cibler tous les éléments utilisant cette technique de lightbox. Mon exemple est attaché à tous les liens d’ancrage dans le #thumbnails élément. Vous pourriez être encore plus spécifique et ne cibler que des liens avec certains noms de classe.
Notez que la fonction elle-même ne nécessite aucun paramètre supplémentaire. C'est le comportement par défaut de base absolu du plugin. Et comme il est si facile à installer, vous pouvez facilement générer plusieurs galeries distinctes, toutes fonctionnant sur la même page! Si vous avez plus de temps, examinez les paramètres supplémentaires du plug-in pour avoir une idée de ce qui est possible.
Vous pouvez personnaliser le style des boutons, l'opacité de l'arrière-plan, le texte de la légende de l'image et bien plus encore. Vous trouverez ci-dessous un exemple de fragment du site Web qui utilise seulement quelques-uns de ces paramètres. Jouez et voyez ce que vous pouvez construire.
Live Demo - Télécharger le code source
Dernières pensées
J'espère que ce tutoriel sera utile à certains développeurs. J'aime trouver des galeries d'images dans les articles de blog, car cela peut être une source d'inspiration fantastique. Mais cela demande aussi beaucoup de travail et d’efforts.Vous devez avoir un plan dès le début sur la manière dont vous voulez construire une interface utilisateur propre et équilibrée. N'hésitez pas à télécharger une copie du code source et à voir si vous pouvez reconcevoir ce plugin pour l'intégrer à votre propre blog ou à votre mise en page de site Web.