2015-02-02

讓fancybox支援上下頁切換/換頁 (v1.3.4)

(PS1 這是我去年9月修改的fancybox v1.3.4,現在的fancybox新版本不知有沒支援換頁了...似乎是還沒有)
(PS2 這LOGDOWN支援markdown,文章寫起來快多了,蠻適合我這種懶病常發作的人)
(PS3 ...還是XBOX 360好玩 XDDD)

老大叫俺把相簿功能看可不可以弄成到頭張或尾張時,會續跳上頁或下頁,

但俺找呀找的,因可能我的GOOGLE功力太爛,網路找不到現成的,只好自已動手(我還是習慣當伸手牌啊啊啊啊),

改完後,發現也不難改,還蠻簡單的...XD



這個修改有用到url parser外掛:
jquery.url.min.js

俺修改過後的fancybox (v1.3.4)
jquery.fancybox-1.3.4.pack.js

用法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<script src="//example.com/js/fancybox/jquery.fancybox-1.3.4.pack.js" type="text/javascript"></script>
<script src="//example.com/js/fancybox/jquery.easing-1.3.pack.js" type="text/javascript"></script>
<script src="//example.com/js/fancybox/jquery.mousewheel-3.0.4.pack.js" type="text/javascript"></script>
<script src="//example.com/js/jquery.url.min.js" type="text/javascript"></script>
<link href="//example.com/js/fancybox/jquery.fancybox-1.3.4.css" media="screen" rel="stylesheet" type="text/css">
<script type="text/javascript">
$(document).ready(function() {
$("a[rel=group]").fancybox({
'nextPage' :'http://nexpage.com?autoshow=first', /*下一個相簿網址,記得加get字串autoshow=first*/,
'prevPage' :'http://prevpage.com?autoshow=last', /*上一個相簿網址,記得加get字串autoshow=last*/,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'speedIn' : 600,
'speedOut' : 200,
'overlayShow' : true,
'titlePosition' : 'over'
});
//請添加以下四行,自動fire click
if($.url.param('autoshow') == 'first')
$.fancybox.autoshow('first');
else if($.url.param('autoshow') == 'last')
$.fancybox.autoshow('last');
});
</script>

沒有留言:

張貼留言