WordPress 投稿に挿入した画像を Lightbox のように表示

CATEGORY: WordPress | TAG: Lightbox, 添付ファイル

2013年7月7日

プラグインを使わずに投稿に挿入した画像を Lightbox のように表示する方法のメモ。

対象はその投稿に対してアップロードした画像。例えば、他の投稿に対してアップロードした画像を使用（挿入）している場合はこの方法ではその画像の情報は取得できないので正しく表示されない。

追記 2014年1月8日
過去にアップロードした画像を使用（挿入）している場合」にも（おそらく）対応する方法を「WordPress 投稿に挿入した画像を Lightbox のように表示（２）」として改めて書きました。

投稿のコンテンツを表示する部分を div 要素で囲み class を指定。

<div class="blog_content">
<?php the_content(); ?>
</div><!-- end of .blog_content -->

投稿に挿入した画像の HTML の出力は以下のようになる。

<div class="blog_content">
  <p>
    <a  class="mpg" href="http://www.wxxxx.com/jp/wp-content/uploads/sites/3/2013/07/2013_yy_4.jpg">
      <img class="alignnone size-medium wp-image-407" width="300" height="240" src="http://www.xxxx.com/jp/wp-content/uploads/sites/3/2013/07/2013_yy_4-300x240.jpg" alt="2013_yy_4">
    </a>
  </p>
</div>

img 要素のクラス名の「wp-image-407」の数値部分はメディアのID

「メディアを追加」で挿入した画像の情報を「get_posts」で取得

get_posts のパラメータを以下のように指定して画像の情報を取得する。

post_parent ： $post->ID
post_type ： attachment
post_mime_type ： image

取得した情報を p タグで出力し、CSS で非表示に設定する。

以下をテンプレート（single.php）のループの中に記述。

<div class="attached_img_info">
<?php    
  $attachments = get_posts( array(
    'post_parent' => $post->ID, 
    'orderby' => 'none',   
    'order' => 'ASC', 
    'post_status' =>  'inherit', 
    'numberposts' => -1, 
    'offset' => 0, 
    'post_type' => 'attachment', 
    'post_mime_type' => 'image',  
   ) );
  
  if ( $attachments ) {
    foreach ( $attachments as $attachment ) {      
      // $link_image_src にリンク先画像（添付ファイル）の指定したサイズの画像の情報を取得
      $link_image_src = wp_get_attachment_image_src($attachment->ID, 'large'); //'full'と指定すればフルサイズの画像の情報を取得
      echo '<p class="img_link">' .$link_image_src[0] .'</p>';  //URL
      echo '<p class="img_width">' .$link_image_src[1] .'</p>';  //幅
      echo '<p class="img_height">' .$link_image_src[2] .'</p>';  //高さ
      // タイトルを取得
      $title = esc_html(trim($attachment->post_title));  
      if($title) echo '<'.$tag.' class="img_title">' .$title.'</'.$tag.'>';                    
    } 
  }  
?>
</div>

CSSに以下を記述して非表示に。

div.attached_img_info {
  display: none;
}

または、テンプレートに記述するのではなく、以下のように functions.php に記述して、テンプレートには作成した関数（get_attached_images_info）を記述する。

以下の関数では、パラメータを指定することにより、出力するタグやリンクの画像のサイズを指定することも可能。

function get_attached_images_info($args = array()) {
  global $post;
  $defaults = array(
    'post_parent' => $post->ID,
    'orderby' => 'none',  
    'order' => 'ASC',
    'post_status' => 'inherit',
    'numberposts' => -1,  //全ての画像
    'offset' => 0,  //開始位置
    'tag'    => 'p',  //出力するタグ
    'link_size'  => 'large',  //情報を取得する画像のサイズ  
  );
  //パラメータを解析し、省略されたパレメータにはデフォルト値をセット
  $args = wp_parse_args( $args, $defaults ); 
  extract( $args, EXTR_SKIP ); //キーを変数名、値を変数の値として処理
    
  $attachments = get_posts( array(
    'post_parent' => $post_parent, 
    'orderby' => $orderby, 
    'order' => $order, 
    'post_status' => $post_status, 
    'numberposts' => $numberposts, 
    'offset' => $offset, 
    'post_type' => 'attachment', 
    'post_mime_type' => 'image',  
   ) );
  
  if ( $attachments ) {
    foreach ( $attachments as $attachment ) {      
      // $link_image_src にリンク先画像（添付ファイル）の$link_sizeで指定したサイズの画像のURLを取得
      $link_image_src = wp_get_attachment_image_src($attachment->ID, $link_size);
      echo '<'.$tag.' class="img_link">' .$link_image_src[0] .'</'.$tag.'>';
      echo '<'.$tag.' class="img_width">' .$link_image_src[1] .'</'.$tag.'>';
      echo '<'.$tag.' class="img_height">' .$link_image_src[2] .'</'.$tag.'>';  
      // タイトルを取得
      $title = esc_html(trim($attachment->post_title));  
      if($title) echo '<'.$tag.' class="img_title">' .$title.'</'.$tag.'>';           
    } 
  }  
}

上記の関数を使用するには、以下をテンプレート（single.php）のループの中に記述する。

<div class="attached_img_info"><?php get_attached_images_info(); ?></div>

また、タイトル以外の画像の情報はforeach ( $attachments as $attachment )の中で以下のように記述すれば取得して出力することができる。

// 代替テキストを取得
$alt = esc_html(get_post_meta($attachment->ID, '_wp_attachment_image_alt', true));
// タイトルを取得
$title = esc_html(trim($attachment->post_title));
// キャプションを取得
$caption = esc_html(trim($attachment->post_excerpt));
// 説明を取得
$description = esc_html(trim($attachment->post_content));
      
if($alt) echo '<'.$tag.' class="img_alt">' .$alt.'</'.$tag.'>';
if($title) echo '<'.$tag.' class="img_title">' .$title.'</'.$tag.'>';
if($caption) echo '<'.$tag.' class="img_caption">' .$caption.'</'.$tag.'>';
if($description) echo '<'.$tag.' class="img_description">' .$description.'</'.$tag.'>';

関連情報：「メディアファイル（画像など）の表示」

jQuery を利用して画像を表示

Lightbox のように表示するための背景や表示する画像の要素をテンプレート（single.php）の適当な位置に記述し、非表示としておく。

<div id="bg_layer"> 
    <!--モーダルウィンドウの背景を表示する領域--> 
<!--/#bg_layer--></div>
<div id="over_layer"> 
    <img class="lightboxlike" src="#" alt=""  /><!--表示する画像の要素-->
    <p class="title_img"></p><!--画像のタイトルがあれば表示-->
    <p class="close_button"><img src="<?php echo get_template_directory_uri(); ?>/images/close-trans.png" alt="" /></p><!--「閉じる」ボタンの画像-->
</div>

CSS に以下を記述。

/*------------- Lightbox like layers -------------*/ 
#bg_layer {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: #000;
  opacity: 0.70;
  /*filter: alpha ( opacity=65 );*/
  z-index: 10;
}
#over_layer {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 15;
}
* html #bg_layer {
  position: absolute;
}
* html #over_layer {
  position: absolute;
}
p.title_img {
  font-size: 11px; font-size: 1.1rem;
  color: #FFF;
}
p.close_button {
  display: none;
  position: absolute;
  top: -10px;
  right: -10px;
  cursor: pointer;
  z-index: 20;
}

以下のような JavaScript ファイルを記述して、テンプレート（single.php）に読み込ませる。画像を変更したり、順番を入れえると、「get_posts」で取得した情報の並び順と異なってしまうので、ファイル名を元に「get_posts」で取得した情報の並び順のインデックスを取得して利用する。（7月8日追加訂正）

投稿のリンク要素（a 要素）のラップ集合を作成し、その href 属性に「wp-content/uploads」の文字列が含まれれば、挿入画像へのリンクと判定してその要素を attachment_links$ に代入する。
挿入画像へのリンクに title 属性を付けて、マウスオーバー時に「拡大表示」と表示させる。
match を使って href 属性から画像名（ファイル名）を取得する。
訂正 2013年9月12日
「match(/\/(\w+)\.(jpg|gif|png)/)」の部分を「match(/\/(\w+)\.(jpg|jpeg|gif|png)/i)」に変更。拡張子「jpeg」が抜けていたため、拡張子が「jpeg」の場合正しく表示されませんでした。また「i」フラグ（大文字と小文字を区別しない）を追加。
訂正 2013年12月16日
「match(/\/(.+)\.(jpg|jpeg|gif|png)/i)」に変更。
(\w+)だと英数字とアンダースコアの画像名しかマッチしないので変更。
訂正 2014年1月7日
「match(/\/(([^\/]+)\.(jpg|jpeg|gif|png))/i)」に変更。
「/」以外の文字とそれに続く拡張子を含めた値を取得するように変更。
取得した情報の入っている p 要素の数が 0 以上で、画像名（ファイル名）が取得できていれば、取得した情報の入っている p 要素を調べて、画像名（ファイル名）が含まれる p 要素のインデックス番号を data() で付ける。
訂正 2014年1月7日
p 要素のテキスト（.text()）の画像名は画像へのリンクの画像名と異なる場合がある（画像名の最後にサイズ「-600×450」がつく場合がある）ので「replace()」を使い、サイズ部分を取った画像名と比較。
挿入画像へのリンクをクリックすると、画像の情報の要素があれば（$(‘p.img_link’).length > 0）画像を Lightbox のように表示
どの画像にどの情報が対応するかは、 data() で付けたインデックス番号を利用する。
jQuery に関しては「jQuery で Lightbox のようなモーダルウィンドウを表示」を参照。

jQuery(function($){  
  var attachment_links$ = $('div.blog_content a').filter(function() {
    if($(this).attr('href').search(/wp-content\/uploads/) != -1) {
      return true;
    }else{
      return false; 
    }
  });
  
  attachment_links$.each(function(n) {
     var that$ = $(this);
     that$.attr('title', '拡大表示');
     //result[1] に拡張子を含めたファイル名が入る
     var result = that$.attr('href').match(/\/(([^\/]+)\.(jpg|jpeg|gif|png))/i);
     if($('p.img_link').length > 0 && result){
       $('p.img_link').each(function(n) {
         //画像名の最後にサイズ「-600x450」があれば削除して比較
         var target = $(this).text().replace(/-\d+x\d+/, '');
         if(target.search(result[1]) != -1) {
          //同じファイル名を持つ p 要素のインデックスを取得
          that$.data('index', n);
         }
       });
     }
    });
  
  attachment_links$.click(function() {  
    if($('p.img_link').length > 0){
      if($('#over_layer').css('display') == 'none') {
        var img_width = parseInt($($('p.img_width').get($(this).data("index"))).text(), 10);
        var img_height = parseInt($($('p.img_height').get($(this).data("index"))).text(), 10);
        if(img_height && img_width) {
          $('#bg_layer').show();
          $('#over_layer').css({
            marginTop: '-' + img_height/2 + 'px',
            marginLeft: '-' + img_width/2 + 'px'
          });
          $('img.lightboxlike').attr('src', $($('p.img_link').get($(this).data("index"))).text());
          $('#over_layer, p.close_button').fadeIn(500);
        }    
      }
    }      
    return false;  
  });
  
  if($.browser.msie && $.browser.version<7) {
    $(window).scroll(function() {
      $('#bg_layer').get(0).style.setExpression('top', "$(document).scrollTop()+'px'");
      $('#over_layer').get(0).style.setExpression('top',"($(document).scrollTop()+$(window).height()/2)+'px'");
    });
    
  }
  
  $('#bg_layer, p.close_button, p.close_overLayer').click(function() {
    $('#over_layer,#bg_layer ').fadeOut(500);
    $('img.lightboxlike').attr('src', '');
  });  
});

&#91;/code&#93;

以下は、ウィンドウのサイズが画像より小さい場合は、画像を縮小して表示する場合。
<ul>
<li>attachment_links$.click(function() { ～ }) の「～」部分を関数で作成。</li>
<li>前述の jQuery の部分を以下に置き換える。</li>
</ul>



jQuery(function($){  
  var attachment_links$ = $('div.blog_content a').filter(function() {
    if($(this).attr('href').search(/wp-content\/uploads/) != -1) {
      return true;
    }else{
      return false; 
    }
  });
  
  attachment_links$.each(function(n) {
     var that$ = $(this);
     that$.attr('title', '拡大表示');
     //result[1] に拡張子を含めたファイル名が入る
     var result = that$.attr('href').match(/\/(([^\/]+)\.(jpg|jpeg|gif|png))/i);
     if($('p.img_link').length > 0 && result){
       $('p.img_link').each(function(n) {
         var target = $(this).text().replace(/-\d+x\d+/, '');
         if(target.search(result[1]) != -1) {
          //同じファイル名を持つ p 要素のインデックスを取得
          that$.data('index', n);
         }
       });
     }
    });
  
  function show_modal_window(this$, img_width, img_height, my_options) {
    //$.extendでパラメータをマージ
    var settings = $.extend({
      zoom_h: 0.87,  //高さの縮小倍率
      zoom_w: 0.9,  //幅の縮小倍率
      extra_h: 30,  //高さを比較する際のマージン（ピクセル）
      extra_w: 10,  //幅を比較する際のマージン（ピクセル）
      duration: 700, //アニメーション表示の速さ（ミリ秒）
      over_layer: '#over_layer',  //画像を表示する領域
      background_layer:'#bg_layer',  //背景を表示する領域
      img_element: 'img.lightboxlike',  //表示する画像要素
      close_element: 'p.close_button'  //閉じるボタンの要素
    }, my_options || {});
    
    if($(settings.over_layer).css('display') == 'none') {
      var image_width = img_width;
      var image_height = img_height;
      $(settings.background_layer).show();
      var wh = $(window).height();
      var ww = $(window).width();
      //画像の高さがウィンドウの高さより大きい場合
      if(image_height - (-settings.extra_h) > wh  && image_width - (-settings.extra_w) <= ww){
        var fixedHeight = wh * settings.zoom_h;
        var fixedWidth = image_width * (fixedHeight / image_height);
        $(settings.over_layer).css({         
          marginTop: '-' + fixedHeight/2 + 'px',
          marginLeft: '-' + fixedWidth/2 + 'px'
        });
        $(settings.img_element).attr({src: this$.attr('href'), height:fixedHeight,  width:fixedWidth});
      //画像の幅がウィンドウの幅より大きい場合
      }else if(image_width - (-settings.extra_w) > ww  && image_height - (-settings.extra_h) <= wh){
        fixedWidth = ww * settings.zoom_w;
        fixedHeight = image_height * (fixedWidth / image_width);
        $(settings.over_layer).css({         
          marginTop: '-' + fixedHeight/2 + 'px',
          marginLeft: '-' + fixedWidth/2 + 'px'
        });
        $(settings.img_element).attr({src: this$.attr('href'), height:fixedHeight,  width:fixedWidth});
      //画像の高さと幅がウィンドウの高さと幅より大きい場合
      }else if(image_width - (-settings.extra_w) > ww  && image_height - (-settings.extra_h) > wh){
        if((image_width - (-settings.extra_w)) - ww > (image_height - (-settings.extra_h)) -wh) {
          fixedWidth = ww * settings.zoom_w;
          fixedHeight = image_height * (fixedWidth / image_width);
          $(settings.over_layer).css({         
            marginTop: '-' + fixedHeight/2 + 'px',
            marginLeft: '-' + fixedWidth/2 + 'px'
          });
          $(settings.img_element).attr({src: this$.attr('href'), height:fixedHeight,  width:fixedWidth});
        }else{
          fixedHeight = wh * settings.zoom_h;
          fixedWidth = image_width * (fixedHeight / image_height);
          $(settings.over_layer).css({         
            marginTop: '-' + fixedHeight/2 + 'px',
            marginLeft: '-' + fixedWidth/2 + 'px'
          });
          $(settings.img_element).attr({src: this$.attr('href'), height:fixedHeight,  width:fixedWidth});
        }      
      }else{
        $(settings.over_layer).css({
          marginTop: '-' + image_height/2 + 'px',
          marginLeft: '-' + image_width/2 + 'px'
        });
        $(settings.img_element).attr({src: this$.attr('href'), height:image_height,  width:image_width});
      }  
      $(settings.over_layer + ',' +  settings.close_element).fadeIn(settings.duration);
    }    
  }
  
  attachment_links$.click(function() {
    var width = parseInt($($('p.img_width').get($(this).data("index"))).text(), 10);
    var height = parseInt($($('p.img_height').get($(this).data("index"))).text(), 10);  
    show_modal_window( $(this), width, height) ;
    return false;
  });  
  
  if($.browser.msie && $.browser.version<7) {
    $(window).scroll(function() {
      $('#bg_layer').get(0).style.setExpression('top', "$(document).scrollTop()+'px'");
      $('#over_layer').get(0).style.setExpression('top',"($(document).scrollTop()+$(window).height()/2)+'px'");
    });
    
  }
  
  $('#bg_layer, p.close_button, p.close_overLayer').click(function() {
    $('#over_layer,#bg_layer ').fadeOut(500);
  });  
});

&#91;/code&#93;

<h3>他の投稿にアップロードした画像を挿入した場合でも表示させる</h3>

前述の方法では、他の投稿にアップロードした画像を挿入して使用したり、下書き段階で画像をアップロードして何らかの理由でその投稿を削除して、新しく作成した時に下書きでアップロードした画像を挿入したりした場合正しく表示されない。

以下の方法はそれぞれなんとか表示されるがいずれも問題がある。

<h4>方法１</h4>

get_posts のパラメータで「post_parent」に「$post->ID」を指定すると当然のことながらその投稿に対してアップロードした画像の情報しか得られないので、「post_parent」を指定しない。

但し、この場合アップロードされたメディア（画像）が多数あるとそれらを全てリストアップして該当する画像を探すのでおそらく大変効率が悪い（と思う）。

変更点は functions.php に記述した関数「get_attached_images_info()」の「post_parent」の部分を削除するだけ。

//添付ファイルの情報を取得
function get_attached_images_info($args = array()) {
  global $post;
  $defaults = array(
    //'post_parent' => $post->ID,　ここを削除（コメントアウト）
    'orderby' => 'none',
    'order' => 'ASC',
    'post_status' => 'inherit',
    'numberposts' => -1,
    'offset' => 0,
    'tag'    => 'p',
    'link_size'  => 'large',  
  );
  $args = wp_parse_args( $args, $defaults ); //パラメータを解析し、省略されたパレメータにはデフォルト値をセット
  extract( $args, EXTR_SKIP ); //キーを変数名、値を変数の値として処理
    
  $attachments = get_posts( array(
    //'post_parent' => $post_parent, 　ここを削除（コメントアウト）
    'orderby' => $orderby, 
    'order' => $order, 
    'post_status' => $post_status, 
    'numberposts' => $numberposts, 
    'offset' => $offset, 
    'post_type' => 'attachment', 
    'post_mime_type' => 'image',  
   ) );

  if ( $attachments ) {
    foreach ( $attachments as $attachment ) {      
      // $link_image_src にリンク先画像（添付ファイル）の$link_sizeで指定したサイズの画像のURLを取得
      $link_image_src = wp_get_attachment_image_src($attachment->ID, $link_size);
      echo '<'.$tag.' class="img_link">' .$link_image_src[0] .'</'.$tag.'>';
      echo '<'.$tag.' class="img_width">' .$link_image_src[1] .'</'.$tag.'>';
      echo '<'.$tag.' class="img_height">' .$link_image_src[2] .'</'.$tag.'>';  
                         
    } 
  }  
}

方法２

画像のサイズの情報を「get_posts」を利用して取得するのではなく、JavaScript の「new Image()」を利用して取得する。この方法も実用的ではない（使い物にならない）ので、練習としてのメモのようなもの。

この場合、WordPress 側では何もしない
投稿に挿入した画像の HTML の a 要素の href 属性から画像の src を取得
new Image()でイメージオブジェクトを生成し、それに対して src を設定して高さと幅を取得

問題点：高さや幅がうまく取得できず「0」になることがよくあり、画像が表示されないことがある。2回目のクリックではだいたい表示される。

var attachment_links$ = $('div.blog_content a').filter(function() {
  if($(this).attr('href') && $(this).attr('href').search(/wp-content\/uploads/) != -1) {
    return true;
  }else{
    return false;
  }
});
   
function show_modal_window(this$, my_options) {
  
  var img = new Image();  //img 要素の生成
  img.src = this$.attr('href');  //画像のパスを設定
  var height = img.height;   // 画像の高さを取得
  var width = img.width;    // 画像の幅を取得
  
  //console.log('url: ' + img.src + ' h: ' + height + ' w: ' + width);
  var img_src = this$.attr('href');  //画像のパスの取得
  
  var settings = $.extend({
    zoom_h: 0.87, //高さの縮小倍率
    zoom_w: 0.9, //幅の縮小倍率
    extra_h: 30, //高さを比較する際のマージン（ピクセル）
    extra_w: 10, //幅を比較する際のマージン（ピクセル）
    duration: 700, //アニメーション表示の速さ（ミリ秒）
    over_layer: '#over_layer', //画像を表示する領域
    background_layer:'#bg_layer', //背景を表示する領域
    img_element: 'img.lightboxlike', //表示する画像要素
    close_element: 'p.close_button' //閉じるボタンの要素
  }, my_options || {});
  
  if($(settings.over_layer).css('display') == 'none') {
    var image_width = width;
    var image_height = height;
    $(settings.background_layer).show();
    var wh = window$.height();
    var ww = window$.width();
    //画像の高さがウィンドウの高さより大きい場合
    if(image_height - (-settings.extra_h) > wh && image_width - (-settings.extra_w) <= ww){
      //console.log('1');
      var fixedHeight = wh * settings.zoom_h;
      var fixedWidth = image_width * (fixedHeight / image_height);
      $(settings.over_layer).css({
        marginTop: '-' + fixedHeight/2 + 'px',
        marginLeft: '-' + fixedWidth/2 + 'px'
      });
      $(settings.img_element).attr({src: img_src, height:fixedHeight, width:fixedWidth});
    //画像の幅がウィンドウの幅より大きい場合
    }else if(image_width - (-settings.extra_w) > ww && image_height - (-settings.extra_h) <= wh){
      //console.log('2');
      fixedWidth = ww * settings.zoom_w;
      fixedHeight = image_height * (fixedWidth / image_width);
      $(settings.over_layer).css({
        marginTop: '-' + fixedHeight/2 + 'px',
        marginLeft: '-' + fixedWidth/2 + 'px'
      });
      $(settings.img_element).attr({src: img_src, height:fixedHeight, width:fixedWidth});
    //画像の高さと幅がウィンドウの高さと幅より大きい場合
    }else if(image_width - (-settings.extra_w) > ww && image_height - (-settings.extra_h) > wh){
      //console.log('3');
      if((image_width - (-settings.extra_w)) - ww > (image_height - (-settings.extra_h)) -wh) {
      //console.log('3-1');
        fixedWidth = ww * settings.zoom_w;
        fixedHeight = image_height * (fixedWidth / image_width);
        $(settings.over_layer).css({
          marginTop: '-' + fixedHeight/2 + 'px',
          marginLeft: '-' + fixedWidth/2 + 'px'
        });
        $(settings.img_element).attr({src: img_src, height:fixedHeight, width:fixedWidth});
      }else{
        //console.log('3-2');
        fixedHeight = wh * settings.zoom_h;
        fixedWidth = image_width * (fixedHeight / image_height);
        $(settings.over_layer).css({
          marginTop: '-' + fixedHeight/2 + 'px',
          marginLeft: '-' + fixedWidth/2 + 'px'
        });
        $(settings.img_element).attr({src: img_src, height:fixedHeight, width:fixedWidth});
      }
    }else{
      //console.log('4');
      $(settings.over_layer).css({
        marginTop: '-' + image_height/2 + 'px',
        marginLeft: '-' + image_width/2 + 'px'
      });
      $(settings.img_element).attr({src: img_src, height:image_height, width:image_width});
    }
    $(settings.over_layer + ',' + settings.close_element).fadeIn(settings.duration);
  }
}
  
attachment_links$.click(function() {
  show_modal_window($(this)) ;
  return false;
});

方法３

この投稿以外のためにアップロードした画像を使用した場合、data("index") の値は「undefined」になっているので、その場合は高さと幅を「null」に設定し、その場合に限り「方法２」の img 要素を生成する方法を使う。

「方法２」よりも良いが、「方法２」同様サイズが「0」となる場合があり期待通りに表示されないことがある。2回目にクリックした場合はおおむね正しく表示されるが。。。

var attachment_links$ = $('div.single_content a').filter(function() {
if($(this).attr('href') && $(this).attr('href').search(/wp-content\/uploads/) != -1) {
return true;
}else{
return false;
}
});

attachment_links$.each(function(n) {
var that$ = $(this);
that$.attr('title', '拡大表示');
//result[1] に拡張子を除いたファイル名が入る
var result = that$.attr('href').match(/\/(([^\/]+)\.(jpg|jpeg|gif|png))/i);

if($('p.img_link').length > 0 && result){
$('p.img_link').each(function(n) {
var target = $(this).text().replace(/-\d+x\d+/, '');
if(target.search(result[1]) != -1) {
//同じファイル名を持つ p 要素のインデックスを取得
that$.data('index', n);
console.log('n:' + n + ' href: ' + that$.attr('href') );
}
});
}
});

function show_modal_window(this$, img_width, img_height, my_options) {
//$.extendでパラメータをマージ
var settings = $.extend({
zoom_h: 0.87, //高さの縮小倍率
zoom_w: 0.9, //幅の縮小倍率
extra_h: 30, //高さを比較する際のマージン（ピクセル）
extra_w: 10, //幅を比較する際のマージン（ピクセル）
duration: 700, //アニメーション表示の速さ（ミリ秒）
over_layer: '#over_layer', //画像を表示する領域
background_layer:'#bg_layer', //背景を表示する領域
img_element: 'img.lightboxlike', //表示する画像要素
close_element: 'p.close_button' //閉じるボタンの要素
}, my_options || {});

if($(settings.over_layer).css('display') == 'none') {
var image_width = img_width;
var image_height = img_height;
//console.log('h: ' + image_height);
//console.log('w: ' + image_width);
$(settings.background_layer).show();
var wh = window$.height();
var ww = window$.width();
//画像の高さや幅が「null」の場合（追加部分）
if(image_width == null || image_height == null) {
var img = new Image(); //img 要素の生成
img.src = this$.attr('href'); //画像のパスを設定
image_width = img.width; // 画像の幅を取得
image_height = img.height; // 画像の高さを取得
$(settings.over_layer).css({
marginTop: '-' + image_height/2 + 'px',
marginLeft: '-' + image_width/2 + 'px'
});
$(settings.img_element).attr({src: this$.attr('href'), height:image_height, width:image_width});
//画像の高さがウィンドウの高さより大きい場合
}else if(image_height - (-settings.extra_h) > wh && image_width - (-settings.extra_w) <= ww){ //console.log('1'); var fixedHeight = wh * settings.zoom_h; var fixedWidth = image_width * (fixedHeight / image_height); $(settings.over_layer).css({ marginTop: '-' + fixedHeight/2 + 'px', marginLeft: '-' + fixedWidth/2 + 'px' }); $(settings.img_element).attr({src: this$.attr('href'), height:fixedHeight, width:fixedWidth}); //画像の幅がウィンドウの幅より大きい場合 }else if(image_width - (-settings.extra_w) > ww && image_height - (-settings.extra_h) <= wh){ //console.log('2'); fixedWidth = ww * settings.zoom_w; fixedHeight = image_height * (fixedWidth / image_width); $(settings.over_layer).css({ marginTop: '-' + fixedHeight/2 + 'px', marginLeft: '-' + fixedWidth/2 + 'px' }); $(settings.img_element).attr({src: this$.attr('href'), height:fixedHeight, width:fixedWidth}); //画像の高さと幅がウィンドウの高さと幅より大きい場合 }else if(image_width - (-settings.extra_w) > ww && image_height - (-settings.extra_h) > wh){
//console.log('3');
if((image_width - (-settings.extra_w)) - ww > (image_height - (-settings.extra_h)) -wh) {
//console.log('3-1');
fixedWidth = ww * settings.zoom_w;
fixedHeight = image_height * (fixedWidth / image_width);
$(settings.over_layer).css({
marginTop: '-' + fixedHeight/2 + 'px',
marginLeft: '-' + fixedWidth/2 + 'px'
});
$(settings.img_element).attr({src: this$.attr('href'), height:fixedHeight, width:fixedWidth});
}else{
//console.log('3-2');
fixedHeight = wh * settings.zoom_h;
fixedWidth = image_width * (fixedHeight / image_height);
$(settings.over_layer).css({
marginTop: '-' + fixedHeight/2 + 'px',
marginLeft: '-' + fixedWidth/2 + 'px'
});
$(settings.img_element).attr({src: this$.attr('href'), height:fixedHeight, width:fixedWidth});
}
}else{
//console.log('4');
$(settings.over_layer).css({
marginTop: '-' + image_height/2 + 'px',
marginLeft: '-' + image_width/2 + 'px'
});
$(settings.img_element).attr({src: this$.attr('href'), height:image_height, width:image_width});
}
$(settings.over_layer + ',' + settings.close_element).fadeIn(settings.duration);
}
}

attachment_links$.click(function() {
//変更及び追加部分
if($(this).data('index') != undefined) {
var width = parseInt($($('p.img_width').get($(this).data("index"))).text(), 10);
var height = parseInt($($('p.img_height').get($(this).data("index"))).text(), 10);
}else{
var width = null;
var height = null;
}
show_modal_window( $(this), width, height) ;
//console.log( 'index: ' + $(this).data("index") + ' width: ' + $($('p.img_width').get($(this).data("index"))).text());
return false;
});

if($.browser.msie && $.browser.version<7) { window$.scroll(function() { $('#bg_layer').get(0).style.setExpression('top', "$(document).scrollTop()+'px'"); $('#over_layer').get(0).style.setExpression('top',"($(document).scrollTop()+window$.height()/2)+'px'"); }); } $('#bg_layer, p.close_button, p.close_overLayer').click(function() { $('#over_layer,#bg_layer ').fadeOut(500); }); [/code]

Web Design Leaves