Lightbox est une bibliothèque libre de JavaScript open source que vous pouvez utiliser pour présenter une galerie d’images sur votre page Web d’une manière visuellement attrayante. Lorsqu’un utilisateur clique sur l’un de vos images miniatures, Lightbox sera l’arrière-plan de la page en fondu et zoom l’image pour remplir la fenêtre du navigateur. Le créateur de Lightbox a permis d’ajouter cette fonctionnalité à votre site Web avec seulement quelques modifications mineures à votre code HTML.
Difficulté : Modérément facile
Instructions
Vous aurez besoin de choses
- Navigateur Web
- HTML page (s)
- Images
- Ouvrez votre navigateur web et accédez à la page d’accueil de Lightbox (voir ressources). Télécharger la dernière version de la bibliothèque.
- Extrayez le fichier ZIP que vous avez téléchargé. Il contient un exemple de fichier HTML et trois dossiers : « css », qui contient des feuilles de style utilisées par Lightbox; »images »qui contient des images utilisés par la bibliothèque ; et « js », qui contient le code source de Lightbox ainsi que les bibliothèques Prototype et Scriptaculous qui sont requis par Lightbox.
- Copiez le « css », « images » et « js » dossiers vers un emplacement qui est accessible à partir de votre page Web. Les étapes restantes assumera que vous les avez placé dans le même répertoire que votre fichier HTML ; Si vous les mettez dans un emplacement différent, vous devrez adapter les chemins dans ces étapes en conséquence.
- Ouvrez le fichier HTML qui utilisera Lightbox dans votre éditeur de texte préféré.
- Si vous n’utilisez pas déjà les bibliothèques Prototype et Scriptaculous sur votre page Web, ajoutez les deux lignes suivantes dans la section « » du fichier HTML :
Vous pouvez sauter cette étape si vous utilisez déjà Prototype et Scriptaculous.
- Ajoutez les deux lignes suivantes dans la section « » après les lignes qui se chargent de Prototype et Scriptaculous :
- Ajoutez l’effet Lightbox à tout lien de l’image en ajoutant la rel = « lightbox » attribut du lien du « » tag et de fournir un titre facultatif qui sera affiché dans la zone de fenêtres publicitaires intempestives. Par exemple, si vous avez un lien de la forme suivante :
Réécrire le lien comme suit :
Conseils & avertissements
Images peuvent également être regroupés, permettant à l’utilisateur de naviguer rapidement vers l’image précédente ou suivante dans une galerie sans fermer et rouvrir la fenêtre Lightbox. Pour associer une image à un groupe, mettez le nom du groupe entre crochets après « lightbox » dans l’attribut « rel ». Par exemple :
