あらゆるブラウザに対応!画像ポップアップスクリプト【Lightbox2】

lightbox2

Lightbox2(ライトボックス)は、画像をポップアップするためのスクリプトです。 セットアップも簡単で、最近のすべてのブラウザで機能します。

プレビュー

パソコン版プレビュー

lightbox2

スマホ版プレビュー

lightbox2スマホ版

Lightbox2 デモ

著者 Lokesh Dhakar
公式ページ website
デモページ Lightbox2
最後の更新 20–年–月–日
ライセンス MIT

LICENSE:MIT
MITライセンスでは、商用利用だけでなく、コピーの使用、複製、変更、統合、公開、配布、サブライセンス、複製物を販売することが認められています。ただし、使用時には著作権表示とライセンス表示をする必要があります。ソースコード上(css、html)内に、著作権およびライセンス表示をすれば、サイト上で公開し表示する義務はありません。参照:MITライセンス(日本語翻訳)

Lightbox2 設置方法

Lightbox】からダウンロードして解凍して下さい。

解答をして必要なのは「dist」フォルダー内の「css」「images」「js」です。
lightbox2フォルダー

読み込ませよう

スタイルシート(css)『lightbox.min.css』は<head”></head”>内に記述! JavaScriptは『lightbox-plus-jquery.min.js』</body>直前に記述します。


<link rel="stylesheet" href="css/lightbox.min.css">
<script src="js/lightbox-plus-jquery.min.js"></script>

HTMLコード

個別の画像

<div>
   <a class="example-image-link" href="photo/1.jpg" data-lightbox="example-1"><img class="example-image" src="photo/1.jpg" width="300" height="418" alt="代替テキスト" /></a>
   <a class="example-image-link" href="photo/2.jpg" data-lightbox="example-2" data-title="画像の説明文"><img class="example-image" src="photo/2.jpg" width="300" height="418" alt="代替テキスト"/></a>
   <a class="example-image-link" href="photo/3.jpg" data-lightbox="example-3" data-title="画像の説明文"><img class="example-image" src="photo/3.jpg" width="300" height="418" alt="代替テキスト"/></a>
</div>

複数のグループ画像

<div>
   <a class="example-image-link" href="photo/4.jpg" data-lightbox="example-set" data-title="画像の説明文"><img class="example-image" src="photo/4.jpg" width="300" height="209" alt="代替テキスト"/></a>
   <a class="example-image-link" href="photo/5.jpg" data-lightbox="example-set" data-title="画像の説明文"><img class="example-image" src="photo/5.jpg" width="300" height="200" alt="代替テキスト" /></a>
   <a class="example-image-link" href="photo/6.jpg" data-lightbox="example-set" data-title="画像の説明文"><img class="example-image" src="photo/6.jpg" width="300" height="200" alt="代替テキスト" /></a>
</div>

ソースコード設置例


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
    <title>Lightbox2 Example デモ</title>
    <link rel="stylesheet" href="style.css">
 
    <link rel="stylesheet" href="css/lightbox.min.css">
 
</head>
<body>
    <div class="container">
 
<h1>画像ポップアップスクリプト【Lightbox2】</h1>
  <section>
    <h2>個別の画像</h2>
 
<div>
   <a class="example-image-link" href="photo/1.jpg" data-lightbox="example-1"><img class="example-image" src="photo/1.jpg" width="300" height="418" alt="代替テキスト" /></a>
   <a class="example-image-link" href="photo/2.jpg" data-lightbox="example-2" data-title="画像の説明文"><img class="example-image" src="photo/2.jpg" width="300" height="418" alt="代替テキスト"/></a>
   <a class="example-image-link" href="photo/3.jpg" data-lightbox="example-3" data-title="画像の説明文"><img class="example-image" src="photo/3.jpg" width="300" height="418" alt="代替テキスト"/></a>
</div>
 
    <hr />
 
    <h2>複数のグループ画像</h2>
 
<div>
   <a class="example-image-link" href="photo/4.jpg" data-lightbox="example-set" data-title="画像の説明文"><img class="example-image" src="photo/4.jpg" width="300" height="209" alt="代替テキスト"/></a>
   <a class="example-image-link" href="photo/5.jpg" data-lightbox="example-set" data-title="画像の説明文"><img class="example-image" src="photo/5.jpg" width="300" height="200" alt="代替テキスト" /></a>
   <a class="example-image-link" href="photo/6.jpg" data-lightbox="example-set" data-title="画像の説明文"><img class="example-image" src="photo/6.jpg" width="300" height="200" alt="代替テキスト" /></a>
…
</div>
  </section>
 
<script src="js/lightbox-plus-jquery.min.js"></script>
 
    </div>
</body>
</html>

Lightbox2 Download

フォトギャラリー

関連記事

  1. imagehover.css-master

    マウスオーバーで画像アニメーション表示する44種類のCSS【Image…

  2. 「FAQ」「Q&A」「SIDE MENU」に最適なアコーディオンメニュー

    「FAQ」「Q&A」に最適なアコーディオンメニュー(無料素材…

  3. 滑らかな垂直アコーディオンパネル

    滑らかな垂直アコーディオン パネル【Accordion Panel】

  4. CSS + HTML だけのアコーディオン

    CSS + HTML だけのアコーディオン(Accordion)メニュ…

  5. Lightboxに画像をグループ化する軽量なJavaScriptプラグ…

  6. hes-gallery-master

    モバイル対応レスポンシブギャラリー【HesGallery】

制作実績一覧

  1. bacchus
  2. ふじぜんリニューアル後
  3. legend-planning
  4. ポスティングこころざし様
  5. インテリアコーディネーター小島真子

最近の記事

  1. LINE公式アカウント
  2. Google Maps
  3. youtube seo
  4. アーテック・エジソンアカデミー
  5. パズル×ロボット×プログラミング 3つとも学習できる小学校低学年向け教室
  6. z会子供プログラミング講座
  7. embot
  8. カルチャースクール
  9. 外壁塗装
人気の記事 おすすめ記事
  1. フォトギャラリー
  2. 高い広告費に悩むサロン店主
  3. 広告費
  4. SEO評価を下げる低品質コンテンツ
  5. 文字装飾
  1. ブログの見出し
  2. ブログタイトル
  3. 集客ブログの作り方
  4. ブログ集客方法・パソコン操作
  5. 高い広告費に悩むサロン店主