2021.12.4|JavaScript(jQuery)

画像も動画もポップアップで拡大表示させるLightbox「Sexy Light Box」の設定方法

画像も動画もポップアップで拡大表示させるLightbox「Sexy Light Box」の設定方法

ホームページの画像をクリックしたときに、JavaScriptライブラリを使うことによって、背景が暗くなって画像がポップアップして浮かびあがってくる表示をすることができます。
画像をポップアップで拡大表示させる仕組みのことをlightbox「ライトボックス」とよびます。
画像をポップアップで拡大表示させるjQueryプラグイン「Sexy Light Box Plugin」の設定方法を解説します。

画像をポップアップで拡大表示させる設定方法

1.jQueryライブラリをダウンロード

下記からJavaScriptライブラリ、のダウンロードを行ってください。
jQueryライブラリダウンロード
Lightbox.jsダウンロード
Lightbox.cssダウンロード

2.htmlファイル内に記述

「JavaScript」ファイルへのディレクトリをメタタグに記述します。

htmlファイルにJavaScriptの記述
<meta charset="UTF-8">
<title>画像も動画もポップアップで拡大表示させるLightbox「sexy-lightbox」の設定方法|Webデザイナーブログ</title>
<meta name="description" content="jQueryを使った画像も動画もポップアップ出来るjQuery「Lightbox jQuery」のご紹介を致します。">
<meta name="keywords" content="動画,ホームページ作成方法,jQuery,ホームページ制作,ポップアップ,lightbox,sexy-lightbox,画像">
<meta name="robots" content="all">
<link rel="stylesheet" type="text/css" href="/sample/003/base.css" media="all" />
<script type="text/javascript" src="/sample/003/jquery.js"></script>
<script type="text/javascript" src="/sample/003/jquery.lightbox.js"></script>
<script type="text/javascript">
    jQuery(document).ready(function($){
      $('.lightbox').lightbox();
    });
  </script>
ポップアップさせたい画像を記述
<a href="/sample/003/img/magazine01.jpg" width="960" title="sexy-lightbox" class="lightbox"><img src="/sample/003/img/magazine01.jpg" width="300" alt="sexy-lightbox" /></a>

実装サンプル

実装サンプルを作りましたのでこちらでも確認してみてください。
Sexy Light Box デモ

まとめ

以上で設定完了となりますが、簡単に設定ができますね。
ここでご紹介したlightbox「ライトボックス」は比較的綺麗に見えるlightbox「ライトボックス」ですが、この手のライブラリは沢山ありますので、色んなライブラリを試してみるのも良いかと思います。
画像にアクションを起こすことでユーザーへの意識を寄せることができます。Webサイトは見ている人が飽きずに楽しめるWebサイトづくりを心掛けましょう。