コピペでできるlightbox2を使ったギャラリーの表示

2020年7月10日 2分

拡大画像を表示するJavaScriptライブラリ「jQuery lightBox」はギャラリー表示するプラグインで便利です。

今回は、コピペでできるlightbox2を使ったギャラリーの表示についてご紹介します。

ボタンクリックでギャラリー表示
</head> の前に置く外部ファイル
コピペ用コード

ボタンクリックでギャラリー表示

lightboxのコンテンツ画像の幅と高さに基づいて自動的にサイズを変更し、この時画像の幅と高さの比率で表示されます。

写真を見る

</head> の前に置く外部ファイル

lightboxはGoogleにホスティングされているものを外部ファイルとして読み込む場合は、以下のコードを <head>〜</head>の中に記述します。

外部ファイル

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/css/lightbox.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/js/lightbox.min.js" type="text/javascript"></script>

SANGOには標準で組み込まれていますが、JQueryも必要なのでない場合は以下URLから最新版のものも併せて <head>〜</head>の中 に記述しましょう。

＞＞＞ JQuery

コピペ用コード

プラグインの記述が完了したら、表示したい場所にHTMLとCSSを記述します。

ギャラリーで複数枚の画像を表示させたい場合は、 <!–ここからギャラリー用画像–> 〜〜〜〜 <!–ここまでギャラリー用画像–> の中に aタグと一緒に追加して記述しましょう。

コードを表示する

HTML

<div class="linkmodal"><a href="https://dubdesign.net/wp-content/uploads/2020/07/marketingskill_eyecatch.jpg" data-lightbox="group1" data-title="写真1" class="shing"><i class="fas fa-eye"></i> 写真を見る</a></div>
<!--ここからギャラリー用画像-->
<div style="display: none;">
<ul>
<li class="gallery__item"><a href="https://dubdesign.net/wp-content/uploads/2020/06/tateeyecatch.jpg" data-lightbox="group1" data-title="写真2"><img src="https://dubdesign.net/wp-content/uploads/2020/06/tateeyecatch.jpg" alt=""></a></li>
</ul>
</div>
<!--ここまでギャラリー用画像-->

CSS

.linkmodal a {
    display: block;
    background: #D80C18;
    padding: 10px 4%;
    font-size: 14px;
    text-decoration: none;
    color: #FFF;
    border-radius: 6px;
    margin: 14px auto;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, .3);
}

.linkmodal a:hover {
    opacity: 0.95;
	transition: 0.3s;
	box-shadow: none;
	transform:translateY(1px)
}

.gallery__list {
  list-style-type: none;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.gallery__item {
  width: calc(95% / 2);
}
.gallery__item:not(:nth-child(-n+2)) {
  margin-top: 20px;
}
.gallery__item img {
  width: 100%;
  height: auto;
}
.gallery__item a {
  transition: .5s;
}
.gallery__item a:hover {
  filter: opacity(0.7);
}
.gallery__item a:hover img {
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
}