WordPressのギャラリー機能を、少しのjQueryコードでLightbox風にポップアップ出来るようにする

WordPressはアップロードした画像を
ショートコードで記事内にイメージ
ギャラリーとして実装出来る機能が
デフォルトで備わっています。ただ、
これが地味に使い勝手がよくないの
でもうちょい頑張ってみようかなと。

というわけで誰の役に立つのかわからないシリーズです。切欠はちょっとメール頂いたのと、Webデザインレシピさんの使いづらいWordPressのギャラリーをけっこう使えるギャラリーにする方法という記事を見て、Lightboxに触れてあったけど方法は割愛されていたので簡単に出来る方法を書きます。

と、言ってもjQueryプラグインとかだと導入するの面倒くさいので今回は簡単なコードで手を抜きます。

ギャラリー機能

こういうやつ。記事の投稿で

[gallery]

って書くだけでその記事内にアップロードした画像がグリッドで並べられます。ただ、このままだと別のページに持っていかれて、ユーザーとしては見る気になりません。

Sample

この記事で実装しました。以下、サンプルです。

エフェクトもない手抜きなものですがｗまぁただのチュートリアル用なのでご了承下さい。

以下、手順です。

吐き出されるHTMLを見てみる

ショートコードを使うと以下のようなコードが吐き出されます。

<style type='text/css'>
	#gallery-1 {
		margin: auto;
	}
	#gallery-1 .gallery-item {
		float: left;
		margin-top: 10px;
		text-align: center;
		width: 33%;
	}
	#gallery-1 img {
		border: 2px solid #cfcfcf;
	}
	#gallery-1 .gallery-caption {
		margin-left: 0;
	}
</style>
<!-- see gallery_shortcode() in wp-includes/media.php -->
<div id='gallery-1' class='gallery galleryid-60 gallery-columns-3 gallery-size-thumbnail'><dl class='gallery-item'>
	<dt class='gallery-icon'>
		<a href='http://example.com/?attachment_id=61' title='01'><img width="300" height="187" src="http://example.com/wp-content/uploads/2011/08/01-300x187.jpg" class="attachment-thumbnail" alt="01" title="01" /></a>
	</dt></dl>
	<dl class='gallery-item'><dt class='gallery-icon'>
		<a href='http://example.com/?attachment_id=266' title='02'><img width="300" height="187" src="http://example.com/wp-content/uploads/2011/08/02-300x187.jpg" class="attachment-thumbnail" alt="02" title="02" /></a>
	</dt></dl>
	<dl class='gallery-item'><dt class='gallery-icon'>
		<a href='http://example.com/?attachment_id=269' title='03'><img width="300" height="187" src="http://example.com/wp-content/uploads/2011/08/03-300x187.png" class="attachment-thumbnail" alt="03" title="03" /></a>
	</dt></dl><br style="clear: both" />
	<br style='clear: both;' />
</div>

ちょっと長いですけど勝手に吐き出すコードなので無視でOKです。こんな感じでcssとHTMLが吐かれるんですが、このままだとリンク先が個別ページなのでリンク先を直接画像にします。

これは簡単で、パラメータを加えるだけ。ショートコードを

[gallery link=”file”]

と書けばいい。
[note]他のパラメーターはリファレンスを見てください。[/note]

これで画像部分は以下のようなコードに変ります。

<dt class='gallery-icon'>
		<a href='http://example.com/wp-content/uploads/2011/08/01.jpg' title='3187744654_63cba1fbd5_z'><img width="300" height="187" src="http://example.com/wp-content/uploads/2011/08/01-300x187.jpg" class="attachment-thumbnail" alt="01" title="01" /></a>
	</dt></dl>

直で画像のリンクを指定できました。後はLightboxに対応させれば良いだけですね。

jQuery

jQuery(document).ready(function($) {
    $('.gallery-icon a').click(function(e) {
        e.preventDefault();
        var image_href = $(this).attr("href");
        if ($('#lb').length > 0) { 
            $('#lbcontent').html('<img src="' + image_href + '" />');
            $('#lb').show();
        }

        else { 
            var lightbox = 
            '<div id="lb">' +
                '<div id="lbcontent">' + 
                    '<img src="' + image_href +'" />' +
                '</div>' +    
            '</div>';
            $('body').append(lightbox);
        }
    });

    $('#lb').live('click', function() { 
        $('#lb').hide();
    });
});

これで、「.gallery-icon a」をクリックすると

<div id="lb">
    <div id="lbcontent">
        <img src="#" />
    </div>
</div>

こんな形でLightbox風にリンク先の画像が呼び出されます。

あとはCSSで調整。

  #lb {
      position:fixed; 
      top:0; 
      left:0; 
      width:100%; 
      height:100%; 
      text-align:center;
      background: rgba(0,0,0,.8) ;/*オーバーレイ*/
      z-index:100;
      }

   #lb img {
      box-shadow:0 0 25px #111;
      -webkit-box-shadow:0 0 25px #111;
      -moz-box-shadow:0 0 25px #111;
      max-width:100%;
      }

画像の位置調整とかIE対応は面倒くさいのでご自身で調整してください。