iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 1
0
Modern Web

30天學習30套前端技術系列 第 1

fancyBox- 燈箱效果

安裝

將下方語法複製貼上 <head></head>

<!-- jQuery v1.9.1 -->
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
<!-- fancyBox v2.1.5 -->
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>

使用方法

將下方語法複製貼上 <body></body>

<a href="【原始圖片位置】" class="【自訂類別】">
	<img src="【縮圖位置】">
</a>
<script type="text/javascript">
	$( "【自訂類別】" ).fancybox();
</script>

範例(JS Bin)

支援度

  1. 瀏覽器: -
  2. RWD: -

延伸

fancyBox - Fancy jQuery Lightbox Alternative


系列文
30天學習30套前端技術1
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言