前言介紹
- 這款 WordPress 外掛「Ez Overlay」是 2010-11-04 上架。
- 目前有 10 個安裝啟用數。
- 上一次更新是 2010-11-05，距離現在已有 5293 天。超過一年沒更新，安裝要確認版本是否可用。以及後續維護問題！
- 外掛最低要求 WordPress 2.8 以上版本才可以安裝。
- 尚未有人給過這款外掛評分。
- 還沒有人在論壇上發問，可能目前使用數不多，還沒有什麼大問題。
外掛協作開發者
adam320 |
外掛標籤
popup | overlay | lightbox | shadowbox | buddypress |
內容簡介
此外掛是 jQuery 基礎燈箱系統的替代方案。它使用純 Javascript 開發，不依賴其他任何庫。作者在與 Buddypress 和 WordPress 中的 jQuery 衝突奮鬥了幾週後創建了這個簡單的燈箱。現有的許多基於 jQuery 的燈箱無法在關閉燈箱時停止 Flash/.swf 播放。此外掛會完全從 DOM 中刪除疊加內容，以確保在所有瀏覽器中停止您的 .swf 文件播放。
幫助
如何實現 Ez Overlay 燈箱：
將此範例代碼複製到 WordPress 編輯器的 HTML 窗口中，或從頭開始進行操作並進行第二步。
通過分配一個帶有 class=”ez-overlay” 的 Ez Overlay Div 元素為目標 div 分配一個獨特的 CSS Id，以避免 CSS 衝突，將其添加到您 HTML 的 body 中而不是在側邊欄或另一個 div 中。
為新的 Div 分配一個獨特的 CSS Id，以便可以通過觸發器激活。即：id=”my-overlay”。
在 Ez Overlay Div 中加入任何 Html 內容。
創建燈箱的觸發器，它可以是幾乎任何 Html 元素，但需要一個‘onclick’屬性來啟動燈箱。請參見下面的 ezFade() 函數。
提示：
IE7 會以不同的大小來呈現此疊加層中的文本元素。如果這是問題，只需使用內聯樣式為 Ez Overlay 目標 div 分配寬度和高度。
避免對 Ez Overlay 目標 div 添加填充或邊距。填充會增加 div 的寬度和高度，導致疊加層偏移。只需將元素添加到目標 div 內的邊距即可。
在名為 ‘uncompressed-js’ 的文件夾中，有一個名為 ‘ez-overlay.js’ 的文件，其中包含易於閱讀的可壓縮代碼副本以供操作。
此外掛在退出疊加層時會將其從 DOM 中刪除，以確保所有瀏覽器上都可以停止.swf 播放。不用擔心，此外掛會立即在最後將其返回到您 HTML 文檔的 body 中。
ezFade 函數：
onclick="ezFade('my-overlay4',800,true,100,100);"
ezFade() 函數接受五個參數，第一個是要觸發的目標燈箱，第二個是淡入時間。第三個引數是啟用“固定模式”，最後是 X/Y 座標，如果要使疊加層固定在特定位置。
原文外掛簡介
This plugin is an alternative to the jQuery based lightbox systems. It was created using pure Javascript and has no dependencies on any other libraries. I created this simple lightbox after weeks of dealing with jQuery conflicts within Buddypress and WordPress. Many of the existing jQuery type lightboxes do not stop audio playback for flash/.swf playback when closing the lightbox. This plugin completely removes the overlay content from the dom to make absolutely sure your .swf file playback is stopped in all browsers.
Help
How to implement the Ez Overlay lightbox:
Copy the code for this example into the WordPress editor in the HTML window or start from scratch and go to step 2.
Create an Ez Overlay Div element by assigning it a with the class=”ez-overlay”, to avoid css conflicts add your target div to the body of your html and not within a sidebar or another div.
Assign the new Div a unique CSS Id so it can be activated by the trigger. Ie: id=”my-overlay”.
Put whatever Html content within the Ez Overlay Div.
Create a trigger for the overlay, it can be just about any Html element but needs an ‘onlclick’ attribute to activate the lightbox. See the ezFade() function below.
Tips:
Ie7 will render text elements within this overlay at a different size than Ie8. If this is an issue, just assign a width and height to your Ez Overlay target div using an inline style.
Avoid padding or adding margins to the Ez Overlay target div. Padding adds to a div’s width and height and will throw your overlay off-center. Just add a margin to the elements within the target div instead.
In the folder named ‘uncompressed-js’, there is a file named ‘ez-overlay.js’ which is a readable copy of the compressed code for tinkering.
The plugin removes the overlay div’s from the dom when you exit out of them, this is so that .swf playback will be halted on all browsers. Don’t panic, the plugin immediately returns them to the body of your html document at the very end.
ezFade Function:
onclick="ezFade('my-overlay4',800,true,100,100);"
The ezFade() function accepts five arguments, the first being the target lightbox to be triggered, the second is the fade time. The third argument is to activate "fixed mode", and finally the x/y coordinates if you want you overlay to be fixed in a certain position.
各版本下載點
- 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
- 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「Ez Overlay」來進行安裝。
（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。
延伸相關外掛（你可能也想知道）
Shadowbox JS 》Shadowbox 是一款支援網路上所有最流行的媒體發佈格式的線上媒體觀看應用程式。Shadowbox 基於 JavaScript 和 CSS 撰寫，且高度可自訂。透過使用 Shadowbox，...。
Simplelightbox 》這個 simplelightbox WordPress 外掛將 simplelightbox jQuery 外掛帶到 WordPress 網站上。, 您可以在管理面板的 Design -> Simplelightbox 中更改燈箱的...。
CTC Masonry Gallery 🎨 》這個外掛讓你使用 Gutenberg 區塊來建立磚石圖片畫廊，並能夠於彈出式視窗中觀看圖片。。
Cookielay 》Cookielay：輕鬆管理 cookies 的方式, 使用 Cookielay，您可以符合隱私政策的方式輕鬆管理您網站的 cookies。將 cookies 加入、分配給群組，並定義允許或封鎖...。
Page Takeover 》在全屏彈窗中推廣您的內容！, Page Takeover 可讓您在不需要任何 HTML 或 CSS 的情況下，在您的博客或網站上創建一個令人驚嘆的全屏彈窗。, 只需安裝插件，選...。
Easy Popup Announcement 》Easy Popup Announcement能幫助你在WordPress網站上顯示彈出窗口/懸浮層/彈出覆蓋。它易於使用且直觀。 popup內容可在內容編輯器中管理，您可以添加文字、圖...。
DC – Full Screen Responsive Menu 》我們高度可定制的外掛程式使您能夠建立全螢幕響應式選單，提供多種可能的效果。這個選單會疊在所有內容上，默認情況下這使它非常時尚（這是現在網頁設計中最...。
Video Lightbox WooCommerce 》這個外掛可以讓你使用 Video Lightbox 特效來彈出 WooCommerce 產品縮略圖。您只需啟用此外掛，它就會自動覆蓋 WooCommerce 的燈箱選項，改為使用 Video Ligh...。
Overlay4WP 》功能：, 1. 除了 jQuery 庫之外，只需要加載一些小的 JS 文件和一些少量的 CSS 文件。, 2. 插件在頁面上生成的輸出代碼符合 W3C 的 XHTML 1.1 和 CSS 3 標準...。
Notification Widget 》Notification Widget 提供您在網站、部落格等位置插入和完整自定一個疊層小工具的功能。, 您可以在後台輕鬆更改整個疊層的所有設定。, 以下為您可以更改的設...。
New posts popup 》此外掛會顯示一個位於畫面上方的彈跳視窗（CSS圖層），顯示您上次訪問後的新文章和留言。使用cookie管理。, 更新資訊, 已修正與WordPress 2.3的相容性問題，...。
Grid Overlay Figma-Style 》外掛總結:
,- ,
- 這款外掛可以讓設計師和開發人員在他們的 WordPress 網站前端上覆蓋一個 Figma 風格的版面網格，...。
WP Hashgrid 》此外掛使用 hashgrid.js 腳本來覆蓋一個可以自訂 CSS 格線的網格。, 鳴謝, hashgrid.js 腳本由 Analog 創造，根據 Apache 2.0 許可條款授權。請至 https://gi...。
My FastAPP Photo Editor 》這個外掛可以幫助你自動創建 My FastAPP 的照片編輯功能配置文件。, 簡單又容易使用, 你只需要從 WordPress 媒體庫中選擇圖像，點擊按鈕獲得文件URL, 然後將...。