內容簡介
此外掛是 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.
