[WordPress] 外掛分享: WP fancybox

WordPress 外掛 WP fancybox 的封面圖片。

前言介紹

  • 這款 WordPress 外掛「WP fancybox」是 2017-05-13 上架。
  • 目前有 1000 個安裝啟用數。
  • 上一次更新是 2024-11-12,距離現在已有 172 天。
  • 外掛最低要求 WordPress 4.7 以上版本才可以安裝。
  • 有 2 人給過評分。
  • 還沒有人在論壇上發問,可能目前使用數不多,還沒有什麼大問題。

外掛協作開發者

naa986 |

外掛標籤

image | photo | gallery | fancybox | lightbox |

內容簡介

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"]

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

各版本下載點

  • 方法一:點下方版本號的連結下載 ZIP 檔案後,登入網站後台左側選單「外掛」的「安裝外掛」,然後選擇上方的「上傳外掛」,把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
  • 方法二:透過「安裝外掛」的畫面右方搜尋功能,搜尋外掛名稱「WP fancybox」來進行安裝。

(建議使用方法二,確保安裝的版本符合當前運作的 WordPress 環境。


最新版本

延伸相關外掛(你可能也想知道)

  • Firelight Lightbox 》Easy FancyBox WordPress外掛為您的網站提供靈活美觀的光箱解決方案,幾乎適用於網站上的所有媒體連結。Easy FancyBox使用更新的傳統FancyBox jQuery擴展版本...。
  • ACF Photo Gallery Field 》t; 'Status', , 'name' => 'status', , 'choices' => array(, 'public' => 'Public', , 'private' => ...。
  • LightPress Lightbox 》這個外掛讓你保留了超棒的 Lightbox 2功能,卻移除了Prototype框架和Scriptaculous效果庫的大部分體積。, Warren Krewenki將Lightbox移植到了jQuery,而這個...。
  • Image Watermark 》Image Watermark 外掛能讓您自動給 WordPress 媒體庫上傳的圖片打上浮水印,也可大量添加浮水印到之前上傳的圖片之中。, 欲進一步瞭解,請前往dFactory的外掛...。
  • Easy Watermark 》Easy Watermark 可以在圖片上傳到 WordPress 媒體庫時自動加上浮水印。您還可以手動添加浮水印到現有的圖片(全部一次或每個圖片)。浮水印可以是圖像、文字...。
  • WP Photo Album Plus 》此外掛不僅僅是一個相簿外掛,更是一個完整且高度自訂的多媒體內容管理和展示系統。, 特色包括:, , 任意數量的相簿,包含任意類型的多媒體檔案,以及子相簿,...。
  • Advanced Image Styles 》在 WordPress 的可視化編輯器中輕鬆調整圖片的邊界和邊框。。
  • Import External Images 》此外掛會將文章中所有連結的圖片下載到本地並該圖片添加至相簿附件中。, 特色功能, 感謝, 此外掛是基於 http://www.bbqiguana.com/ 的「Add Linked Images to...。
  • WP Paint – WordPress Image Editor 》WP Paint – WordPress Image Editor 是一個基於瀏覽器的 HTML5 影像編輯器,可以用於 WordPress 的媒體圖像。它有一個直觀的界面,與大多數常見的桌面...。
  • WP Colorbox 》WordPress Colorbox 外掛是一個簡單的 Lightbox 工具,適用於 WordPress。它使用受歡迎的 jQuery ColorBox 庫,允許用戶在 Lightbox 中彈出內容。用戶還可以...。
  • Flickr Justified Gallery 》這個外掛讓你可以在部落格中以非常優雅且炫酷的佈局方式,顯示你的 Flickr 照片流、相簿、畫廊、群組池或標籤。, 創建一個具有 Flickr 或 Google+ 相同風格的...。
  • Easy Image Collage 》使用 Easy Image Collage 輕鬆地將響應式圖片拼貼網格添加到您的文章、頁面或任何自定義文章類型中。類似於 Diptic、Pic Jointer 和 Instagram Layouts 等應...。
  • Faster Image Insert 》Faster Image Insert 的目標是執行一項正確的事情:, 將內建的媒體管理器下移至一個元框中,直接放在主編輯面板旁邊,讓您完全掌握管理器:打開它,使它折疊...。
  • Import external attachments 》此外掛會製作文章中所有連結圖片與 PDF 的本機複本,並將它們新增為圖片集附件。, 來源與支援:, https://github.com/ryanpcmcquen/import-external-attachme...。
  • WP-SimpleViewer 》WP-SimpleViewer外掛讓你能夠輕鬆地在WordPress中創建SimpleViewer圖庫。 SimpleViewer是一款免費、可自定義的Flash圖片庫。圖片和說明文字可以從WordPress媒...。

文章
Filter
Apply Filters
Mastodon