Galleriaは、フォトギャラリーをつくることが出来るライブラリです。
フォトギャラリーと言うか、スライドショーと言いますか、そんな感じのライブラリです。
高機能で、多様な見せ方が出来るため、スライドショーにもなるし、フォトギャラリーにもなるという感じです。
今回、サンプルではメイン画像部分に組み込みましたので、その部分だけを見るとスライドショーですが、有料のテーマを使ったりしますとフォトギャラリーとしてお使い頂けます。
基本的には無料で使えまして、かなり高機能な感じです。
無料でもプラグインは使うことが出来、例えば「flickr」から画像を拾ってきてスライドショーをつくる、、、ということが可能です。
今回はデフォルト設定でサンプルを組み込んでいます。
以下が本家サイトです。
以下のサイトで諸々のファイルをダウンロードして頂けます。
phptemp_gl_160705.zip
「Galleria」を組み込んだページのサンプルです。
当サイト内の「SEOの基礎知識」の中のコンテンツです。
組み込み手順は非常にシンプルです。
というだけで正常に表示されます。
今回は、画像の出力に関するCSSの装飾はありません。
基本的にはテーマでコントロールしていますので、インターフェイスを変えたい場合は有料テーマを購入するか、ご自身でカスタマイズするしかありません。
ここでは、オリジナルなカスタマイズについては触れませんので、予め宜しくお願い致します。
本家から本体ファイル「galleria-1.4.2.zip」（2016/7/5現在）をダウンロードしてきます。
その中にある以下のファイルが必要になります。
上記のファイルとフォルダをそれぞれjsファイル内に移動します。
追々、パスの書き換えなどが出てきますので、移動先のフォルダをよくチェックしておいてください。
当サイトで配布しているテンプレートの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で指定する必要がありました。
これはスマホの時でも同じでして、当サイトで配布している上記のサンプルファイル内ではそれぞれ適当に指定しています。
各々の環境に併せて修正をしてみてください。
今回、読み込む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/~」のフォルダの置き場ですので、適宜修正してください。
オプションについては、以下のページで確認することが出来ます。
ということで、それぞれの記述が出来ましたらそのままアップしてください。
特に問題なく表示されれば完了です。
WEBサイトテンプレート（PHP）の修正にあたって、以下の点に配慮しています。
「Galleria」の本家サイトでは丁寧なサポートもあり、とても接しやすいjQueryプラグインでした。
有料のテーマを試したわけではないのでアレですが、なかなか高機能なので、有料テーマを試してみる価値はあるかもしれません。
カスタマーログインなどもあるようなので、サポートは充実しているかもしれません。
有料テーマでは、スライドショーというよりもフォトギャラリーに近いモノになっていますので、一つのコンテンツとして画像だけを見せる時には是非とも使いたいjQueryプラグインかもしれませんね。
執筆 : 清水 隼斗
「画像ギャラリーのjQueryプラグイン「Galleria」の使い方」のシェアをお願い致します！