articles＞coding

lightboxの設置方法

更新: 2026/3/31
『lightbox』とは:
画像をポップアップで拡大表示する仕組み。デモはLogページから確認できます。
設置方法:
以下のコードをコピペするだけ。
【head内】
<!--CSS読み込み（Lightboxの見た目）-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/css/lightbox.css" rel="stylesheet">

<!--jQueryの読み込み-->
<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>

<!--LightboxのJavaScript（jQueryより後に記述すること）-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.5/js/lightbox.min.js" type="text/javascript"></script>
【body内】
<a href="拡大後URL" data-lightbox="拡大画像のグループ名" data-title="拡大画像の左下に表示される文字"><img style="width:100%;display:block" src="拡大前URL" alt="代替テキスト"></a>
【拡大画像の保存を禁止する】
/*CSS*/
.lightbox img{
  pointer-events: none;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -moz-touch-callout:none;
  -moz-user-select:none;
  touch-callout:none;
  user-select:none;
}