Explication détaillée de l'utilisation de lightbox.js

lightbox.js est un plug-in JavaScript couramment utilisé, utilisé pour afficher l'effet de navigation d'images, de vidéos ou de contenu Web sur des pages Web. Il offre aux téléspectateurs un moyen simple mais élégant de cliquer sur une vignette ou un bouton pour ouvrir un modal affichant une image ou un média en taille réelle. Dans cet article, nous présenterons en détail l’utilisation de lightbox.js.

Téléchargez et présentez lightbox.js

Pour utiliser lightbox.js, vous devez d'abord télécharger la dernière version du plug-in depuis le site officiel. Une fois le téléchargement terminé, copiez le fichier du plugin dans le dossier JavaScript de votre projet. Ensuite, utilisez la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a pour introduire le fichier lightbox.js dans la section head ou script du document HTML.

<script src="path-to-js/lightbox.js"></script>

Créer des vignettes d'images

Pour utiliser lightbox.js, vous devez créer des vignettes d'images dans votre document HTML. En règle générale, les miniatures d'images sont enveloppées à l'aide d'une balise 3499910bf9dac5ae3c52d5ede7383485 et leur attribut href pointe vers l'URL de l'image en taille réelle. De plus, vous devez également ajouter un attribut de données pour spécifier le déclencheur de lightbox.js.

<a href="path-to-images/image.jpg" data-lightbox="gallery"> <!-- 图像缩略图 -->
  <img src="path-to-thumbnails/thumbnail.jpg" alt="Thumbnail">
</a>

Dans l'exemple ci-dessus, l'attribut data-lightbox est défini sur "gallery", ce qui signifie que les images seront affichées dans la même galerie et que les images peuvent être permutées avec les flèches gauche et droite.

Initialisez lightbox.js via JavaScript

Une fois la vignette de l'image créée, vous pouvez initialiser lightbox.js via JavaScript. Toutes les vignettes d'images avec des attributs data-lightbox peuvent être trouvées et initialisées à l'aide du code suivant :

lightbox.option({
  'resizeDuration': 200,
  'wrapAround': true
})

Dans le code ci-dessus, nous définissons certaines options via la méthode lightbox.option(). L'option resizeDuration spécifie le temps (en millisecondes) nécessaire à l'image pour passer d'une taille à une autre. L'option wrapAround est utilisée pour spécifier s'il faut activer la navigation en boucle.

Options de configuration personnalisées

En plus des options d'initialisation mentionnées ci-dessus, lightbox.js propose également de nombreuses autres options pour personnaliser l'apparence et le comportement de la lightbox. Voici quelques options courantes :

disableScrolling : empêche le défilement de la page lorsque la lightbox est ouverte ;

fadeDuration : l'heure de l'effet de fondu ;

imageFadeDuration : l'heure de l'effet de fondu de l'image ;

positionFromTop ; distance entre le haut de l'image et le haut de l'écran Distance ;

showImageNumberLabel : affiche la position et le nombre total de l'image actuelle dans la galerie ;

fitImagesInViewport : redimensionne automatiquement les images pour s'adapter à la fenêtre d'affichage de l'écran.

Vous pouvez utiliser ces options comme paramètres dans le code d'initialisation :

lightbox.option({
  'disableScrolling': true,
  'fadeDuration': 300,
  'imageFadeDuration': 500,
  'positionFromTop': 100,
  'showImageNumberLabel': true,
  'fitImagesInViewport': true
});

Allumez et éteignez la lightbox

Une fois l'initialisation terminée, cliquer sur la vignette de l'image ouvrira la lightbox, affichant l'image en taille réelle. Cliquez n'importe où dans la visionneuse ou appuyez sur la touche ÉCHAP pour fermer la visionneuse.

Ouvrir des vidéos et du contenu Web

En plus des images, lightbox.js peut également être utilisé pour afficher des vidéos et du contenu Web. Pour afficher une vidéo, définissez simplement l'attribut data-lightbox sur "video" et définissez l'attribut href de la vignette sur l'URL du fichier vidéo. De même, pour afficher le contenu Web, définissez l'attribut data-lightbox sur "iframe" et définissez l'attribut href de la vignette sur l'URL de la page Web.

<a href="path-to-videos/video.mp4" data-lightbox="video"> <!-- 视频缩略图 -->
  <img src="path-to-thumbnails/thumbnail.jpg" alt="Thumbnail">
</a>

<a href="http://example.com" data-lightbox="iframe"> <!-- 网页缩略图 -->
  <img src="path-to-thumbnails/thumbnail.jpg" alt="Thumbnail">
</a>

Résumé :

Ce qui précède présente l'utilisation de lightbox.js. Il s'agit d'un plug-in JavaScript très pratique et facile à utiliser, adapté à l'affichage d'images, de vidéos ou de contenu Web sur des pages Web. Avec un code HTML simple et quelques options d'initialisation, vous pouvez créer un effet lightbox hautement interactif et magnifique. J'espère que cet article pourra vous aider à mieux comprendre et utiliser lightbox.js.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!