Title: WP Colorbox Author: Noor Alam Published: 2014 年 1 月 10 日 Last modified: 2025 年 8 月 16 日 --- 搜尋外掛 ![](https://ps.w.org/wp-colorbox/assets/icon-128x128.png?rev=2610062) # WP Colorbox 由 [Noor Alam](https://profiles.wordpress.org/naa986/) 開發 [下載](https://downloads.wordpress.org/plugin/wp-colorbox.zip) * [詳細資料](https://tw.wordpress.org/plugins/wp-colorbox/#description) * [使用者評論](https://tw.wordpress.org/plugins/wp-colorbox/#reviews) * [安裝方式](https://tw.wordpress.org/plugins/wp-colorbox/#installation) * [開發資訊](https://tw.wordpress.org/plugins/wp-colorbox/#developers) [技術支援](https://wordpress.org/support/plugin/wp-colorbox/) ## 外掛說明 [WP Colorbox](https://noorsplugin.com/wordpress-colorbox-plugin/) 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"] ``` **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](https://noorsplugin.com/wordpress-colorbox-plugin/) 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. ## 使用者評論 ![](https://secure.gravatar.com/avatar/acd17a3a12309d7e5a7dc22c7dce474ae620fd8474422dedbc22138d47b7e19b? s=60&d=retro&r=g) ### 󠀁[Best flexible lightbox on the market](https://wordpress.org/support/topic/best-flexible-lightbox-on-the-market/)󠁿 [alphaomegawebdesign](https://profiles.wordpress.org/alphaomegawebdesign/) 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!!! ![](https://secure.gravatar.com/avatar/1eea8a19ab97b4f8c945c0b9a8a44e1c768abcb5d0d228f20d6ced174b18cf36? s=60&d=retro&r=g) ### 󠀁[Great Text solution](https://wordpress.org/support/topic/great-text-solution/)󠁿 [klstock12](https://profiles.wordpress.org/klstock12/) 2018 年 5 月 11 日 I was looking for a pop-up text solution. This fit it great. ![](https://secure.gravatar.com/avatar/2a10f7653fa888eb251140e256d85fc7b934141980bc7f217f221c85b9caf3ab? s=60&d=retro&r=g) ### 󠀁[Firefox](https://wordpress.org/support/topic/firefox-22/)󠁿 [gtwa](https://profiles.wordpress.org/gtwa/) 2018 年 3 月 16 日 Very good but it is not running on firefox and ms edge ![](https://secure.gravatar.com/avatar/fff557893d8f891d67b342abd47b2ff6d433ef327fb1b6560b97e3bf8ebfeec2? s=60&d=retro&r=g) ### 󠀁[Simle and Jump-starting!](https://wordpress.org/support/topic/simle-and-jump-starting/)󠁿 [brontho](https://profiles.wordpress.org/brontho/) 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! ![](https://secure.gravatar.com/avatar/123f1546ee584d51fc13eb392be0f0217760ad0188fa810cdef223baafef18e8? s=60&d=retro&r=g) ### 󠀁[Great plugin!](https://wordpress.org/support/topic/great-plugin-15646/)󠁿 [malagraphicdesign](https://profiles.wordpress.org/malagraphicdesign/) 2017 年 10 月 28 日 Works perfectly, thanks! ![](https://secure.gravatar.com/avatar/10f9e977485085d8c3f80ae70ffa66dd0b74ead8ca0287ebe1b30bbbdb467e84? s=60&d=retro&r=g) ### 󠀁[Great support finally](https://wordpress.org/support/topic/poor-support-65/)󠁿 [Joss0ne](https://profiles.wordpress.org/joss0ne/) 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 則使用者評論 ](https://wordpress.org/support/plugin/wp-colorbox/reviews/) ## 參與者及開發者 以下人員參與了開源軟體〈WP Colorbox〉的開發相關工作。 參與者 * [ Noor Alam ](https://profiles.wordpress.org/naa986/) 〈WP Colorbox〉外掛目前已有 5 個本地化語言版本。 感謝[全部譯者](https://translate.wordpress.org/projects/wp-plugins/wp-colorbox/contributors) 為這個外掛做出的貢獻。 [將〈WP Colorbox〉外掛本地化為台灣繁體中文版](https://translate.wordpress.org/projects/wp-plugins/wp-colorbox) ### 對開發相關資訊感興趣？ 任何人均可[瀏覽程式碼](https://plugins.trac.wordpress.org/browser/wp-colorbox/)、 查看 [SVN 存放庫](https://plugins.svn.wordpress.org/wp-colorbox/)，或透過 [RSS](https://plugins.trac.wordpress.org/log/wp-colorbox/?limit=100&mode=stop_on_copy&format=rss) 訂閱[開發記錄](https://plugins.trac.wordpress.org/log/wp-colorbox/)。 ## 變更記錄 #### 1.1.6 * Removed title option. #### 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 ## 中繼資料 * 版本 **1.1.6** * 最後更新 **10 個月前** * 啟用安裝數 **5,000+** * WordPress 版本需求 ** 3.0 或更新版本 ** * 已測試相容的 WordPress 版本 **6.8.5** * 語言 * [English (Australia)](https://en-au.wordpress.org/plugins/wp-colorbox/)、[English (Canada)](https://en-ca.wordpress.org/plugins/wp-colorbox/)、 [English (New Zealand)](https://en-nz.wordpress.org/plugins/wp-colorbox/)、[English (UK)](https://en-gb.wordpress.org/plugins/wp-colorbox/)、 [English (US)](https://wordpress.org/plugins/wp-colorbox/)、及 [Russian](https://ru.wordpress.org/plugins/wp-colorbox/). * [將這個外掛本地化為你的母語版本](https://translate.wordpress.org/projects/wp-plugins/wp-colorbox) * 標籤: * [colorbox](https://tw.wordpress.org/plugins/tags/colorbox/)[gallery](https://tw.wordpress.org/plugins/tags/gallery/) [image](https://tw.wordpress.org/plugins/tags/image/)[lightbox](https://tw.wordpress.org/plugins/tags/lightbox/) [photo](https://tw.wordpress.org/plugins/tags/photo/) * [進階檢視](https://tw.wordpress.org/plugins/wp-colorbox/advanced/) ## 評分 4.3 星，滿分為 5 星 * [ 16 個 5 星使用者評論 ](https://wordpress.org/support/plugin/wp-colorbox/reviews/?filter=5) * [ 3 個 4 星使用者評論 ](https://wordpress.org/support/plugin/wp-colorbox/reviews/?filter=4) * [ 1 個 3 星使用者評論 ](https://wordpress.org/support/plugin/wp-colorbox/reviews/?filter=3) * [ 1 個 2 星使用者評論 ](https://wordpress.org/support/plugin/wp-colorbox/reviews/?filter=2) * [ 2 個 1 星使用者評論 ](https://wordpress.org/support/plugin/wp-colorbox/reviews/?filter=1) [Your review](https://wordpress.org/support/plugin/wp-colorbox/reviews/#new-post) [查看全部使用者評論](https://wordpress.org/support/plugin/wp-colorbox/reviews/) ## 參與者 * [ Noor Alam ](https://profiles.wordpress.org/naa986/) ## 技術支援 使用者可在技術支援論壇提出意見反應或使用問題。 [檢視技術支援論壇](https://wordpress.org/support/plugin/wp-colorbox/) ## 贊助 想要支援這個外掛的發展嗎？ [ 贊助這個外掛 ](https://noorsplugin.com/)