あらゆるブラウザに対応!画像ポップアップスクリプト【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. grid-gallery-master

    Lightboxと軽量フォト グリッドギャラリー 【Grid Gall…

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

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

  4. hes-gallery-master

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

  5. フォトギャラリー

    写真アルバム・フォトギャラリー作成・サンプル集 JavaScript・…

  6. 無料素材メニュー

    CSS MENU メニュー ボタン テンプレートによる無料素材

制作実績一覧

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

最近の記事

  1. tech-kids-school
  2. セールスライティング
  3. キーワードの選び方
  4. YouTube 集客
  5. 幼児のプログラミング教育
  6. E-A-T(専門性・権威性・信頼性)
  7. ホームページ集客
  8. instagram
  9. ameba-seo
  10. 開業
人気の記事 おすすめ記事
  1. フォトギャラリー
  2. 高い広告費に悩むサロン店主
  3. 広告費
  4. SEO評価を下げる低品質コンテンツ
  5. 文字装飾
  1. ブログの見出し
  2. ブログタイトル
  3. 集客ブログの作り方
  4. ブログ集客方法・パソコン操作
  5. 高い広告費に悩むサロン店主