旅モバ

旅、モバイル、サーバ関連(Linux,FreeBSD)、クラウド・Webサービス、その他PCの話題など。

スポンサードリンク

jQuery+Colorboxでaタグ無しで画像のモーダル表示を実現する簡単な方法

※Qiitaからの移行記事となります

画像のモーダル表示のためにLightbox系のライブラリの使い方を検索してみると、モーダル表示したい画像のimgタグをaタグで囲むようなものばかりが検索結果として出てきます。

しかし、CMS等の環境の制約によりaタグでimgタグを囲めない場合や、メンテナンス効率の低下を避けるためにaタグでimgタグを囲みたくない(aタグとimgタグの両方をメンテナンスしたくないし、それ以前に入力が面倒なのでやりたくない)場合があると思います。

そのような場合は、JavaScriptで画像(img)のクリックイベントを取得し、クリックされた画像のsrcを取得し、その値をColorboxのようなモーダル表示時に表示させる画像のリンク先(パス、URL)を指定可能なライブラリへ受け渡すことで、imgタグをaタグで囲むことなく、画像のモーダル表示を行うことができます。

※事前にjQueryとColorboxのファイル一式を用意(アップロード)しておきます。

<script src="/lib/jquery/jquery.min.js"></script>
<script src="/lib/jquery/jquery-migrate.min.js"></script>
<script src="/lib/colorbox/jquery.colorbox-min.js"></script>
<link rel="stylesheet" href="/lib/colorbox/example4/colorbox.css" media="all">
<script type="text/javascript">
$(document).ready(function() {
    $("#content img").css("cursor","pointer");
    $("#content img").click(function() {
        $.colorbox({href:this.src});
        return false;
    });
});
</script>

関連URL