画像を拡大して表示するjQueryプラグイン「Ligntbox」を簡単に導入する方法

今回は画像をクリックすると拡大表示して見やすくできるjQueryプラグイン「Lightbox」を簡単に導入する方法を解説します。

色々なサイトで使われているので、見たことある人も多いんじゃないかと思います。

 

Ligntbox導入

ダウンロードして導入する場合は以下のサイトからダウンロードしてきます↓

Lightbox

 

ダウンロードすると様々なファイルが用意されていますが、基本的に使用するファイルは以下の通りです。

  • jsフォルダ内の「lightbox.js」
  • cssフォルダ内の「lightbox.css」
  • imgフォルダ内の画像4つ(close.png/loading.gif/prev.png/next.png)

 

また、LigntboxはjQueryプラグインなので、jQuery本体も導入することを忘れないようにしましょう。

jQuery本体は以下のサイトからダウンロードできます↓

jquery.com

 

また、ダウンロードするのが面倒な場合はcdnで読み込むこともできます。

<link rel="stylesheet" href="css/lightbox.css">
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <script src="js/lightbox.js" type="text/javascript"></script>

 

パスは環境によって各自変更してください。

以上で導入は終わりです。

 

Lightboxの使い方

Lightboxを使うには、拡大したい画像を<a>タグで囲み、rel=”lightbox”と指定します。また、href属性には画像のパスを指定します。

具体例は以下のような感じです。

<p>
  <a href="images/image-1.jpg" rel="lightbox">
    <img src="images/thumb-1.jpg" alt="" width="100" />
  </a>
</p> 

 

またLightboxは画像をグループ化して前後の画像に移動することもできます。

例えば今回の場合は、「rel=”lightbox”」となっていると部分を「rel=”lightbox[sample-group]”」といったように書き換えます。

すると「sample-group」というグループが作成され、同じくsample-groupを指定した画像がグループ化されます。

グループ化すると画像の左右をクリックすることで次や前の画像がそのまま表示できるようになります。

 

デフォルトのスタイルでも十分ですが、スタイルを変更したい場合はlightbox.cssを編集することになります。

もっとかっこいいスタイルにしたい人はぜひ自分好みにカスタマイズしてみてください。

 

まとめ

以上Lightboxの使い方でした。

導入も簡単だしユーザーの満足度も多少上がると思うので、気になる人はぜひ導入してみてください。