tabimoba.net

とあるエンジニアの雑記帳

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

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

jQuery JavaScript

※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