jQueryを使ったおしゃれな画像拡大の実現方法(fancybox)

最近このfancyboxを使う機会が多い。とっても簡単にしかもおしゃれに画像を拡大させることができるのでご紹介します。jQueryを使うだけでダイナミックな演出が簡単に出来てしまうので超便利!!

jQueryが得意でない方も是非チャレンジしてみてください!! ちなみにこのブログでもfancyboxを使っています。画像をクリックすると画像が拡大されるやつです。

公式サイト
マニュアル

fancyboxで出来ることはこんな感じ↓↓

画像をクリックすると拡大される↓↓

手順

ファイルをダウンロード
ソースにjQueryとfancyboxのjs、cssファイルを読み込む
該当箇所にidもしくはclassを付与
</body>直前にプログラムコードを記入

ファイルをダウンロード

公式サイトから最新版をダウンロード
http://fancyapps.com/fancybox/#license

ダウンロードした圧縮データの中身は色々とあるけれど、とりあえずsorceフォルダにある以下の3つがあれば動く。
jquery.fancybox.js
jquery.fancybox.pack.js
jquery.fancybox.css

それ以外はオプションだが、使いこなすとただ画像を拡大するだけでなくタイトル(キャプション)を付けたりできるので便利。

ソースにjQueryとfancyboxのjs、cssファイルを読み込む

<!-- jQuery の読み込み（必須） -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

<!-- fancyBox の読み込み（必須）-->
<link rel="stylesheet" type="text/css" href="/fancybox/jquery.fancybox.css">
<script type="text/javascript" src="/fancybox/jquery.fancybox.js"></script>

<!-- マウスホイールプラグイン (オプション) -->
<script type="text/javascript" src="/fancybox/jquery.fancybox.pack.js"></script>

<!-- Optionally add helpers - button, thumbnail and/or media -->
<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>

<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>

読み込みソースは適宜変える

該当箇所にidもしくはclassを付与

<a class="fancybox" data-fancybox-group="group1" href="/images/large-sample-picture1.jpg"><img src="/images/sample-picture1.jpg" alt=""></a>
<a class="fancybox" data-fancybox-group="group1" href="/images/large-sample-picture2.jpg"><img src="/images/sample-picture2.jpg" alt=""></a>
<a class="fancybox" data-fancybox-group="group1" href="/images/large-sample-picture3.jpg"><img src="/images/sample-picture3.jpg" alt=""></a>
<a class="fancybox" data-fancybox-group="group1" href="/images/large-sample-picture4.jpg"><img src="/images/sample-picture4.jpg" alt=""></a>
<a class="fancybox" data-fancybox-group="group1" href="/images/large-sample-picture5.jpg"><img src="/images/sample-picture5.jpg" alt=""></a>

ポイント1) class=”fancybox”の「fancybox」と、body直下に書く$(“.fancybox”)を合わせる。
ポイント2) data-fancybox-group=”goup名称”で画像を1つのグループ化にできる。

</body>直前にプログラムコードを記入

<script type="text/javascript">
$(document).ready(function() {
    $(".fancybox").fancybox({
        prevEffect  : 'none',
        nextEffect  : 'none',
        helpers : {
            title   : {
                type: 'outside'
            },
            thumbs  : {
                width   : 50,
                height  : 50
            }
        }
    });
});
</script>

$(document).ready(function() {

$(".fancybox").fancybox({

prevEffect : 'none',

nextEffect : 'none',

helpers : {

title : {

type: 'outside'

thumbs : {

width : 50,

height : 50

}

});

</script>

オプション	指定可能な値	デフォルト値
openEffect	‘elastic’, ‘fade’ or ‘none’	‘fade’
closeEffect	‘elastic’, ‘fade’ or ‘none’	‘fade’
nextEffect	‘elastic’, ‘fade’ or ‘none’	‘elastic’
prevEffect	‘elastic’, ‘fade’ or ‘none’	‘elastic’
openSpeed	ミリ秒で指定。または “slow”, “normal”, “fast”	250
closeSpeed	ミリ秒で指定。または “slow”, “normal”, “fast”	250
nextSpeed	ミリ秒で指定。または “slow”, “normal”, “fast”	250
prevSpeed	ミリ秒で指定。または “slow”, “normal”, “fast”	250