Title: CSS-Only Lightbox
Author: dan-jones
Published: <strong>2016 年 10 月 11 日</strong>
Last modified: 2016 年 10 月 11 日

---

搜索插件

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

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

# CSS-Only Lightbox

 作者：[dan-jones](https://profiles.wordpress.org/dan-jones-1/)

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

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

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

## 描述

Adds a [css_lightbox …] shortcode that generates a CSS-only lightbox for a given
image (by URL). Also includes a TinyMCE toolbar button for more easily including
the needed attributes for the shortcode.

## 安装

 1. Upload the plugin files to the `/wp-content/plugins/plugin-name` directory, or 
    install the plugin through the WordPress plugins screen directly.
 2. Activate the plugin through the ‘Plugins’ screen in WordPress

## 常见问题

  How do I add a lightbox?

 1. Copy and paste the complete URL for the image you want to make a lightbox for into
    the WordPress editor
 2. Select the URL with your cursor
 3. Click the “Lightbox” button in the TinyMCE toolbar
 4. Enter the values you’re prompted for. The only one that’s required is a unique 
    ID for the image

OR

 1. Copy and paste the complete URL for the image you want to make a lightbox for into
    the WordPress editor
 2. Add the opening shortcode, [css_lightbox …] before the beginning of the URL and
    add the options you want
 3. Attributes you can use with the shortcode are:

* “id” (unique identifier for the image, required)
 * “height” (in pixels, without
including px) * “width” (in pixels, without including px) * “title” (a title for
image, displayed when it’s enlarged) * “caption” (a caption for the image, displayed
when it’s enlarged) * “alt” (alt text for the on-page image) * “icon” (‘true’ or‘
false’ – whether or not to include a small magnifying glass icon in the top-left
of the on-page image, to indicate that it can be enlarged) 1. An example using all
of the available options: [css_lightbox id=”uniqueID” height=”400″ width=”400″ title
=”A title” caption=”A caption” alt=”Some alt text” icon=”true”]Image URL[/css_lightbox]

  What features are coming?

 * The option to use other units for the image dimension, including %, em, rem, 
   vw, and vh
 * Send me suggestions in the support forum!

## 评价

此插件暂无评价。

## 贡献者及开发者

「CSS-Only Lightbox」是开源软件。 以下人员对此插件做出了贡献。

贡献者

 *   [ dan-jones ](https://profiles.wordpress.org/dan-jones-1/)

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

### 对开发感兴趣吗?

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

## 更新日志

#### 1.0

First version:
 * Adds shortcode * Adds TinyMCE plugin and button to make the shortcode
easier to use

## 额外信息

 *  版本 **1.0**
 *  最后更新：**9 年前**
 *  活跃安装数量 **10+**
 *  WordPress 版本 ** 3.0.1 或更高版本 **
 *  已测试的最高版本为 **4.6.30**
 *  语言
 * [English (US)](https://wordpress.org/plugins/css-only-lightbox/)
 * 标签
 * [css](https://cn.wordpress.org/plugins/tags/css/)[lightbox](https://cn.wordpress.org/plugins/tags/lightbox/)
 *  [高级视图](https://cn.wordpress.org/plugins/css-only-lightbox/advanced/)

## 评级

尚未提交反馈。

[添加我的评价](https://wordpress.org/support/plugin/css-only-lightbox/reviews/#new-post)

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

## 贡献者

 *   [ dan-jones ](https://profiles.wordpress.org/dan-jones-1/)

## 支持

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

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