skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

skuare.netが紹介するJavaScirptでサイトをリッチに

jQueryでファンシーなLightBoxクローンを作る「Fancy Zoom」

twitterにつぶやく このエントリーを含むはてなブックマーク はてなブックマークを見るこの記事をクリップ! コメントを見るYahoo!ブックマークに登録 このエントリーをdel.icio.usに追加する deliciousブックマーク数このページを行き先登録 このページをniftyクリップに登録このページをBuzzurlに登録

爆発的な大ヒットとなったLightBoxですが、広まりすぎて先進的なイメージが薄れています。
そんな状況を打破すべくなのか、LightBoxのクローンは次々と生まれています。
今回紹介する「Fancy Zoom」もその一つで、昨今流行のJavaScriptライブラリjQueryを使用しています。
jQueryでファンシーなLightBoxクローンを作る「Fancy Zoom」サンプル

使用方法
使用方法は簡単です。
Fancy Zoomからダウロードしたファイルを以下のように記述します。
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="jquery.fancyzoom.js"></script>
<script type="text/javascript">
$(function() {
$.fn.fancyzoom.defaultsOptions.imgDir='閉じるボタンなどを置いた画像ディレクトリ'; // 最後は必ず/で終わってください。
$('.fancyzoom').fancyzoom();
});
</script>
あとは大きくしたい画像を下記の通り記述すれば完成です。
<a href="拡大画像" class="fancyzoom">
<img src="サムネイル画像" alt="キャプションです">
</a>

オプション

  • Speed: アニメーション速度(0でなし)
  • showoverlay: オーバーレイ (default true)
  • overlay: 透明度の変更 (default 0.6)
jQueryでファンシーなLightBoxクローンを作る「Fancy Zoom」サンプル

記事作成:2008年11月15日

follow me

▼jQueryでファンシーなLightBoxクローンを作る「Fancy Zoom」へのコメントはtwitterにて受け付けています。
twitterでコメントする twitterでコメントする

前の記事:mootoolsで、いい感じに横スクロールするJavaScript「mooHorizonSlider」
次の記事:Movable Type 4.xで「承認待ち」をメールで通知するプラグイン「EasyWorkflow」

ページの最初に戻る

about me

skuare

大学卒業後、某PR会社にてPR誌の取材・編集・デザインからPRコンサルティング、調査分析まで幅広い業務に携わる。業務の合間合間にWEB制作に関する技術を習得。
2007年6月から当サイト「skuare.net」を開始。その後、ホームページ制作会社に転職し、WEBサイト制作に本格的に従事し、CMS、JavaScriptに無駄に突っ込むディレクターとして活動中。ホロヨッターもやっています。
もし、もうちょっと詳細を見たかったら・・・・こちら >>

I'm @ Social media below

  • skuare.net rss
  • skuare's twitter
  • skuare's twitter
  • skuare's linkedin
  • skuare's facebook
Copyright (c) skuare.net All Rights Reserved.