Fancybox 3備忘

最近在修改舊網頁，將Fancybox 1.3升級到3.3.1，以下記錄版本間的異動差異。

引用

Fanycbox 3適用於jQuery 1.9.1+、jQuery 2+與jQuery 3+，以使用jQuery 3+為佳。

• 使用CDN

https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.1/jquery.fancybox.css

https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.1/jquery.fancybox.js

或

https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.1/jquery.fancybox.min.css

https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.1/jquery.fancybox.min.js

• 下載：
  由GitHub下載：GitHub – fancyapps/fancybox: jQuery lightbox script for displaying images, videos and more. Touch enabled, responsive and fully customizable.
• 使用npm安裝

npm install @fancyapps/fancybox --save

使用iframe開啟網頁的差異

以下是Fancybox 1.3的寫法：

      $.fancybox({
        type: 'iframe',
        modal: true,
        width: '80%',
        height: '80%',
        'autoScale': true,
        'transitionIn': 'fade',
        'transitionOut': 'fade',
        'href': '要使用的網頁?參數=參數值',
        onClosed: callBackFunction
      });

Fancybox 3的新寫法：

      $.fancybox.open({
        type: 'iframe',
        src: '要使用的網頁?參數=參數值',
        opts: {
          modal: true,
          afterShow: function (instance, current) {
            callBackFunction();
          }
        }
      });

另一個Fancybox 3的範例：

$.fancybox.open('<div class="message"><h2>Hello!</h2><p>You are awesome!</p></div>');

在開啟的網頁裡關閉自己的Fancybox 1.3寫法：

  $("#closeButton").click(function () {
    parent.$.fancybox.close();
  });

Fancybox 3寫法：

$("#closeButton").click(function () {
  parent.jQuery.fancybox.getInstance().close();
}  

注意事項

Fancybox 3只要用<a href就能產生開啟對話窗的效果，但href屬性一定要提供，例如：

  
    顯示項目
  

相關連結

• 官網：fancybox – Touch enabled, responsive and fully customizable jQuery lightbox script
• 說明：fancybox3 · Documentation

＃＃

您可能也會有興趣的類似文章

• [jQuery] 動態建立元素的事件觸發 (0則留言, 2015/10/25)
• FixedHeader.js：將網頁表格標題列固定住的程式 (0則留言, 2011/09/29)
• 用jQuery.formError取代alert( ) (0則留言, 2016/11/21)
• 替部落格的側邊欄位加上縮起與展開功能 (2則留言, 2007/03/18)
• 使用jQuery的效益 (0則留言, 2007/09/23)
• jQuery DataTables範例1：啟始設定 (0則留言, 2011/10/20)
• 在Xuite測試 jQuery (0則留言, 2007/09/12)
• jQuery在Xuite的測試 (0則留言, 2007/10/01)
• 初試AJAX：中文的傳遞與接收 (0則留言, 2007/03/16)
• 第4個jqGrid範例: 資料列處理 (15則留言, 2010/02/14)
• WordPress減肥記：壓縮JavaScript檔的大小 (6則留言, 2010/06/08)
• 第一個jqGrid範例：Local array (1則留言, 2010/02/13)
• 在Xuite裡使用jQuery的重點 (0則留言, 2007/09/22)
• 第3個jqGrid範例: XML與XML STRING格式 (2則留言, 2010/02/14)
• jQuery神奇的選擇器(Selector) (3則留言, 2007/09/28)