FancyBoxの設置方法
Lightbox系のjqueryプラグイン、FancyBoxを設置したので、その設置方法を書き残します
。
同じ系統のプラグイン、shadowboxを設置していたんですが、pdfファイルを追加する必要が出てきた為調べると、このFancyBoxが出てきました。
自身でjavascriptを設置するのは初めてだったのですが、デザインもシンプルで大変満足しております。
・まず、こちら
fancyBox - Fancy jQuery Lightbox Alternative
から最新版をダウンロード。20140822現在、v2.1.5でした。
・解凍後、
jquery.fancybox.js、jquery.fancybox.pack.js、jquery.fancybox.css
上記ファイル及び、全png、gifファイルを任意の場所にコピペ
(今回作成したwebアプリでは、js、css、imageごとに管理していたので、それぞれの場所に設置しました。)
jquery自体はもう設置済みだったので、今回sourceフォルダ内以外のファイルは使いませんでした。
・FancyBoxを使いたいhtmlファイルの<head>内に
<script src="../js/jquery.fancybox.pack.js"></script>
<link rel="stylesheet" type="text/css" href="../css/shadowbox.css">
<link rel="stylesheet" type="text/css" href="../css/jquery.fancybox.css">
<script type="text/javascript">
$(document).ready(init);
function init(){
$(".fancybox").fancybox({
});
};
</script>
<script type="text/javascript">
$(document).ready(function($){
$('a[href$=".jpg"] , a[href$=".gif"] , a[href$=".png"], .fancybox').fancybox();
$('a[href$=".pdf"]').fancybox({
autoSize: true,
width:'90%',
height:'90%',
type:'iframe',
iframe: {
preload: false
}
});
});
</script>
と記入
※出来るだけ大きく表示させたいとのことだったので、widthとheigftの2行のみ追記しました。
・最後に、表示させるimgファイルに
class="fancybox"
を当てれば完了です。
(例：<a href="●●●.pdf" class="fancybox"><img src="icon/●●●.jpg" alt=""/></a>)
