外掛說明

WP fancybox plugin adds fancybox lightbox effect to your WordPress website. The lightbox looks great on desktop as well as mobile devices.

WP fancybox Features

Responsive lightbox popup using fancybox
Designed with a mobile first approach so it looks great on desktop, mobile and tablet devices
Quick and easy setup
Open lightbox popup from either a text link or a thumbnail image link
YouTube video popup
Vimeo video popup
Use a simple shortcode to pop up content in lightbox

How to Use WP fancybox

Image in lightbox

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

[wp_fancybox_media url="https://example.com/wp-content/uploads/images/overlay.jpg" 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_fancybox_media url="https://example.com/wp-content/uploads/images/overlay.jpg" hyperlink="https://example.com/wp-content/uploads/images/thumb.jpg"]

YouTube video in lightbox

[wp_fancybox_media url="https://www.youtube.com/watch?v=Vpg9yizPP_g" hyperlink="click here to pop up youtube video"]

Vimeo video in lightbox

[wp_fancybox_media url="https://vimeo.com/1084537" hyperlink="click here to pop up vimeo video"]

Caption in lightbox

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

Alternate Text for an Image

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

Custom CSS

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

[wp_fancybox_media url="https://www.youtube.com/watch?v=Vpg9yizPP_g" hyperlink="click here to pop up youtube video" class="custom_class"]

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

[wp_fancybox_media url="https://www.youtube.com/watch?v=Vpg9yizPP_g" hyperlink="click here to pop up youtube video" class="custom_class custom_class2"]

For detailed documentation please visit the WordPress fancybox plugin page

螢幕擷圖

Image popup in lightbox
YouTube video Demo in lightbox
Vimeo video Demo in lightbox

安裝方式

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

常見問題集

Can this plugin be used to open an image in lightbox?: Yes.
Can I use this plugin to open a YouTube video in lightbox?: Yes.
Can I use this plugin to open a Vimeo video in lightbox?: Yes.

使用者評論

wpblogtuts 2017 年 7 月 24 日

This is by far the best fancyBox lightbox for mobile devices. Thank you so much for this plugin and keep up the good work.

Curtis 2017 年 7 月 13 日

Hello. Thank you for your plugin development. Love this plugin. It seems to work fine with shortcodes provided on WP plugin page. The display interface is attractive, and captions display in the lower left corner of the overlay. Personal experience: it worked on my Win 10 Chrome desktop browser, and Android tablet, just fine.

閱讀全部 3 則使用者評論

參與者及開發者

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

Noor Alam

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

對開發相關資訊感興趣？

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

變更記錄

1.0.3

Updated to fancybox 4.

1.0.2

Made some security related improvements in the plugin
Updated fancybox to 3.5.7

1.0.1

First commit

Perfect!

Nice looking at it works!