画像を拡大して表示させる
このスクリプトの内容について
$(function()
{

 //----------------------------------------------
 // 変数宣言
 //----------------------------------------------
 var viewTop = 20;
 var imgPath = './img/';

 //----------------------------------------------
 // コントローラーの設定
 //----------------------------------------------
 $("#clickImgArea img").click(imgOn);
 $("#viewMat, #lImg").click(imgOff);

 //----------------------------------------------
 // 初期処理
 //----------------------------------------------

 //----------------------------------------------
 // メソッド
 //----------------------------------------------

 /*
  *
  * マウスオーバー時の画像表示用メソッド
  *
  */
 function imgOn()
 {

  //画像を切り替えたいんです。先に
  var myImgSrc = $(this).attr('src');
  imgNum  = myImgSrc.match(/[0-9]/ig);
  imgType = myImgSrc.match(/(\.jpg|\.gif|\.png)/ig);

  $("#lImg img").attr('src',imgPath+imgNum+'_main'+imgType);


  $("#viewMat").css(
   {
    "width":$(window).width()+'px',
    "height":$(window).height()+'px'
   }
  )
  .show();

  $("#lImg").css(
   {
    'position':'absolute',
    'top':$(window).scrollTop()+viewTop+'px',
    'left':Math.floor(($(window).width() - 550) / 2)+'px'
   }
  )
  .fadeIn(1500);

 }


 function imgOff()
 {

  $("#lImg").fadeOut(1000,function()
   {
    $("#viewMat").fadeOut(500);
   }
  );
 }

 /*
  * $(window).width() 実行段階のウインドウサイズ
  * $(window).scrollTop() 実行段階のウインドウの上端の位置
  *
  *
  *
  *
  */

});

/*
 * 処理の詳細とメモ
 *
 * ■処理の順番と解説
 *   まずはhtml側で、拡大画像を表示させる領域と、暗幕用の要素を追加しておき、displey:noneで隠しておきます。
 *   で、画像(サムネイル的な)にclickイベントを、拡大画像、暗幕要素にもclick要素を付与させます。
 *
 *   拡大画像表示処理内容
 *     ※今回、ちょっと時間が無かったので
 *       ● 拡大画像のアップ場所(ディレクトリ)は固定であるものとしています。
 *       ● 画像名も固定で
 *          サムネイルは：[0-9][拡張子]
 *          拡大画像は ：[0-9]_main[拡張子]
 *          としています。
 *     1：クリックされた画像のsrcを取得します。
 *     2：srcの中から、数値を取り出します。
 *     3：srcの中から、拡張子を取り出します。
 *     4：拡大画像表示部分のimgのsrcに [固定画像パス][クリックされた画像数値]_main[取得した拡張子]とし、画像の差し替えを行います。
 *     5：暗幕要素の大きさを、現在のウインドウサイズに合わせます。
 *        $(window).width()は、現在のウインドウサイズ(幅)
 *        $(window).height()は、現在のウインドウサイズ(高)
 *        なので、画面いっぱいに広がる事になります。
 *     6：まず、暗幕要素を表示させます。
 *     7：拡大画像のpositionをabsoluteとし、画面左上から～とします。
 *     8：上からの表示位置を、画面最上部から+20とします。
 *        $(window).scrollTop()で現在の画面の最上部を取得する事ができます。
 *     9：左からの表示位置を、画面中央に寄せます。
 *        画面中央を取得するには
 *        [(現在の横サイズ-画像横サイズ) / 2]の計算が必要になります。
 *        $(window).width()で現在の画面横幅が取得できます。
 *        Math.floorで小数点以下を切り捨てます。
 *    10：fadeIn(1500)で1.5秒かかって画像表示をさせます。
 *
 *   拡大画像非表示処理内容
 *     拡大画像と暗幕要素をクリックしたときに実行されます。
 *     1：まず、拡大画像を1秒かかってフェードアウトさせます。
 *     2：拡大画像のフェードアウトが完了したら、暗幕要素を0.5秒かかってフェードアウトさせます。
 *
 *
 */

© Company 2012