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

/ / WEB制作・開発デザイン

最近このfancyboxを使う機会が多い。とっても簡単にしかもおしゃれに画像を拡大させることができるのでご紹介します。jQueryを使うだけでダイナミックな演出が簡単に出来てしまうので超便利!!
jQueryが得意でない方も是非チャレンジしてみてください!! ちなみにこのブログでもfancyboxを使っています。画像をクリックすると画像が拡大されるやつです。

公式サイト
マニュアル

 

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

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

150509_photo002

 

手順

 

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

 

 

ファイルをダウンロード

 

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

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

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

 

 

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

 

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

 

 

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

 

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

 

 

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

 

 

オプション 指定可能な値 デフォルト値
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はやっていてとってもおもしろいので、今後も色々とご紹介しようと思います!!

SNS SHARE

LEAVE A REPLY