HOME > コラム > WEB全般 > 画像ギャラリーのjQueryプラグイン「Galleria」の使い方

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

コラム

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

WEB全般に投稿したコラム記事

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

Galleriaサイトイメージ
Galleriaとは?

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

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

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

本家サイト

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

ダウンロードと組み込みサンプル
Galleria組み込み済みファイルのダウンロード
phptemp_gl_160705.zip
組み込み済みサンプル

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

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

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

組み込み手順

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

  • 必要な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="テスト1です" />
<img src="/img/mainimg_02.jpg" alt="テスト2です" />
<img src="/img/mainimg_03.jpg" alt="テスト3です" />
<img src="/img/mainimg_03.jpg" alt="テスト4です" />
<img src="/img/mainimg_03.jpg" alt="テスト5です" />
<img src="/img/mainimg_03.jpg" alt="テスト6です" />
<img src="/img/mainimg_03.jpg" alt="テスト7です" />
<img src="/img/mainimg_03.jpg" alt="テスト8です" />
<img src="/img/mainimg_03.jpg" alt="テスト9です" />
<img src="/img/mainimg_03.jpg" alt="テスト10です" />
<img src="/img/mainimg_03.jpg" alt="テスト11です" />
<img src="/img/mainimg_03.jpg" alt="テスト12です" />
<img src="/img/mainimg_03.jpg" alt="テスト13です" />
</div>
<script>
Galleria.loadTheme('/js/themes/classic/galleria.classic.min.js');
option = {
_toggleinfo:false, // オプションはここに記述してください。
}
Galleria.run('.galleria');
</script>
</div>

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

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

全部のファイルをアップしてください

ということで、それぞれの記述が出来ましたらそのままアップしてください。
特に問題なく表示されれば完了です。

その他、補足

WEBサイトテンプレート(PHP)の修正にあたって、以下の点に配慮しています。

  • 今回、サンプルにしたWEBサイトテンプレート(PHP)は「 phptemp_160202.zip 」です。
締め

「Galleria」の本家サイトでは丁寧なサポートもあり、とても接しやすいjQueryプラグインでした。

有料のテーマを試したわけではないのでアレですが、なかなか高機能なので、有料テーマを試してみる価値はあるかもしれません。
カスタマーログインなどもあるようなので、サポートは充実しているかもしれません。

有料テーマでは、スライドショーというよりもフォトギャラリーに近いモノになっていますので、一つのコンテンツとして画像だけを見せる時には是非とも使いたいjQueryプラグインかもしれませんね。

執筆 : 清水 隼斗

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

Facebookコメント

他のカテゴリ記事は下記からお選び下さい。
SEO対策に関する記事を投稿するカテゴリです。とにかく、SEO対策のことのみを記事にしようと思います。弊社の本業です(笑)
インターネットやWEBに関する総合情報に関する記事を投稿するカテゴリです。技術的なことでも出来るだけ分かりやすくしていこうと思います。
社内での出来事やランチのことなど、小さなことから大きなことまでを投稿するカテゴリです。少人数なのでネタは限られてますが面白可笑しくいきます!
その他、上記に当てはまらないことは全てこのカテゴリに投稿します。弊社の歴史・・・というわけではありませんが、後になって懐かしむことが出来る記事を投稿します。
株式会社SEMラボラトリー
TEL : 06-4394-8427
MAIL : info@oosaka-web.jp
PAGE TOP