• かちびと.net

    WordPressのギャラリー機能を、少しのjQueryコードでLightbox風にポップアップ出来るようにする方法を書いてみます。プラグイン使うとややこしくなるので基本的なチュートリアルで実装してみましょう。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

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

スポンサーリンク

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

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

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

ギャラリー機能


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

[gallery]

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

Sample

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

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

以下、手順です。

吐き出される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”]

と書けばいい。

他のパラメーターはリファレンスを見てください。

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

<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対応は面倒くさいのでご自身で調整してください。

完成


WordPressのギャラリーでLightbox風にポップアップ表示出来ました。

以上、チュートリアルでした。尚、jQueryのコードはWebdesigntuts+の記事を参考にしました。

URL :
TRB :

Comments & Trackbacks (3)

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services