MENU
プログラミング

jQueryで使えて、Lightboxより簡単！サムネ付きスライドギャラリー（コピペ可）【Fullscreen Lightbox Gallery With Thumbnail Navigation】

shu

どうもsgwです。

ちょっと前にVueで使えるサムネ付きライトボックスギャラリーを紹介したのですがモダンなフレームワークはわりとハードル高いし、ギャラリーのためだけにvueをプロジェクトにぶち込むのもどうかなって思ってたのですが、なんと！jQueryで超簡単にできるプラグインを見つけたので使い方解説していきます。

ちなみにvueで使えるやつはこちら

Lightboxより簡単？コピペで動く！Vue.jsで使えるサムネ付き超簡単レスポンシブ対応、画像ギャラリースライダー【TinyBox】

vueよりはUIは劣りますが、簡単に使えるサムネ付きライトボックスのjQueryプラグインはあまり無いので結構便利ではないかと思います

デモ

こんな感じのスライドを作れます。

sgw.today
sgw.today
https://sgw.today/demos/jqueryFullLightBox
ためになる雑記ブログ

実装してみる

まずダウンロードしたファイルを開くと

  • index.html
  • jsフォルダー
  • READ.me

があると思います。

基本ここは無視でjsというファイルを開くと今度は”lightboxed”ってフォルダがあるのでそれを開きます。

  • controls.png
  • lightboxed.css
  • lightboxed.js

ってフォルダがあるのでそれをプロジェクトに入れます。

今回は適当に作ってるのでsrcにぶちこんでますが用途に合わせてファイル分けしてください。

<link rel="stylesheet" href="./src/style.css" />
<link rel="stylesheet" href="./src/lightboxed.css" />

  <body>
    <div class="container">
      <h1>jQuery fullstack lightbox</h1>
    </div>
    <div class="container container--flex">
      <img
        class="lightboxed"
        src="https://i.picsum.photos/id/909/500/500.jpg?hmac=jfS9jLCYVgHM_3hZgM2DtS5ukZ0M8Juan_rku8N4OEE"
        alt="img1"
        rel="group1"
        data-link="https://i.picsum.photos/id/909/500/500.jpg?hmac=jfS9jLCYVgHM_3hZgM2DtS5ukZ0M8Juan_rku8N4OEE"
      />
      <img
        class="lightboxed"
        src="https://i.picsum.photos/id/557/500/500.jpg?hmac=VgywrD7fKCGhxMWKpslwlZCKExdTWsKc6v_4j9UrozM"
        alt="img2"
        rel="group1"
        data-link="https://i.picsum.photos/id/557/500/500.jpg?hmac=VgywrD7fKCGhxMWKpslwlZCKExdTWsKc6v_4j9UrozM"
      />
      <img
        class="lightboxed"
        src="https://i.picsum.photos/id/79/500/500.jpg?hmac=V9r3LL9l3ipDXhUa7Gglyku4tLjjL3Db_caLTMuHyU8"
        alt="img3"
        rel="group1"
        data-link="https://i.picsum.photos/id/79/500/500.jpg?hmac=V9r3LL9l3ipDXhUa7Gglyku4tLjjL3Db_caLTMuHyU8"
      />
      <img
        class="lightboxed"
        src="https://i.picsum.photos/id/311/500/500.jpg?hmac=go1dxawgPXWLBakwL-VWyDpm-VNVC4Za9D9zaXkIUhU"
        alt="img4"
        data-link="https://i.picsum.photos/id/311/500/500.jpg?hmac=go1dxawgPXWLBakwL-VWyDpm-VNVC4Za9D9zaXkIUhU"
      />
      <img
        class="lightboxed"
        src="https://i.picsum.photos/id/69/500/500.jpg?hmac=Yy0TZMsvfneh3zFqRAITH1q2JXAeOglipT_y4I9J3rM"
        alt="img5"
        rel="group1"
        data-link="https://i.picsum.photos/id/69/500/500.jpg?hmac=Yy0TZMsvfneh3zFqRAITH1q2JXAeOglipT_y4I9J3rM"
      />
      <img
        class="lightboxed"
        src="https://i.picsum.photos/id/392/500/500.jpg?hmac=IDJaWS3UnWgbQkqcGiJloXGZ6AqkAVk8O_ogApmWcIg"
        alt="img6"
        rel="group1"
        data-link="https://i.picsum.photos/id/392/500/500.jpg?hmac=IDJaWS3UnWgbQkqcGiJloXGZ6AqkAVk8O_ogApmWcIg"
      />
    </div>
  </body>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="./src/lightboxed.js"></script>
  <script src="./src/main.js"></script>

簡単に解説すると

先程のlightboxed.cssとlightboxed.jsを読み込んだ後に指定の属性とクラス、データ名をHTMLに書き込めば動きます。（main.jsはいりませんでしたw）

  • クラス名：lightboxed
  • イメージソース：サムネ画像
  • rel：グループ名（画像を開いた時のサムネに同じグループの画像が表示される）
  • data-link：画像をクリックした時に出てくる大きい画像

といった感じでめちゃくちゃ簡単です。

<img class="lightboxed" src="サムネURL" alt="サンプル画像"
        rel="group1" data-link="スライドURL"/>

ES5以降でimport

webpack、gulp等でコンパイルして使う時に使えるのか試してみました。

import '../filepath'

という形でimportしてみた物のプラグイン自体は読み込まれていますが、結果下のエラーが出てきます。

スライドとして出てくる画像も表示されたままになるのでなにか問題があるのかもしれないw

unable to preventdefault inside passive event listener due to target being treated as passive

preventdefaultのエラーなのでなにかしら書き直してみたら直るかもしれないですね。コンパイルする時にエラーになってるのかも。もう少しいろいろ試して見ます。

とりあえずまとめ！

今回の検証ではES5以降を使わず従来のやり方で作られてるサイト（もしくはES5でコンパイルしてるとしても別途jsを読み込めば）動くみたいです。（jqueryはmust）原因見つかり次第更新します。LPサイト、jquery使用のワードプレス、簡単なウェブサイトにはおすすめ。スタイルもプラグインに入ってるやついじれば結構カスタムできそうな気がしました。

またおもしろそうなjqueryプラグインがあったら紹介しますー！

それではSeeeee Yaaaaa!!!!

ABOUT ME
sgw
sgw
フロントエンド
カナダのBCITとか言う短大卒業。その後４年ほどカナダでWEB制作系フロントエンドエンジニアとして働いて、今は東京で働いてるニキの雑記ブログ。カナダ留学、英語、WEB制作、ポイ活などなどを主に記事として書いてます。
おすすめ記事
こんな記事も読まれています
記事URLをコピーしました