前言介紹
- 這款 WordPress 外掛「Image & Video Lightbox」是 2023-06-12 上架。
- 目前有 10 個安裝啟用數。
- 上一次更新是 2023-06-13，距離現在已有 691 天。超過一年沒更新，安裝要確認版本是否可用。以及後續維護問題！
- 外掛最低要求 WordPress 5.8 以上版本才可以安裝。
- 外掛要求網站主機運作至少需要 PHP 版本 7.4 以上。
- 尚未有人給過這款外掛評分。
- 還沒有人在論壇上發問，可能目前使用數不多，還沒有什麼大問題。
外掛協作開發者
外掛標籤
image | video | blocks | gallery | lightbox |
內容簡介
外掛介紹：自動為 WordPress（古騰堡）相簿和圖片區塊，以及 GenerateBlocks 圖片區塊顯示的圖片添加 Lightbox 功能，還包括使用核心 Video Block 創建的影片，並使用 FSlightbox 库。此外掛具有輕量級的特性，不需要手動一一設置每個圖片和影片的鏈結，節省時間。你還可以通過添加 no-lightbox 類別，從光箱功能中排除特定的圖片或影片。
1. 這款外掛可以自動為哪些元素添加 Lightbox 功能？
- 古騰堡相簿和圖片區塊
- GenerateBlocks 圖片區塊
- 核心 Video Block 創建的影片
2. 如何排除某些圖片或影片不使用光箱功能？
- 添加 no-lightbox 類別
3. 透過使用此外掛，原始圖片和影片標籤是否會被更改？
- 不會，外掛將在每個圖像和使用上述區塊的影片上自動添加包裝器鏈結和必要屬性以添加光箱功能。因此，它不會對您的原始圖像和影片標籤進行任何更改，也不會向您的頁面 HTML 添加額外的權重/ DOM 深度。
4. 此外掛預設僅與哪些 WordPress 原生區塊一起使用？
- WordPress 相片庫、圖片和影片區塊以及 GenerateBlocks 圖片區塊
5. 如何啟用預設未啟用的 hover CSS？
- 使用過濾器進行啟用。
原文外掛簡介
Automatically adds Lightbox functionality to images displayed by WordPress (Gutenberg) Gallery and Image Blocks, as well as GenerateBlocks Image Blocks, and also videos created by the core Video Block, using the FSlightbox library.
This lightweight plugin will automatically adds Lightbox functionality to all images displayed by
the Core Gallery Block,
the Core Image Block,
GenerateBlocks Image Block,
and videos displayed by
the core Video Block
without the needs to set each gallery/image and video link to the media file so you don’t need to set them manually one by one.
Note: You can exclude specific image/video from getting the lightbox functionality by adding no-lightbox class to the image/video element.
About The Plugin
This plugin has no settings (you can customized the default configuration using filters), hence does not add any data to the database, so you don’t need to worry about ‘database leftovers’ if you deactivate the plugin.
This plugin will automatically add the wrapper link with the necessary attribute on each image and videos that uses the blocks mentioned above to add the lightbox functionality using a few lines of inline script. So it will not make any changes to your original image and video tags (if you check from the page’s HTML source), and will not add extra weight / DOM depth to your page’s HTML.
By default, this plugin only works with the native WordPress Gallery, Image, and Video Blocks, as well as GenerateBlocks Image Blocks. You can add additional selectors using filters to make this functionality also works with other image/video blocks. If you need to, send me a request to have your image/video block included by default.
This plugin will only enqueued its assets (1 JS file) to pages/posts that use blocks, and will not enqueue assets if the page/post doesn’t use one of them.
I provided simple hover CSS which are not enabled by default. You can enable it using filter (see below).
To add other image/video block:
Add the CSS class uses by the image/video block element, e.g:
add_filter( 'use_lightbox_in', function($use_lightbox_in) {
return $use_lightbox_in . ',.your-other-plugin-block-image-parent-element img, .your-other-plugin-image-class';
} );
Add the block info/name so that this plugin will enqueued the FSlightbox JavaScripts if the block is use in a post/page, e.g:
add_filter( 'use_lightbox_if', function($use_lightbox_if) {
return $use_lightbox_if . '|| has_block( "kadence/advancedgallery" ) || has_block( "your-plugin-block-name/the-block-name" )';
} );
To only enable Lightbox Functionality on certain page/post types:
Simply use the wp_dequeue function**, e.g.:
add_action( 'wp_enqueue_scripts', function() {
if ( ! is_singular('post') ) { // only enable in single post type
wp_dequeue_script( 'image-video-lightbox' );
}
});
To only enable simple hover CSS:
add_filter('use_lightbox_css', function () {
return true;
});
Why using FSlightbox?
FSlightbox is Vanilla Javascript Lightbox Library written in pure JavaScript without jQuery or any other additional dependencies. It’s lightweight (around 9kb *gzip)!
The JavaScript is delayable (*yes, it’s important for me). This is the only lightbox library I found that works when the JavaScript is delayed.
My other Plugins:
Optimize More! – A DIY WordPress Page Speed Optimization Pack. Features:
Load CSS Asynchronously – selectively load CSS file(s) asynchronously on selected post/page types.
Delay CSS and JS until User Interaction – selectively delay CSS/JS load until user interaction on selected post/page types.
Preload Critical CSS, JS, and Font Files – selectively preload critical CSS/JS/Font file(s) on selected post/page types.
Remove Unused CSS and JS Files – selectively remove unused CSS/JS file(s) on selected post/page types.
Load Gutenberg CSS conditionally – Load each CSS of the core blocks will only get enqueued when the block gets rendered on a page.
Advance Defer JS – hold JavaScripts load until everything else has been loaded. Adapted from the legendary varvy’s defer js method *recommended for defer loading 3rd party scripts like ads, pixels, and trackers
Defer JS – selectively defer loading JavaScript file(s) on selected post/page types.
Remove Passive Listener Warnings – Remove the “Does not use passive listeners to improve scrolling performance” warning on Google PageSpeed Insights
Lazyload, Preload, and more! – This tiny little plugin (around 14kb zipped) will automatically:
lazyload your below the fold images/iframes/videos,
preload your featured images,
and add loading="eager" to your featured image and all images that have no-lazy or skip-lazy class.
Shop Extra – A lightweight plugin to optimize your WooCommerce & Business site:
Floating WhatsApp Chat Widget (can be use without WooCommerce),
WhatsApp Order Button for WooCommrece,
Hide/Disable WooCommerce Elements,
WooCommerce Strings Translations,
and many more.
Animate on Scroll – Animate any Elements on scroll using the popular AOS JS library simply by adding class names. This plugin helps you integrate easily with AOS JS library to add any AOS animations to WordPress. Simply add the desired AOS animation to your element class name with “aos-” prefix and the plugin will add the corresponding aos attribute to the element tag.
各版本下載點
- 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
- 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「Image & Video Lightbox」來進行安裝。
（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。
延伸相關外掛（你可能也想知道）
Image Optimization by Optimole – Lazy Load, CDN, Convert WebP & AVIF, Optimize Images 》, Optimole的獨特之處在哪裡？, , 更小的圖片，同樣的品質, 完全自動化；設定一次就忘記它, 支援所有圖片格式, 支援Retina和WebP圖片, 以機器學習為基礎的自...。
Imsanity 》使用 Imsanity，自動調整大型圖片上傳大小。選擇你喜歡的尺寸和品質，讓 Imsanity 完成其餘所有工作。當投稿者上傳大於配置尺寸的圖片時，Imsanity 將自動將...。
Firelight Lightbox 》Easy FancyBox WordPress外掛為您的網站提供靈活美觀的光箱解決方案，幾乎適用於網站上的所有媒體連結。Easy FancyBox使用更新的傳統FancyBox jQuery擴展版本...。
Simple Lightbox 》Simple Lightbox 是一個非常簡單且可自定義的燈箱，在您的 WordPress 網站上添加它非常容易。, 功能, 自定義燈箱行為的選項位於外觀 > Lightbox 管理員菜...。
Robin image optimizer — save money on image compression 》需要專業支援嗎？, 開始免費支援, 開始高級支援, 透過減少圖像大小，讓您的網站加快速度。我們的 WordPress 圖像優化外掛，可以將圖像大小減少80%，而且不損...。
Responsive Lightbox & Gallery 》提供完整的 WordPress 相簿外掛所需一切, Responsive Lightbox and Gallery 外掛是一個全功能的 WordPress 相簿外掛，擁有強大的拖放相簿生成器和 Lightbox ...。
reSmush.it : The original free image compressor and optimizer plugin 》reSmush.it Image Optimizer 是一個 WordPress 外掛，透過 reSmush.it API 提供圖片優化服務。reSmush.it 使用多種高級演算法對圖像進行大小減小。API 支援最...。
Menu Image, Icons made easy 》這個外掛可以輕鬆地在選單項目中加入圖像或圖示，打造更好的網站選單。, 可以控制圖像或圖示的位置以及大小。, 這個 Menu Image 外掛還有其他功能，以下是其...。
Image Widget 》Image Widget 是一個簡單的外掛程式，利用 WordPress 原生媒體管理員，為您的網站新增圖片小工具。, 需要新增幻燈片、燈箱或隨機圖像嗎？, 請查看 Image Widg...。
Featured Image from URL (FIFU) 》h3>WordPress 外掛 - 用於顯示外部特色圖片、影片、音訊等等, FIFU 自 2015 年來已幫助全球數千個網站節省了儲存空間、處理時間和版權費用。, 如果您已經厭倦...。
Default Featured Image 》在媒體設定頁面上新增一個預設的特色圖像。如果沒有設定任何特色圖像，這個預設的特色圖像就會顯示。就這麼簡單。, 查看常見問題以獲取基本問題資訊。, 如果...。
All In One Favicon 》查看最新的WordPress交易以優化您的網站。, All In One Favicon為您的網站和管理頁面添加favicon。, 您可以使用您已經上傳的favicon或使用內置的上傳機制將fa...。
ImageMagick Engine 》透過讓 WordPress 使用 ImageMagick 而非標準的 GD 圖像庫，大幅提升重新調整大小的圖像品質。, 功能, , 在重新調整大小的圖像中保留嵌入式色彩設定檔, 自動...。
WP Featherlight – A Simple jQuery Lightbox 》WP Featherlight 是一個 WordPress 外掛，可為您的WordPress 網站添加一個極簡、高效、響應式 jQuery 燈箱。在其核心，WP Featherlight是一個用於 Featherlig...。
Phoenix Media Rename 》通過使用「Phoenix Media Rename」外掛，將您的媒體檔案重新命名，極大地提高您的 SEO。, 在Phoenix Media Rename 官方頁面上提供了完整的使用和設置指南。。