网页设计% jQuery 分享真的牛的响应式灯箱特效FANCYBOX

乳題

當時身為一個還不會自己寫js特效的菜鳥, 看到別人使用燈箱效果真的是驚為天人, 就也想自己也套用看看,
個人覺得fancybox 的效果非常好, 有多樣的彈出特效, 內容方面不僅Ajax requests, FLASH當然也支持 (目前沒碰過…), 重點 iframe 嵌入也極度好用, 也支援滑鼠滾輪事件(須加載mouse wheel plugin)以及rel group換張……等, 這邊做為紀錄及分享這個好用的效果~

更支持螢幕的縮放~對於RWD開發的我可謂好上加好~(讚)

廢話好多, 上官網
　
http://fancybox.net/

使用的方法也很簡單, 就是加載庫, 然後在頁面呼叫執行, 官方說明也很清楚~

http://fancyapps.com/fancybox/

載點裡頭也完整就不多說了

需要提醒的是, 如果使用iframe的話需要在頁面加入這行
　
　　　

<script type="text/javascript">
        $(document).ready(function () {
            $("a#ID").fancybox();
            $("a.CLASS").fancybox({     <--this
                'type': 'iframe'
            });  
        });
 </script>

其實就是選取id 為ID的 a標籤 執行fancybox , iframe則是class為CLASS的a標籤執行fancybox, 給他type是iframe, 就這麼簡單~
(但如果內嵌網頁的話裏頭的page也要自適應就是了)

一些內步細節的調整再fancybox.pack.js以及 css 之中都可以簡單修改
像是有時移動設備的開發, 小螢幕需要調整一下大小即可~

---

感謝感謝