JavaScriptでフォトギャラリーを作成する方法を現役エンジニアが解説【初心者向け】

JavaScriptでフォトギャラリーを作成する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。

JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。

 

 

目次

• フォトギャラリーとは
• フォトギャラリーを作成する方法
• 実際に作成してみよう
• まとめ

 

フォトギャラリーとは

フォトは写真、ギャラリーは画廊や美術品の展示場のような意味になります。Webでのフォトギャラリーとは、平たく言うと画像が並んだページということになります。

商品の画像が並んでいるページや風景の写真などが並んでいるようなページは、見かける機会も多いです。また、画像をただ並べるだけではなくアニメーションを使って次々と画像を切り替えられるようにすることでより見やすくなります。

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

フォトギャラリーを作成する方法

CSSでレイアウトや背景色などの見栄えを整えJavaScriptでスライドできるようにしたりと、自作すると大変です。すでにあるプラグイン（部品）を利用するとよいでしょう。

今回はjQueryも必要なく、単体で動作できるlightgallery.jsを使ってフォトギャラリーを作成する方法を紹介します。

実際に作成してみよう

今回は画像を6枚使って下記のようなフォトギャラリーを作ります。クリックすると横に流れるように画像が切り替わっていることが確認できます。

作成の流れは、主に下記の4つです。

1、画像を用意する
2、lightgalleryのjsとcssを読み込む
3、HTMLに画像とリンクを記述する
4、JavaScriptでlightgalleryの処理を呼び出す

まずは画像を用意します。

今回は商用利用もOKなLorem Picsumのサイトで画像を6つ用意しましたので、この6枚でフォトギャラリーを作成します。もちろん画像は好きなものを何枚でも設定できますので、自身で用意したものがある方はそれを使ってください。
Lorem Picsumはこちら

次にlightgalleryのjsとcssの読み込みです。

lightgalleryのサイトでファイルをダウンロードして読み込みでも良いですが、今回はより楽に作るためにコンテンツ配布サイトを利用します。コンテンツ配布サイトのcdn.jsdelivr.netからjsとcssを読み込みます。

HTMLのheadタグの中に下記の2つを記述してください。

<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lightgallery.js@1.2.0/src/css/lightgallery.css" /> 
<script src="https://cdn.jsdelivr.net/npm/lightgallery.js@1.2.0/dist/js/lightgallery.min.js"></script>

続いてHTMLの記述です。

画像のタグ全てをdivタグで囲い、JavaScriptからのアクセスようにidをつけます。divタグの中は、リンクのaタグの中に画像のimgタグを画像の数だけ入れます。

<div id="lightgallery">
  <a href="https://picsum.photos/id/237/200/300"><img src="https://picsum.photos/id/237/100/100" /></a>  
  <a href="https://picsum.photos/id/1018/200/300"><img src="https://picsum.photos/id/1018/100/100" /></a>
  <a href="https://picsum.photos/id/239/200/300"><img src="https://picsum.photos/id/239/100/100" /></a>
  <a href="https://picsum.photos/id/1001/200/300"><img src="https://picsum.photos/id/1001/100/100"></a>
  <a href="https://picsum.photos/id/1002/200/300"><img src="https://picsum.photos/id/1002/100/100"></a>
  <a href="https://picsum.photos/id/1003/200/300"><img src="https://picsum.photos/id/1003/100/100"></a>
</div>

最後にJavaScriptでlightgalleryを実行します。
下記の1行だけです。

lightGallery(document.getElementById('lightgallery'));

第1引数に画像全体を囲ったdivタグを渡しています。

第2引数は省略可能ですが、指定するとスライドの向きやダウンロードの無効など細かな設定も可能です。
お好みでオプションを追加してください。
オプションはこちら

まとめ

画像の表示に少し手を加えるだけでスマホやPCのどちらでも表示できるフォトギャラリーが作成できました。

カスタマイズも簡単なのでぜひお試しください。

筆者プロフィール

横山茂雄（よこやましげお） フリーエンジニアとして活動中。サーバーサイドからフロントまで時代の波に合わせてスキルを変化させてきました。 言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。TechAcademyジュニアのゲームアプリコースを担当しています。

 

 

TechAcademyでは、初心者でも最短4週間で、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。