Blog

Fancyboxのようにサムネイルから飛び出してくるようなjQueryを組んでみる

2014.01.07Cat:javascript jQuery デザイナー

ライトボックス系のjQueryプラグインであるFancyboxでは、

サムネイルをクリックすると、そこから画像が飛び出してくるような効果をつけることができ、

個人的に好きなので、よく使っています。

 

この効果を、自分でも組むことができるようになりたかったので、

実際にjQueryを使って組んでみました。

 

今回はせっかくなので、

画像を読み込んでいる間に、サムネイル上にローディングアニメーションを表示する効果も一緒に組んでみました。

 

↓こちらがそのDEMOです。

DEMO

 

手順

今回は、aタグでリンクの指定された画像をターゲットとして、

リンク先の画像をモーダルウィンドウで表示することを想定しました。

 

ターゲットとなるHTMLの例です。

 

JavaScript

はじめに初期設定をします。

後々調整が必要な情報はココでまとめて設定しておくと調整が楽ですし、

プラグイン化することになったときにも、スムーズにoptionの設定ができます。

 

 

ローディング画像の表示

今回はGIFアニメーションではなく、

下のような画像を用意し、

loading image

CSSのbackground-positionで背景画像の表示位置をずらすことで、

アニメーションすることにしました。

 

手順としては、

  1. サムネイル画像の大きさとウィンドウ上の位置を取得する
  2. サムネイル画像上(aタグの末尾)にローディング画像の背景と、ローディング画像を配置
  3. リンク先の画像が読み込まれるまでアニメーションを表示し、読み込まれたらローディング画像を削除する

という流れです。

 

まず、クリックされたタイミングで、クリックされたサムネイル画像の大きさとウィンドウ上の位置を取得します。

 

そしてその情報をもとに、ローディング画像を設置します。

 

さらに、setIntervalを使って、アニメーションを実行します。

 

最後に、リンク先の画像が読み込み終わったら、アニメーションを 停止し、削除します。

 

モーダルウィンドウの表示

いよいよ、 サムネイルから画像が飛び出すようなモーダルウィンドウを表示します。

手順としては

  1. 必要な情報を取得し、画面いっぱいに画像を拡大したときの大きさを計算
  2. リンク先の画像を読み込んでbodyの末尾に設置し、CSSでサムネイルと重なるように配置する
  3. モーダルウィンドウの背景をフェイドインさせながら、画像を画面いっぱいに拡大するアニメーションを表示

という流れになります。

 

まず準備として、ウィンドウサイズを取得し、画像を拡大したときの大きさを計算します。

リンク先の画像の大きさの取得は、画像が読み込み終わったタイミングになるよう、loadイベントの後で行います。

ウィンドウの大きさから最初に設定した余白の大きさを引いた値を最大値として、

幅、高さの順に画像を計算しています。

 

次に、body末尾に設置し、CSSを調整します。

サムネイル画像の情報はすでにローディング画像の設置のときに取得しているので、

それをつかってCSSを調整します。

 

そして、モーダルウィンドウの背景をフェイドインさせながら、画像を画面いっぱいに拡大するアニメーションを表示します。

背景設定のときに、背景をクリックしたときにモーダルウィンドウを閉じる設定も一緒に行っています。

 

これで一連の動きができました。

実際のコード全体はこちらです。

 

 

 

 

 

 

Author Profile

ninomiya
ninomiya

Webデザイナー兼コーダーです。
イラストを描くのも好きです。
SVGとCanvasを使ったWEBアプリにも興味があります。
よろしくお願いいたします。

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ