jQuery Fancybox

☞ 安裝

官方網址：http://fancyapps.com/fancybox/
下載網址：https://fancyapps.com/fancybox/3/

<script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>

☞ 語法

<script type="text/javascript">
	$(document).ready(function() {
		$(".fancybox").fancybox();
	});
</script>

//增加設定

	$(".fancybox").fancybox({
		'width'        : '30%',
		'height'        : '20%',
		'autoScale'      : false,
		'transitionIn'     : 'none',
		'transitionOut'    : 'none',
		'onClosed' : function() {alert('test');}
	});

☞ 顯示

<a class="fancybox" rel="group" href="big_image_1.jpg"><img src="small_image_1.jpg" alt="" /></a>
<a class="fancybox" rel="group" href="big_image_2.jpg"><img src="small_image_2.jpg" alt="" /></a>

☞ 範例

<script type="text/javascript">
$(function(){
    // 圖片說明在圖片之外，遮罩的速度0.5秒，透明度0.95幾乎不透明了。
    $(".cssname_1").fancybox({
        helpers: {
            title : {
                type : 'outside'
            },
            overlay : {
                speedIn : 500,
                opacity : 0.95
            }
        }
    });
  
    // 取消開啟與關閉圖片的動畫，圖片說明在圖片之上。
    $(".cssname_2").fancybox({
        openEffect  : 'none',
        closeEffect : 'none',
  
        helpers : {
            title : {
                type : 'over'
            }
        }
    });
  
    // 自訂css樣式，再點選一次就可以關閉圖片，白色的屏蔽，圖片說明在圖內。
    $(".cssname_3").fancybox({
        wrapCSS    : 'fancybox-custom',
        closeClick : true,
  
        helpers : {
            title : {
                type : 'inside'
            },
            overlay : {
                css : {
                    'background-color' : '#eee'
                }
            }
        }
    });
  
    // 開啟與關閉圖片的動畫設定為elastic，沒有屏蔽效果
    $(".cssname_4").fancybox({
        padding: 0,
  
        openEffect : 'elastic',
        openSpeed  : 150,
  
        closeEffect : 'elastic',
        closeSpeed  : 150,
  
        closeClick : true,
  
        helpers : {
            overlay : null
        }
    });
  
});
</script>