WP Colorbox

外掛說明

WP Colorbox plugin is a simple lightbox tool for WordPress. It allows users to pop up content in lightbox using the popular jQuery ColorBox library. They can also view the larger version of a particular media file without leaving the page.

Features

  • Beautiful lightbox popup style
  • Flexiblity of creating your own lightbox link
  • Pop up custom/HTML content in lightbox
  • Trigger lightbox from either a text/image link
  • Add lightbox to a YouTube or Vimeo video link
  • Enable lightbox functionality on your site which supports modern browsers
  • Use a simple shortcode to pop up a media file in lightbox
  • Apply lightbox effect on images inserted into WordPress post/page
  • Open external page in lightbox using iframe
  • Responsive lightbox popup which works on mobile devices. Also it fits perfectly on smaller screens.

How to Use WP Colorbox

Pop up image in lightbox

Create a new post/page and use the following shortcode to create a text/image link which will trigger lightbox once clicked:

[wp_colorbox_media url="https://example.com/wp-content/uploads/images/overlay.jpg" type="image" hyperlink="click here to pop up image"]

here, url is the link to the media file that you wish to open in lightbox and hyperlink is the anchor text/image.

[wp_colorbox_media url="https://example.com/wp-content/uploads/images/overlay.jpg" type="image" hyperlink="http://example.com/wp-content/uploads/images/thumb.jpg"]

Pop up YouTube video in lightbox

[wp_colorbox_media url="https://www.youtube.com/embed/nmp3Ra3Yj24" type="youtube" hyperlink="click here to pop up youtube video"]

Pop up Vimeo video in lightbox

[wp_colorbox_media url="https://www.youtube.com/embed/1284237" type="vimeo" hyperlink="click here to pop up vimeo video"]

Show Title in lightbox

[wp_colorbox_media url="https://example.com/wp-content/uploads/images/overlay.jpg" title="overlay image" type="image" hyperlink="click here to pop up image"]

Specify an Alternate Text for an Image

[wp_colorbox_media url="https://example.com/wp-content/uploads/images/overlay.jpg" title="overlay image" type="image" hyperlink="http://example.com/wp-content/uploads/images/thumb.jpg" alt="Thumbnail image description"]

Apply Custom CSS

You can specify your own CSS class in the shortcode to customize a text/image link.

[wp_colorbox_media url="https://www.youtube.com/embed/nmp3Ra3Yj24" type="youtube" hyperlink="click here to pop up youtube video" class="custom_class"]

Multiple CSS classes can be separated with a space. For example:

[wp_colorbox_media url="https://www.youtube.com/embed/nmp3Ra3Yj24" type="youtube" hyperlink="click here to pop up youtube video" class="custom_class custom_class2"]

For detailed documentation please visit the WordPress Colorbox plugin page

螢幕擷圖

  • Image popup in lightbox
  • YouTube video popup in lightbox
  • Vimeo video popup in lightbox
  • External page popup in lightbox

安裝方式

  1. Go to the Add New plugins screen in your WordPress Dashboard
  2. Click the upload tab
  3. Browse for the plugin file (wp-colorbox.zip) on your computer
  4. Click “Install Now” and then hit the activate button

常見問題集

Can I use this plugin to pop up an image in lightbox?

Yes.

Can I use this plugin to pop up a YouTube video in lightbox?

Yes.

Can I use this plugin to pop up a Vimeo video in lightbox?

Yes.

Can I use this plugin to pop up an external page in lightbox?

Yes.

Can I use this plugin to pop up inline HTML content in lightbox?

Yes.

Is this plugin responsive?

Yes.

Is this plugin compatible with desktop, tablet and mobile devices?

Yes.

使用者評論

2022 年 6 月 1 日
I use the colorbox lightbox for many years in my projects and for me it´s still the best lightbox plugin on the market. Its easy to use and very flexible in functionality and design. Really great job. Thank you!!!
2018 年 3 月 16 日
Very good but it is not running on firefox and ms edge
2018 年 1 月 11 日
Many thanks to the plugin developers - you did a great job! I was able to start enjoying nice lightbox stuff on my website right after I saved my initial Fancybox settings(and no matter what class was attributed to my img links!) I changes nothing in my php/css, which is so cool. It just works. That's fantastic!
2017 年 9 月 28 日
I needed to be patient adn I got good continuous support from Noor. He managed to help me resolve m the issue I was encountering.
閱讀全部 23 則使用者評論

參與者及開發者

以下人員參與了開源軟體〈WP Colorbox〉的開發相關工作。

參與者

〈WP Colorbox〉外掛目前已有 5 個本地化語言版本。 感謝全部譯者為這個外掛做出的貢獻。

將〈WP Colorbox〉外掛本地化為台灣繁體中文版

對開發相關資訊感興趣?

任何人均可瀏覽程式碼、查看 SVN 存放庫,或透過 RSS 訂閱開發記錄

變更記錄

1.1.5

  • Made some security related improvements in the plugin.

1.1.4

  • Removed some unused files.

1.1.3

  • Made some security related improvements in the plugin.

1.1.2

  • Updated Colorbox to the latest version (1.6.4).

1.1.1

  • Compatible with WordPress 4.8
  • Updated all the permalinks

1.1.0

  • Disabled scrolling option for YouTube and Vimeo videos.

1.0.9

  • Alt (alternate text) attribute can now be specified in the shortcode for a thumbnail image.

1.0.8

  • Added translation option so the plugin can take advantage of language packs
  • WP Colorbox is now compatible with WordPress 4.4

1.0.7

  • WP Colorbox is now compatible with WordPress 4.3

1.0.6

  • Added a new shortcode parameter to apply custom CSS classes on a text/image link

1.0.5

  • Added a new shortcode parameter to show the title of a media in lightbox

1.0.4

  • colorbox shortcodes can now be embedded in a text widget

1.0.3

  • Lightbox now opens full-sized images

1.0.2

  • Lightbox window is now responsive

1.0.1

  • WP Colorbox is now compatible with WordPress 3.9

1.0

  • First commit