Life is Adventure!

Fliptoast | Home | Chromeウェブストア65万本

fancybox

写真を拡大表示するときに使うスクリプトで2010年から利用。昨年末にV2になっていることを知ったので見直した。写真だけでなくテキストやWebページ、YouTubeなどの動画もポップアップ表示できるようになった。ただしHTML5 video対応はされていない。

コントロールボタンの機能が追加され、スライドショー表示ができるようになった。iPadでも機能するので、長年愛用したImageRotatorの代わりに使える。

001 002 003 004 005

Fancyboxカストマイズ

使い方

HEADで下記のCSS/JSを呼び出す。
$lt;link rel="stylesheet" href="http://agorian.com/script/fancybox/source/fancybox.css" /> $lt;script type="text/javascript" src="http://agorian.com/script/fancybox/source/fancybox.js">$lt;/script> $lt;script type="text/javascript"> $(document).ready(function() { $('.fancybox').fancybox(); $('.controls').fancybox({ padding: 5, openEffect : 'elastic', openSpeed : 300, closeEffect : 'fade', prevEffect : 'none', nextEffect : 'fade', nextSpeed : 600, closeBtn : false, helpers : { title : { type : 'outside', css : {'color':'#333333'}}, buttons : {}, overlay : { css : {'background' : 'rgba(38,38,38,0.85)'}} }, afterLoad : function() { this.title = ' ' + (this.index + 1) + ' / ' + this.group.length + (this.title ? ' - ' + this.title : ''); } }); }); $lt;/script>
Aタグで class="controls" group="button" を書く。
〔例〕<a class="controls" group="button" href="img/001.jpg">拡大表示</a>
拡大表示
今日の言葉: 

counter