lightgallery.jsでかんたん！綺麗！全画面写真ギャラリー応用編

こんにちは以前lightgallery.jsを使ったギャラリーを投稿しました。ダウンロードからはじめ基礎的なことをまとめました。そして今回はlightgallery.jsを使いレスポンシブ対応のギャラリーを作ります！

HTML・CSSでギャラリーを作る

まずはlightgallery.jsを使わずにHTML・CSSのみでギャラリーを作ります。

<div id="lightgallery">
  <a href="yotamatsumaru.jp/img/main2.jpg">
    <img src="yotamatsumaru.jp/img/main2.jpg" />
  </a>
  <a href="yotamatsumaru.jp/img/IMG_1985.jpg">
    <img src="yotamatsumaru.jp/img/IMG_1985.jpg" />
  </a>
  <a href="yotamatsumaru.jp/img/IMG_3018.jpg">
    <img src="yotamatsumaru.jp/img/IMG_3018.jpg" />
  </a>
  <a href="yotamatsumaru.jp/img/IMG_2023.jpg">
    <img src="yotamatsumaru.jp/img/IMG_2023.jpg" />
  </a>
  <a href="yotamatsumaru.jp/img/MTS_1007.jpg">
    <img src="yotamatsumaru.jp/img/MTS_1007.jpg" />
  </a>
  <a href="yotamatsumaru.jp/img/7533307008_IMG_8984.JPG">
    <img src="yotamatsumaru.jp/img/7533307008_IMG_8984.jpg" />
  </a>
  <a href="yotamatsumaru.jp/img/IMG_8495.jpg">
    <img src="yotamatsumaru.jp/img/IMG_84951.jpg" />
  </a>
  <a href="yotamatsumaru.jp/img/img6767.jpg">
    <img src="yotamatsumaru.jp/img/img6767.jpg" />
  </a>
</div>

id=”lightgallery”をつけたdivを作り、その中に写真を埋め込みます。

クリックすると全画面で写真を表示させるため、<a>の中に<img>を入れます。

次にCSSです。

#lightgallery{
	display: flex;
	flex-wrap: wrap;
	max-width: 1200px; /*最大の幅*/
	margin: 0 auto;
}

#lightgallery a{
	text-decoration: none;
	flex: 1 1 300px; /*１つの記事の大きさ*/
	margin: 0;
	padding: 0;
}

#lightgallery img{
	width: 100%;
}

CSSはこれだけでOKです。max-widthとflex: 1 1 300pxのpxの値を変えて記事の大きさを変えてください。

オシャレ記事一覧の作り方を応用しています。詳しく知りたい方はこちらをチェック↑

lightgallery.jsをセットする

セットの仕方はとてもシンプルです。

 <script type="text/javascript">
    lightGallery(document.getElementById('lightgallery'));
  </script>

これをHTML内に入れるだけでOKです。

getElementByIdの値はidにしている名前に変えてください。この記事のコードを使用する場合はlightgalleryです。

lightgallery.jsを使った・全画面写真ギャラリー応用編

HTML・CSSでギャラリーを作る

lightgallery.jsをセットする

出来上がり！！！

コメント