※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>