內容簡介
WordPress fancybox外掛為您的 WordPress 網站添加 fancybox lightbox 效果。 該 lightbox 在桌面和移動設備上都非常出色。
WP fancybox 功能
使用 fancybox 製作的響應式 lightbox 彈窗
使用移動優先方法設計，因此在桌面、移動和平板設備上都很出色
快速且簡單的設置
支持常見的觸控手勢，如雙擊、縮放（用於圖像查看）、水平滑動等
從文本鏈接或縮略圖像鏈接中打開 lightbox 彈窗
與 WordPress 多站點兼容
自動識別熱門視頻網站，例如 YouTube、Vimeo 等，以便在 lightbox 中輕鬆檢視
支持硬體加速動畫以提高性能
在網站的任何地方（文章、頁面、主頁等）使用簡單的短碼彈出 lightbox 中的內容
使用 CSS 創建的圖形（包括加載圖標）保持輕量級
使用 CSS 自訂視覺效果和佈局
如何使用 WP fancybox
在 lightbox 中顯示圖像
創建一個新文章/頁面，並使用以下短碼創建文本/圖像鏈接，單擊後將彈出 lightbox:
[wp_fancybox_media url="https://example.com/wp-content/uploads/images/overlay.jpg" hyperlink="點擊此處以彈出圖像"]
這裡，url 是您希望在 lightbox 中打開的媒體文件的鏈接，而 hyperlink 是錨文本/影像。
[wp_fancybox_media url="https://example.com/wp-content/uploads/images/overlay.jpg" hyperlink="https://example.com/wp-content/uploads/images/thumb.jpg"]
在 lightbox 中顯示 YouTube 視頻
[wp_fancybox_media url="https://www.youtube.com/watch?v=Vpg9yizPP_g" hyperlink="點擊此處以彈出 youtube 視頻"]
在 lightbox 中顯示 Vimeo 視頻
[wp_fancybox_media url="https://vimeo.com/1084537" hyperlink="點擊此處以彈出 vimeo 視頻"]
在 lightbox 中顯示標題
[wp_fancybox_media url="https://example.com/wp-content/uploads/images/overlay.jpg" caption="覆蓋圖像" hyperlink="點擊此處以彈出圖像"]
圖像的替代文字
[wp_fancybox_media url="https://example.com/wp-content/uploads/images/overlay.jpg" caption="覆蓋圖像" hyperlink="https://example.com/wp-content/uploads/images/thumb.jpg" alt="縮略圖像說明"]
自定義 CSS
您可以在短碼中指定自己的 CSS 類以自定義文本/圖像鏈接。
[wp_fancybox_media url="https://www.youtube.com/watch?v=Vpg9yizPP_g" hyperlink="點擊此處以彈出 youtube 視頻" class="自定義類"]
多個 CSS 類之間可以用空格隔開。例如：
[wp_fancybox_media url="https://www.youtube.com/watch?v=Vpg9yizPP_g" hyperlink="點擊此處以彈出 youtube 視頻" class="自定義類 自定義類2"]
有關詳細文檔，請訪問WP fancybox外掛頁面
外掛標籤
開發者團隊
📦 歷史版本下載
原文外掛簡介
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"]
Alternate Text for an Image
[wp_fancybox_media url="https://example.com/wp-content/uploads/images/overlay.jpg" 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
