Icon indicating an imageLightbox

by Lokesh Dhakar

The original lightbox script.
Eight years later — still going strong!

Download View on Github

示例

两张个人图片

Girl looking out people on beach Two men in bicycle jerseys sitting outside at table having coffee

四个图像集

Golden Gate Bridge with San Francisco in distance Forest with mountains behind Bicyclist looking out over hill at ocean Small lighthouse at bottom with ocean behind

快速入门

  1. 将最新版本作为zip文件下载
    或使用包管理器...
    Bower: bower install lightbox2 --save
    NPM: npm install lightbox2 --save

  2. Open up the zip file and take a peek at the barebones, working example that is included in the /examples folder.

  3. Ready to set Lightbox up on your page? Start by including the Lightbox CSS and Javascript. You can grab both these files from the /dist folder.

    • Include the CSS at the top of your page in your <head> tag: 
      <link href="path/to/lightbox.css" rel="stylesheet">
    • Include the Javascript at the bottom of your page before the closing </body> tag: 
      <script src="path/to/lightbox.js"></script>

  4. Make sure jQuery, which is required by Lightbox, is also loaded.

    • If you already use jQuery on your page, make sure it is loaded before lightbox.js. jQuery 1.7 or greater is required.
    • If you are not currently using jQuery, I've created a packaged file that includes both Lightbox and jQuery. Include dist/js/lightbox-plus-jquery.js instead of lightbox.js.
  5. Confirm that the four images loaded by lightbox.css are in the correct location. You can grab the images from the /dist/images folder.

用HTML初始化

  • Add a data-lightbox attribute to any image link to enable Lightbox. For the value of the attribute, use a unique name for each image. For example: 
    <a href="images/image-1.jpg" data-lightbox="image-1" data-title="My caption">Image #1</a>
    Optional: Add a data-title attribute if you want to show a caption.
  • If you have a group of related images that you would like to combine into a set, use the same data-lightbox attribute value for all of the images. For example: 
    <a href="images/image-2.jpg" data-lightbox="roadtrip">Image #2</a>
<a href="images/image-3.jpg" data-lightbox="roadtrip">Image #3</a>
<a href="images/image-4.jpg" data-lightbox="roadtrip">Image #4</a>

选项

如果要更改任何默认选项，请调用选项方法.

<script>
    lightbox.option({
      'resizeDuration': 200,
      'wrapAround': true
    })
</script>
选项 默认 描述
alwaysShowNavOnTouchDevices false 如果为true，则在观看图像集时鼠标悬停时出现的左右导航箭头将始终在支持触摸的设备上可见.
albumLabel "Image %1 of %2" 查看图像集时，标题下方显示的文字。 默认文本显示当前图像编号和集合中的图像总数。
disableScrolling false 如果为true，则在Lightbox开启时禁止页面滚动。 这通过隐藏在身体上的设置溢出来实现.
fadeDuration 600 需要的灯箱容器和覆盖的时间淡入和淡出，以毫秒为单位.
fitImagesInViewport true 如果为true，请调整将在视口外延伸的图像大小，以使其完全适合其内部。 这样可以节省用户滚动以查看整个图像.
imageFadeDuration 600 图像淡入淡出所需的时间，以毫秒为单位.
maxWidth   如果设置，图像高度将以像素为单位限制在此数字上.
maxHeight   如果设置，图像宽度将限制为此数字，以像素为单位.
positionFromTop 50 灯箱容器出现的视口顶部的距离，以像素为单位.
resizeDuration 700 T灯箱容器在不同大小的图像之间转换（以毫秒为单位）的宽度和高度进行动画处理所需的时间。
showImageNumberLabel true false，则将隐藏指示当前图像编号和设置的图像总数的文本（例如“4”的图像2））。
wrapAround false 如果为真，当用户到达集合中的最后一个图像时，右侧的导航箭头将出现，并且它们将继续向前移动，这将使它们返回到集合中的第一个图像.

浏览器支持

Lightbox2 has been tested successfully in the following browsers:

  • Internet Explorer.
    The lightbox-plus-jquery.js file includes jQuery v2.x and supports IE 9+. If you want to support IE 6, 7, and 8, use your own copy of jQuery v1.x with lightbox.js.
  • Chrome
  • Safari
  • Firefox
  • iOS Safari
  • iOS Chrome
  • Android Browser
  • Android Chrome

许可

Lightbox2 is licensed under The MIT License.

  • 100% Free. Lightbox is free to use in both commercial and non-commercial work.
  • Attribution is required.This means you must leave my name, my homepage link, and the license info intact. None of these items have to be user-facing and can remain within the code.

帮助

Have a question about how to use Lightbox?

Follow the steps below to get help. Make sure you have read the documentation on this page and looked at the included example first.

  1. Search Stackoverflow to see if other people have run into the same issue you are having.
  2. If your issue is unique, then post a new question on Stackoverflow. Use the lightbox2 tag.

Do not use Github Issues to report personal support requests.

Found a bug?

If you find a bug, follow the instructions in the Contribution Guildelines to report the issue.

Tweet