Plutôt que d'utiliser un plugin gonflé aux fonctionnalités que vous n'utiliserez jamais, ce didacticiel explique comment créer une lightbox très simple pour gérer les images. Parfait pour les galeries d'images, les portfolios et plus!

Étape 1: le balisage

Ouvrez votre éditeur de texte préféré (j'utilise Coda) et commençons avec notre balise HTML.

Remarque: Si vous ne fournissez pas un DOCTYPE correct et que la page s'affiche en mode quirks, la lightbox ne s'affichera pas correctement dans Internet Explorer..

      
 
Super Simple Lightbox
 
Notre démo lightbox super simple. Voici les liens d'image: 
 
  Image 1  
 
  Photo 2  
 
  Photo 3  
 
 
 
   

Remarque: Nous avons utilisé la classe lightbox_trigger sur chaque lien qui a une image que nous voulons montrer dans notre lightbox. Cela devient utile lorsque nous voulons cibler les éléments du script que nous écrirons.

Étape 2: le CSS

Appliquons quelques styles CSS de base à notre page. Pour cet exemple de base, nous allons placer tous nos CSS dans balises dans le section.

corps marge: 0; rembourrage: 0; fond: #efefef; text-align: center; / * utilisé pour centrer div dans IE * / #wrapper width: 600px; marge: 0 auto; / * centre le div horizontalement dans tous les navigateurs (sauf IE) * / background: #fff; text-align: left; / * réinitialise l'alignement du texte à partir de la balise body * / border: 1px solid #ccc; bordure supérieure: aucune; rembourrage: 25px; / * Ajoutons quelques styles CSS3, ceux-ci se dégraderont avec élégance dans les anciens navigateurs et IE * / border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; box-shadow: 0 0 5px #ccc; -moz-box-shadow: 0 0 5px #ccc; -webkit-box-shadow: 0 0 5px #ccc; 

Maintenant, nous avons une page simple mais élégante dans laquelle nous pouvons tester notre fenêtre lightbox.

Étape 3: Notes sur CSS dans Internet Explorer

Nous avons utilisé marge: 0 auto; pour centrer notre #wrapper div horizontalement sur la page. Cela fonctionne très bien pour tous les navigateurs sauf… le roulement de tambour… vous l'avez deviné, Internet Explorer. Pour résoudre ce problème, nous avons utilisé text-align: center; sur la balise body qui centre les divs enfants (dans notre cas, le #wrapper div) horizontalement sur la page.

Cependant, en utilisant text-align: center; sur la balise body alignera tout le texte dans les divs enfants. Pour résoudre ce problème, nous réinitialisons text-align: left; dans la division #wrapper pour restaurer l’alignement à gauche de tous les autres contenus enfants. Consultez communitymx.com si vous souhaitez en savoir plus sur ce problème d'IE..

Étape 4: HTML Lightbox

Voici à quoi ressemblera notre balise HTML lightbox. Cependant, ne l'insérez pas dans le balisage HTML. Nous ferons cela dynamiquement avec jQuery. Comprendre le balisage HTML lightbox nous permet de le styler avec CSS en conséquence.

 
Cliquez pour fermer
 
  
 

Remarque: Il n'y a pas de valeur pour l'image src car cela dépendra du lien sur lequel l'utilisateur clique. Par conséquent, nous utiliserons javascript pour insérer la valeur de manière dynamique ultérieurement..

Étape 5: Superposition de CSS Blackbox Lightbox

Continuons et insérons le CSS pour notre lightbox. En faisant cela maintenant, nos éléments de page s'afficheront correctement plus tard, lorsque nous insérerons dynamiquement notre code HTML..

Nous avons d’abord notre div #lightbox qui joue le rôle de superposition noire. Nous voulons que cela remplisse la fenêtre d'affichage de l'utilisateur, quelle que soit la résolution de l'écran..

#lightbox position: fixed; / * conserve la fenêtre de la lightbox dans la fenêtre courante * / top: 0; gauche: 0; largeur: 100%; hauteur: 100%; background: url (overlay.png) répéter; text-align: center; 

Le CSS est assez simple. Voici quelques faits saillants:

• position: fixe fait que notre incrustation apparaisse correctement dans la fenêtre courante, quelle que soit la position de l'utilisateur à l'écran (haut ou bas de la page). C’est là que l’utilisation du bon DOCTYPE est pratique. Si IE s'exécute en mode quirks en raison d'un DOCTYPE incorrect (ou d'aucun), notre incrustation ne s'affichera pas correctement..
• largeur: 100%; hauteur: 100%; Cela fait que notre #lightbox div, qui fait office de superposition noire, couvre toute la fenêtre, quelle que soit la résolution de l'écran de l'utilisateur final..
• background: url (overlay.png) répéter; Nous aurions pu utiliser la couleur RGBa pour rendre notre couleur de fond légèrement transparente. Cela aurait nécessité quelque chose comme arrière-plan: rgba (0,0,0, 0,7);. Cependant, comme cette propriété est relativement nouvelle, la transparence de la couleur d'arrière-plan ne fonctionnera pas dans IE (à moins d'appliquer certains hacks). Ainsi, au lieu d’utiliser des hacks CSS3 et IE, nous créons simplement un fichier PNG 1x1 pixel dans Photoshop avec un arrière-plan noir et fixons la transparence à environ 75%..

Étape 6: Instructions d'utilisation de la Lightbox CSS

Juste pour vous assurer que nos utilisateurs ne sont pas déroutés, nous allons ajouter du texte dans la superposition de la visionneuse en précisant qu'ils peuvent cliquer n'importe où pour faire disparaître la fenêtre de la visionneuse.

#lightbox p text-align: right; couleur: #fff; marge droite: 20px; taille de police: 12px; 

Étape 7: Image CSS Lightbox

Nous voulons maintenant styliser l'image qui apparaîtra dans la lightbox. Je vais simplement lui donner des effets CSS3. Ceux-ci n'apparaîtront évidemment pas dans les navigateurs IE et les anciens, mais cela se dégrade toujours avec élégance. Vous pouvez ajouter d'autres effets ici si vous le souhaitez, comme une bordure blanche autour de l'image..

#lightbox img box-shadow: 0 0 25px # 111; -webkit-box-shadow: 0 0 25px # 111; -moz-box-shadow: 0 0 25px # 111; largeur maximale: 940px; 

Remarque:Ajout d'un largeur maximale réduira les images haute résolution auxquelles nous pourrions être liés. Cela permet de s'assurer que toutes les images entrent dans la fenêtre.

Voici à quoi ressemblerait notre page si nous insérions notre code HTML lightbox dans le document (nous allons le faire avec javascript):

Image fournie par CSS Lounge Photostream sur Flickr

Étape 8: Détermination de la logique

Si l'utilisateur clique sur un lien vers une image, nous souhaitons afficher l'image dans une lightbox. Pour ce faire, nous voulons d’abord déterminer la logique de notre fonctionnalité:

• L'utilisateur clique sur le lien avec la classe lightbox_trigger
  • Empêcher le navigateur de suivre le lien par défaut
  • Voir si le boite à lumière div est déjà dans le document
    • S'il existe:
      • Trouver et l'existant img étiquette à l'intérieur du contenu div.
      • Remplacer l'image src valeur avec le href valeur du lien sur lequel vous avez cliqué.
    • Si ça n'existe pas:
      • insérer le balisage lightbox dans la page avec l'image src valeur définie sur le href valeur du lien sur lequel vous avez cliqué
• Autoriser n'importe quel clic sur la lightbox (lorsqu'elle est affichée) pour la faire disparaître

Étape 9: Javascript, y compris jQuery

Maintenant que nous avons notre balisage HTML, notre style CSS et notre logique javascript, il est temps d'explorer le code et de faire fonctionner nos fonctionnalités..

Premièrement, nous incluons la bibliothèque jQuery. J'aime bien l'ajouter juste avant la fermeture corps balise utilisant la version hébergée de jQuery.

Étape 10: Script personnalisé Javascript

Enveloppons notre code dans scénario balises et document.ready de jQuery

Nous allons inclure notre script personnalisé juste après l’inclusion de la bibliothèque jQuery. Nous configurons notre fonction jQuery à l’aide du signe dollar "$" dans le paramètre function. Ainsi, nous n’avons pas à écrire "jQuery" à chaque fois que nous souhaitons utiliser la fonctionnalité jQuery. Au lieu de cela, nous pouvons simplement utiliser "$".

Étape 11: Javascript lightbox_trigger Une fonction

Comme expliqué précédemment à l'étape 1, pour chaque image liée qui utilisera la lightbox, nous lui avons attribué une classe de lightbox_trigger. Dans notre script, nous créons une fonction qui déclenche à chaque fois un lien avec la classe. lightbox_trigger est cliqué.

$ ('. lightbox_trigger'). click (function (e) // Code faisant apparaître la lightbox);

Étape 12: Javascript dans la fonction

Tout d'abord, nous voulons empêcher l'action par défaut. Cela empêche le navigateur d’ouvrir l’image liée dans une nouvelle page. (Pour voir pourquoi nous utilisons preventDefault () cliquez ici

e.preventDefault ();

Ensuite, nous obtenons le href de l'image que nous afficherons dans la lightbox à partir du lien sur lequel vous avez cliqué

var image_href = $ (this) .attr ("href");

C’est là que notre logique prédéterminée entre vraiment en jeu. Comme nous insérons dynamiquement notre HTML lightbox, nous voulons d’abord vérifier s’il existe déjà dans le document. Donc, nous allons lancer une déclaration if / else.

Si

Si la boite à lumière div existe, nous remplacerons le img étiquette à l'intérieur du contenu div. Nous ferons également en sorte que le src la valeur de la balise image est définie pour correspondre à la href de tout lien a été cliqué.

if ($ ('# lightbox'). length> 0) // #lightbox existe // insère une balise img avec le lien cliqué href comme valeur src $ ('# contenu'). html (''); // montre la fenêtre lightbox - vous pouvez utiliser une transition ici si vous voulez, c'est-à-dire… show ('fast') $ ('# lightbox'). show (); 

Autre

Si notre boite à lumière div ne peut pas être trouvé dans le document, nous allons le créer et l'insérer. Cela ne fonctionnera que lors du premier clic sur un lien lightbox.

else // # la lightbox n’existe pas // crée le balisage HTML pour la fenêtre lightbox var lightbox = '
'+'
Cliquez pour fermer
'+'
'+ // insérer le lien cliqué href dans img src''+'
'+'
'; // insère le code HTML de la lightbox dans la page $ ('body'). append (lightbox); 

Étape 13: Javascript masque la fenêtre de la lightbox

Enfin, nous souhaitons masquer la fenêtre de la lightbox chaque fois que l'utilisateur clique dessus. Parce que le div boite à lumière est inséré après la construction du DOM (la page est déjà chargée), nous devons dire à jQuery que nous plaçons une nouvelle div dans notre page et surveiller les clics sur ces nouveaux éléments. Nous faisons cela en utilisant .live () plutôt que .click ()

$ ('# lightbox'). live ('click', function () $ ('# lightbox'). hide (););

Étape 14: Code final Javascript

Maintenant que nous avons examiné notre script lightbox, voici à quoi cela ressemble:

Produit final

Image fournie par CSS Lounge Photostream sur Flickr

C'est tout! Vous disposez maintenant d'une solution allégée lightbox pour l'affichage des images. J'espère que vous avez apprécié ce tutoriel et appris quelque chose de nouveau! Merci d'avoir lu.

Options Premium

Ce tutoriel vous a appris la méthode du bricolage, mais si vous préférez une solution clé en main, Envato Market propose de nombreux plug-ins lightbox. Voici une sélection des plus populaires:

1. Lightbox Evolution pour WordPress

Lightbox Evolution est un outil permettant d'afficher des images, du contenu HTML, des cartes et des vidéos dans un style «lightbox» flottant au-dessus d'une page Web. À l'aide de Lightbox Evolution, les auteurs de sites Web peuvent présenter un large assortiment de supports dans les principaux navigateurs sans que les utilisateurs ne soient éloignés de la page de liens. Il y a aussi une version jQuery.

Lightbox Evolution pour WordPress

2. iLightBox · Plug-in révolutionnaire Lightbox

iLightBox vous permet de créer facilement les plus belles fenêtres de superposition réactives à l'aide de la bibliothèque JavaScript jQuery. En combinant la prise en charge d'une large gamme de supports avec des skins magnifiques et une API conviviale, iLightBox vise à pousser le concept Lightbox aussi loin que possible..

iLightBox · Plug-in révolutionnaire Lightbox

3. PopupPress - Popups avec Slider & Lightbox pour WP

PopupPress est un plugin Wordpress qui vous permet de créer facilement d’élégantes fenêtres superposées. Ce plugin est destiné à insérer tout type de contenu dans un Popup de la manière la plus rapide et la plus simple sur n’importe quelle page de WordPress. Il a également un système statistique simple pour le nombre de vues des popups. 

PopupPress - Popups avec Slider & Lightbox pour WP