Web Design Leaves

ページに特定のサイズで表示したアイキャッチ画像をクリックすると、 Lightbox のようなモーダルウィンドウで拡大画像を表示する方法のメモ。

• 現在表示されているアイキャッチ画像の ID を get_post_thumbnail_id($post->ID) で取得。
• wp_get_attachment_image_src() を利用して、拡大表示するアイキャッチ画像の URL、幅、高さを取得。
• アイキャッチ画像は「the_post_thumbnail()」でサイズ（’m_size’）を指定して出力。
• アイキャッチ画像には拡大表示するアイキャッチ画像の URL を使ってリンク（a 要素）を設定。
• 拡大表示するアイキャッチ画像の幅と高さを p 要素に出力し、これらの p 要素は CSS で非表示にする。
• ページの適当な個所に半透明のモーダルウィンドウと拡大画像を表示する領域を設定し、CSS で非表示にしておく。
• 半透明のモーダルウィンドウの領域：id=”bg_layer” の div 要素
• 拡大画像を表示する領域：id=”over_layer” の div 要素
• 拡大画像：class=”lightboxlike” の img 要素（src 属性は空だと文法的にエラーになるので「#」を指定）
• 「閉じる」ボタンの画像：class=”close_button” の p 要素

<?php if(has_post_thumbnail()): ?>
<?php
$thumbnail_id = get_post_thumbnail_id($post->ID);
$src_info = wp_get_attachment_image_src($thumbnail_id, 'full');
$src = $src_info[0];
$width = $src_info[1];
$height = $src_info[2];
?>
<p class="thumbnail_photo"><a href="<?php echo $src; ?>"><?php the_post_thumbnail('m_size'); ?></a></p>
<p class="full_size_link_width"><?php echo $width; ?></p>
<p class="full_size_link_height"><?php echo $height; ?></p>
<?php endif; ?>

<div id="bg_layer"> <!--半透明のモーダルウィンドウの背景を表示する領域--> 
<!--/#bg_layer--></div>
<div id="over_layer"> <!--拡大画像と「閉じる」ボタンを表示する領域-->
<img class="lightboxlike" src="#" alt=""  /><!--拡大画像-->
<p class="close_button"><img src="<?php echo get_template_directory_uri(); ?>/images/close-trans.png" /></p>
<!--/#over_layer--></div>

CSS の設定。

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

#bg_layer {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: #000;
  opacity: 0.60;
  filter: alpha(opacity=60);
  z-index: 10;
}

#over_layer {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 15;
}

/*---IE6 対策---*/ 
* html #bg_layer {
  position: absolute;
}

/*---IE6 対策---*/ 
* html #over_layer {
  position: absolute;
}

p.close_button {
  display: none;
  position: absolute;
  top: -10px;
  right: -10px;
  cursor: pointer;
  z-index: 20;
}

p.close_overLayer {
  z-index: 20;
  font-size: 11px; font-size: 1.1rem;
  color: #FFF;
  cursor: pointer;
}

p.full_size_link_width, p.full_size_link_height,  {
  display: none;
}

jQuery を使って以下を記述する。

• アイキャッチ画像の a 要素に click イベントを設定。
• 拡大画像が表示されていなければ、以下を実施する。
• 拡大表示するアイキャッチ画像の幅と高さを出力してある p 要素から、幅と高さを取得して変数に代入。
• モーダルウィンドウ（半透明の領域）を表示する。
• 拡大画像の位置を margin-top, margin-left （拡大画像の半分のネガティブマージン）で指定する。
• 拡大画像（img.lightboxlike）の src 属性にサムネイル画像の a 要素の href 属性を設定。
• 画像と「閉じる」ボタンを表示する。
• 半透明の領域か「閉じる」ボタンがクリックされたら、すべて非表示にする。
• IE6 対策では、擬似的に position: fixed を実現。
• 詳細は「jQuery で Lightbox のようなモーダルウィンドウを表示」参照。

$(‘p.thumbnail_photo a’).click(function() {
if($(‘#over_layer’).css(‘display’) == ‘none’) {
var full_size_link_width = $(‘p.full_size_link_width’).text();
var full_size_link_height = $(‘p.full_size_link_height’).text();
$(‘#bg_layer’).show();
$(‘#over_layer’).css({
marginTop: ‘-‘ + full_size_link_height/2 + ‘px’,
marginLeft: ‘-‘ + full_size_link_width/2 + ‘px’
});
$(‘img.lightboxlike’).attr(‘src’, $(this).attr(‘href’));
$(‘#over_layer, p.close_button’).show();
}
return false;
});

//IE6 対策
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').click(function() { $('#over_layer,#bg_layer ').hide(); }); [/code]