画像ギャラリーのjQueryプラグイン「Galleria」の使い方

コラム

今回は画像ギャラリーをつくるjQueryプラグインの「Galleria」の使い方を解説致します。
画像ギャラリーのjQueryプラグインはたくさんあり、それぞれに特性がありますよね。
出来るだけその豊富な種類を知ってケースに応じて使い分けたいところです。
今回の「Galleria」は、多数の画像を見せたいと思われる方にとっては便利な機能を持っています。

「ちょっとは役に立ったかな？」や「ちょっと面白いな（笑）」みたいなことを感じられましたら、シェアして頂けますと幸いです。

jQuery/JS Tipsに投稿したコラム記事

画像ギャラリーのjQueryプラグイン「Galleria」の使い方

jQuery/JS Tips

Galleriaとは？

Galleriaは、フォトギャラリーをつくることが出来るライブラリです。
フォトギャラリーと言うか、スライドショーと言いますか、そんな感じのライブラリです。
高機能で、多様な見せ方が出来るため、スライドショーにもなるし、フォトギャラリーにもなるという感じです。

今回、サンプルではメイン画像部分に組み込みましたので、その部分だけを見るとスライドショーですが、有料のテーマを使ったりしますとフォトギャラリーとしてお使い頂けます。
基本的には無料で使えまして、かなり高機能な感じです。

無料でもプラグインは使うことが出来、例えば「flickr」から画像を拾ってきてスライドショーをつくる、、、ということが可能です。
今回はデフォルト設定でサンプルを組み込んでいます。

本家サイト

以下が本家サイトです。
以下のサイトで諸々のファイルをダウンロードして頂けます。

Galleria

ダウンロードと組み込みサンプル

Galleria組み込み済みファイルのダウンロード

phptemp_gl_160705.zip

組み込み済みサンプル

「Galleria」を組み込んだページのサンプルです。

組み込み済みサンプル

元になるWEBサイトテンプレート（PHP）について

当サイト内の「SEOの基礎知識」の中のコンテンツです。

コンテンツSEOのためのWEBサイトテンプレート（PHP）

組み込み手順

組み込み手順は非常にシンプルです。

必要なjsファイル「galleria-1.4.2.js」、「/themes/classic/~」をjsフォルダに移動します。
各種main.cssのメイン画像部分「#main」の装飾を修正します。
htmlソースを書き換えます。
全てのファイルをアップし完了です。

というだけで正常に表示されます。

今回は、画像の出力に関するCSSの装飾はありません。
基本的にはテーマでコントロールしていますので、インターフェイスを変えたい場合は有料テーマを購入するか、ご自身でカスタマイズするしかありません。
ここでは、オリジナルなカスタマイズについては触れませんので、予め宜しくお願い致します。

必要なファイルを移動します。

本家から本体ファイル「galleria-1.4.2.zip」（2016/7/5現在）をダウンロードしてきます。
その中にある以下のファイルが必要になります。

galleria-1.4.2.js
/themes/classic/~

上記のファイルとフォルダをそれぞれjsファイル内に移動します。
追々、パスの書き換えなどが出てきますので、移動先のフォルダをよくチェックしておいてください。

各種main.cssのメイン画像部分を修正します。

当サイトで配布しているテンプレートのmain.cssの中にある「#main」の箇所を修正してください。

#main {
	width: 100%;
}

.galleria {
	width: 1000px;
	height: 334px;
	margin: 0 auto;
}

#main {
	width: 100%;
	margin-bottom: 20px;
}

.galleria {
	width: 97%;
	height: 150px;
	margin: 0 auto;
}

#main {
	width: 100%;
	margin-bottom: 20px;
}

.galleria {
	width: 97%;
	height: 150px;
	margin: 0 auto;
}

ここで重要なポイントがありまして。
必ず高さは指定しなければいけないようです。
%での記述ではなく、pxで指定する必要がありました。

これはスマホの時でも同じでして、当サイトで配布している上記のサンプルファイル内ではそれぞれ適当に指定しています。
各々の環境に併せて修正をしてみてください。

htmlに必要な記述をします。

今回、読み込むjQueryファイルはデフォルトで読み込ませているファイルではありません。
Galleria本家で読み込まれていたファイルに変更しています。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>

<script src="/js/galleria-1.4.2.js"></script>

次に、メイン画像部分をごそっと以下の記述に修正をします。

<div id="main">
<div class="galleria">
<img src="/img/mainimg_01.jpg" alt="テスト１です" />
<img src="/img/mainimg_02.jpg" alt="テスト２です" />
<img src="/img/mainimg_03.jpg" alt="テスト３です" />
<img src="/img/mainimg_03.jpg" alt="テスト４です" />
<img src="/img/mainimg_03.jpg" alt="テスト５です" />
<img src="/img/mainimg_03.jpg" alt="テスト６です" />
<img src="/img/mainimg_03.jpg" alt="テスト７です" />
<img src="/img/mainimg_03.jpg" alt="テスト８です" />
<img src="/img/mainimg_03.jpg" alt="テスト９です" />
<img src="/img/mainimg_03.jpg" alt="テスト１０です" />
<img src="/img/mainimg_03.jpg" alt="テスト１１です" />
<img src="/img/mainimg_03.jpg" alt="テスト１２です" />
<img src="/img/mainimg_03.jpg" alt="テスト１３です" />
</div>
<script>
Galleria.loadTheme('/js/themes/classic/galleria.classic.min.js');
option = {
_toggleinfo:false, // オプションはここに記述してください。
}
Galleria.run('.galleria');
</script>
</div>

ソース中のパスについて、「/themes/classic/~」のフォルダの置き場ですので、適宜修正してください。

オプションについては、以下のページで確認することが出来ます。