Title: blueimp lightbox
Author: blueimp
Published: <strong>2013 年 10 月 19 日</strong>
Last modified: 2014 年 9 月 4 日

---

搜索插件

**该插件尚未通过WordPress的最新3个主要版本进行测试**。 当与较新版本的WordPress一起
使用时，可能不再受到维护或支持，并且可能会存在兼容性问题。

![](https://s.w.org/plugins/geopattern-icon/blueimp-lightbox.svg)

# blueimp lightbox

 作者：[blueimp](https://profiles.wordpress.org/blueimp/)

[下载](https://downloads.wordpress.org/plugin/blueimp-lightbox.1.1.2.zip)

 * [详情](https://cn.wordpress.org/plugins/blueimp-lightbox/#description)
 * [评价](https://cn.wordpress.org/plugins/blueimp-lightbox/#reviews)
 *  [安装](https://cn.wordpress.org/plugins/blueimp-lightbox/#installation)
 * [开发进展](https://cn.wordpress.org/plugins/blueimp-lightbox/#developers)

 [支持](https://wordpress.org/support/plugin/blueimp-lightbox/)

## 描述

[blueimp Gallery](http://blueimp.github.io/Gallery/) is a touch-enabled, responsive
and customizable image and video gallery, carousel and lightbox, optimized for both
mobile and desktop web browsers.
 It features swipe, mouse and keyboard navigation,
transition effects, slideshow functionality, fullscreen support and on-demand content
loading and can be extended to display additional content types. This is the official
WordPress plugin for the Gallery lightbox functionality. By default it automatically
adds lightbox functionality to image links ending with gif, jpg, jpeg and png extensions.
The plugin provides an options page to disable the automatic feature and to restrict
the list of media types. It is also possible to add lightbox functionality for a
link manually.

## 屏幕截图

[⌊Options page⌉⌊Options page⌉[

Options page

[⌊Lightbox with bright image⌉⌊Lightbox with bright image⌉[

Lightbox with bright image

[⌊Lightbox with dark image⌉⌊Lightbox with dark image⌉[

Lightbox with dark image

## 安装

 1. Upload the `blueimp-lightbox` folder to the `/wp-content/plugins/` directory.
 2. Activate the plugin through the ‘Plugins’ menu in WordPress.
 3. Ready! 🙂

## 常见问题

  How to enable the lightbox functionality for default WordPress galleries?

In the Gallery settings, set the “Link To” option to “Media File”.

  How to manually activate the lightbox functionality for a link?

Simply add the attribute `data-gallery` to the link tag and it will be opened in
the lightbox:

    ```
    <a href="banana.jpg" data-gallery>Banana</a>
    ```

If multiple links on the page have the `data-gallery` attribute, the lightbox enables
gallery navigation between the linked resources.

  How can I enable the lightbox HTML5 fullscreen mode for a link?

To enable the HTML5 fullscreen mode, add the `#blueimp-gallery-fullscreen` value
for the `data-gallery` attribute:

    ```
    <a href="banana.jpg" data-gallery="#blueimp-gallery-fullscreen">Banana</a> 
    ```

Please note that this only has an effect in browsers which support the HTML5 fullscreen
API.
 Other browsers will simply display the lightbox without HTML5 fullscreen mode.

  How can I display HTML5 videos in the lightbox?

Add the `data-gallery` attribute and a `type` attribute with the video content type
to the link:

    ```
    <a href="cats.mp4" type="video/mp4" data-gallery>Cats</a>
    <a href="dogs.ogv" type="video/ogv" data-gallery>Dogs</a>
    ```

Please note that this is only supported in browsers which can play native HTML5 
video and support the required video codec.

  How can I display YouTube videos in the lightbox?

Add the `data-gallery` attribute, set the `type` attribute to `text/html` and add
a `data-youtube` attribute with the [YouTube](https://www.youtube.com/) video ID:

    ```
    <a href="https://www.youtube.com/watch?v=zi4CIXpx7Bg" type="text/html" data-youtube="zi4CIXpx7Bg" data-gallery>LES TWINS - An Industry Ahead</a>
    ```

  How can I display Vimeo videos in the lightbox?

Add the `data-gallery` attribute, set the `type` attribute to `text/html` and add
a `data-vimeo` attribute with the [Vimeo](https://vimeo.com/) video ID:

    ```
    <a href="https://vimeo.com/73686146" type="text/html" data-vimeo="73686146" data-gallery>KN1GHT - Last Moon</a>
    ```

  Where can I find more documentation for this plugin?

Head over to the [blueimp Gallery](https://github.com/blueimp/Gallery) project page
and check out the [Gallery docs](https://github.com/blueimp/Gallery/blob/master/README.md).

## 评价

![](https://secure.gravatar.com/avatar/a4ff44b177349d444948e7a14effbd335a52599843eb35148bf9c8321b4269b4?
s=60&d=retro&r=g)

### 󠀁[Good plugin but something is wrong](https://wordpress.org/support/topic/good-plugin-but-something-is-wrong/)󠁿

 [stepan7466](https://profiles.wordpress.org/stepan7466/) 2019 年 1 月 7 日

Hello! it's good simple plugins, but I have one problem. When I click on the picture
I need to click one more time in order to see navigation buttons. Maybe somebody
knows what's wrong?

![](https://secure.gravatar.com/avatar/d4af44af1da6386811afe8a794fae1d7d94735906b644c9378b10a8bfc939a9a?
s=60&d=retro&r=g)

### 󠀁[Great lightbox, badly packaged](https://wordpress.org/support/topic/great-lightbox-badly-packaged/)󠁿

 [michalszota](https://profiles.wordpress.org/michalszota/) 2016 年 9 月 3 日

The plugin enqueues around 10 scripts and css files to be loaded. And these are 
unoptimized, and unminified — wasting time and bandwith.

 [ 阅读所有16条评价 ](https://wordpress.org/support/plugin/blueimp-lightbox/reviews/)

## 贡献者及开发者

「blueimp lightbox」是开源软件。 以下人员对此插件做出了贡献。

贡献者

 *   [ blueimp ](https://profiles.wordpress.org/blueimp/)

[帮助将「blueimp lightbox」翻译成简体中文。](https://translate.wordpress.org/projects/wp-plugins/blueimp-lightbox)

### 对开发感兴趣吗?

您可以[浏览代码](https://plugins.trac.wordpress.org/browser/blueimp-lightbox/)，
查看[SVN仓库](https://plugins.svn.wordpress.org/blueimp-lightbox/)，或通过[RSS](https://plugins.trac.wordpress.org/log/blueimp-lightbox/?limit=100&mode=stop_on_copy&format=rss)
订阅[开发日志](https://plugins.trac.wordpress.org/log/blueimp-lightbox/)。

## 更新日志

#### 1.1.2

 * Added compatibility information for WordPress 4.0.

#### 1.1.1

 * Detect media files with query parameters or anchor suffixes.

#### 1.1.0

 * Updated resource files to blueimp Gallery 2.15.0.
 * Added the automatic activation filter to the post_gallery hook.

#### 1.0.1

 * Updated resource files to blueimp Gallery 2.11.5.
 * Added a workaround for the plugin urls if the plugin is included via symlink.
 * Replaced plugins_url with plugin_dir_path for the path to the HTML templates.

#### 1.0.0

 * Initial release.

## 额外信息

 *  版本 **1.1.1**
 *  最后更新：**12 年前**
 *  活跃安装数量 **1,000+**
 *  WordPress 版本 ** 3.6.1 或更高版本 **
 *  已测试的最高版本为 **4.0.0**
 *  语言
 * [English (US)](https://wordpress.org/plugins/blueimp-lightbox/)
 * 标签
 * [desktop](https://cn.wordpress.org/plugins/tags/desktop/)[lightbox](https://cn.wordpress.org/plugins/tags/lightbox/)
   [mobile](https://cn.wordpress.org/plugins/tags/mobile/)[responsive](https://cn.wordpress.org/plugins/tags/responsive/)
   [swipe](https://cn.wordpress.org/plugins/tags/swipe/)
 *  [高级视图](https://cn.wordpress.org/plugins/blueimp-lightbox/advanced/)

## 评级

 4.4 星（最高 5 星）。

 *  [  11 条 5 星评价     ](https://wordpress.org/support/plugin/blueimp-lightbox/reviews/?filter=5)
 *  [  2 条 4 星评价     ](https://wordpress.org/support/plugin/blueimp-lightbox/reviews/?filter=4)
 *  [  2 条 3 星评价     ](https://wordpress.org/support/plugin/blueimp-lightbox/reviews/?filter=3)
 *  [  0 条 2 星评价     ](https://wordpress.org/support/plugin/blueimp-lightbox/reviews/?filter=2)
 *  [  1 条 1 星评价     ](https://wordpress.org/support/plugin/blueimp-lightbox/reviews/?filter=1)

[您的评价](https://wordpress.org/support/plugin/blueimp-lightbox/reviews/#new-post)

[查看全部评论](https://wordpress.org/support/plugin/blueimp-lightbox/reviews/)

## 贡献者

 *   [ blueimp ](https://profiles.wordpress.org/blueimp/)

## 支持

有话要说吗？是否需要帮助？

 [查看支持论坛](https://wordpress.org/support/plugin/blueimp-lightbox/)

## 捐助

您愿意支持这个插件的发展吗?

 [ 捐助此插件 ](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=MW4CRDG7Q4CQN)