Detailed explanation of lightbox.js usage

lightbox.js is a commonly used JavaScript plug-in, used to display the browsing effect of images, videos or web content on web pages. It provides a simple yet elegant way for viewers to click on a thumbnail or button to open a modal displaying a full-size image or media. In this article, we will introduce the usage of lightbox.js in detail.

Download and introduce lightbox.js

To use lightbox.js, you first need to download the latest version of the plug-in from the official website. Once the download is complete, copy the plugin file into your project's JavaScript folder. Then, use the <script> tag to introduce the lightbox.js file in the head or script section of the HTML document. </script>

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

Create image thumbnails

In order to use lightbox.js, you need to create image thumbnails in the HTML document. Typically, image thumbnails are wrapped using an tag, and their href attribute points to the URL of the full-size image. In addition, you also need to add a data attribute to specify the trigger of lightbox.js.

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

In the above example, the data-lightbox attribute is set to "gallery", which means that the images will be displayed in the same gallery, and the images can be switched with the left and right arrows.

Initialize lightbox.js via JavaScript

Once the image thumbnail is created, you can initialize lightbox.js via JavaScript. Using the following code, all image thumbnails with data-lightbox attributes can be found and initialized:

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

In the above code, we set some options through the lightbox.option() method. The resizeDuration option specifies the time (in milliseconds) it takes for the image to change from one size to another. The wrapAround option is used to specify whether to enable loop browsing.

Custom configuration options

In addition to the above-mentioned initialization options, lightbox.js also provides many other options that can be used to customize the appearance and behavior of the lightbox. The following are some common options:

disableScrolling: disable the page from scrolling when the lightbox is opened;

fadeDuration: the time of the fade effect;

imageFadeDuration: the time of the image fade effect Time;

positionFromTop: the distance from the top of the picture to the top of the screen;

showImageNumberLabel: displays the position and total number of the current image in the gallery;

fitImagesInViewport: automatically adjusts the image size to Fit to screen viewport.

You can use these options as parameters in the initialization code:

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

Turn the lightbox on and off

Once initialization is complete, clicking on the image thumbnail will open the lightbox to full size Image. Click anywhere in the lightbox or press the ESC key to close the lightbox.

Open videos and web content

In addition to images, lightbox.js can also be used to display videos and web content. To display a video, simply set the data-lightbox attribute to "video" and set the thumbnail's href attribute to the URL of the video file. Similarly, to display web content, set the data-lightbox attribute to "iframe" and set the thumbnail's href attribute to the URL of the web page.

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

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

Summary:

The above introduces the usage of lightbox.js. It is a very convenient and easy-to-use JavaScript plug-in, suitable for displaying images, videos or web content on web pages. With simple HTML code and some initialization options, you can create a highly interactive and beautiful-looking lightbox effect. I hope this article can help you better understand and use lightbox.js.

The above is the detailed content of Detailed explanation of lightbox.js usage. For more information, please follow other related articles on the PHP Chinese website!