最近このfancyboxを使う機会が多い。とっても簡単にしかもおしゃれに画像を拡大させることができるのでご紹介します。jQueryを使うだけでダイナミックな演出が簡単に出来てしまうので超便利!!
jQueryが得意でない方も是非チャレンジしてみてください!! ちなみにこのブログでもfancyboxを使っています。画像をクリックすると画像が拡大されるやつです。
目次
手順
ファイルをダウンロード
公式サイトから最新版をダウンロード
http://fancyapps.com/fancybox/#license
ダウンロードした圧縮データの中身は色々とあるけれど、とりあえずsorceフォルダにある以下の3つがあれば動く。
jquery.fancybox.js
jquery.fancybox.pack.js
jquery.fancybox.css
それ以外はオプションだが、使いこなすとただ画像を拡大するだけでなくタイトル(キャプション)を付けたりできるので便利。
ソースにjQueryとfancyboxのjs、cssファイルを読み込む
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!-- 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を付与
1 2 3 4 5 |
<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>直前にプログラムコードを記入
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<script type="text/javascript"> $(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 |
jQueryはやっていてとってもおもしろいので、今後も色々とご紹介しようと思います!!
LEAVE A REPLY