Galleriaのカスタマイズ方法について

Galleria V1.2ではユーザが画面の見栄えや振る舞いを制御する仕組みとして、CSSファイルと専用のJavascriptソースコードが用意されています．まだほんの少ししかGalleriaのドキュメントやソースコードを眺めていないのでユーザ側でどのような事が可能なのか十分に把握できていませんが、現時点で分かっている事を幾つか説明してみたいと思います．

Galleria のオプション機能を用いたカスタマイズ

ユーザがテーマファイルを直接変更することなくカスタマイズする方法として、Galleria のオプション機能を利用する方法があります．オプションとしてどのような機能が組み込まれているのかは、ソースコードの中にあるオプションのドキュメント（ReStructuredTextという形式で記述されていますが、そのままテキストエディタで開いても問題有りません）を追っていくしかありません．

ホームページ上にもドキュメント（　href=”https://github.com/aino/galleria/blob/master/docs/options/README.rst”）　が用意されていますので、こちらの方がWEBブラウザベースで読むには都合が良いでしょう．
【追記：現在のドキュメントページは “http://galleria.aino.se/docs/1.2/” にあります】
オプションの指定の仕方しては、テーマファイルのJavascriptにも記述可能ですが、HTMLのソースコード中に指定する方が柔軟性が高いでしょう．Wordpressなどのプラグインで細かなオプション指定を行うには、このHTMLソースコード側に記述することになるでしょう．

HTMLソースコード側にオプションを記述する方法はマニュアルに記載されているように、

 
 jQuery('#galleria').galleria( {
    preload: 3,
    transition: 'fade',
    image_crop: true,
    min_scale_ratio : 0.5
} );
   

のように指定します．個々のオプションの説明を一々するわけにはいきませんので、詳細は各自でドキュメントを参照して下さい．

オプションの名前やパラメータなどは比較的分かり易い物が多いですが、data_config, extend, on_image などは実際に試行錯誤してみないと分からないかもしれません．これらのオプションのうち幾つかはテーマファイルのJavascript側でも操作可能ですので、恒久的な機能はテーマファイル側で行い、頻繁に変更する可能性があるものはHTML側のオプションで指定するのが良いでしょう．

参考例として on_image オプションの使い方を示します．on_imageはメインステージの画像の表示が完了した時点で呼び出されます．ステージ上に実際に表示されている画像のインスタンスが “image” 、選択されたサムネイル画像のインスタンスが “thumb” に設定されていますので、関数 functionの中で任意の処理を行うことが可能です．

この機能をどのように使いこなすかはユーザ次第ですが、オリジナルの画像サイズが大き過ぎてギャラリーのステージ上に縮小画像が表示されている場合には、画像のクリックでオリジナル画像を別ウインドウや “Lightbox 2” のような別の画像表示スクリプトで表示するとか．．．　様々な応用が考えられますね．

ちなみに、画像タグ <img> に “longdesc” 属性を付加しておくと表示されたメイン画像をクリックすると、longdesc属性に記述されたURI にリンクするようです．longdesc属性の用途としては画像の詳しい説明を補足するリンクとして使うのが一般的なようですが、Google Map などと組み合わせた写真の解説ページのリンクなどを載せるのも効果的かもしれません．

尚、このページのサンプルギャラリーの１枚目の画像には “longdesc” 属性を記述してあります．

 
jQuery('#galleria').galleria({

	max_scale_ratio: 1.0 ,
	on_image: function( image, thumb ) {
		
		var theGallery = this;
		// image is now the image element and gallery the instance

		jQuery( image ).click( function() {
			// do somethig ...
                        // メインステージ画像をクリックしたときの処理
		})

               // hilight thumbnail border frame
               // アクティブサムネイル画像の縁取り処理

		jQuery(thumb).css('border','2px yellow solid').parent().siblings().children().css('border','none');
        
    }

});
  

何となくオプションの使い方のイメージが掴めたでしょうか．Galleria のソースコード中にはユーザが自由に使えるメソッドやユーティリティー群が用意されていますので、それらを上手く使えば処理を簡単に記述できるかもしれません．

カスタムテーマファイルを用いてカスタマイズする

HTMLのソースコード中でカスタマイズ可能な標準のオプション機能は限られていますが、extend オプションを使えば自分のカスタマイズオプションを組み込むことができます．この機能はテーマファイルに組み込まれていないオプション機能を後で追加するための補助的なオプション機能だと考えて良いでしょう．

ユーザが自分専用のGalleriaギャラリーを作成するには、専用のテーマファイルを用意するのが手っ取り早い方法だと思います．

記事が長くなりましたので、カスタムテーマファイルを用いたギャラリーのカスタマイズについては次回に説明することにして、オリジナルの “classic” テーマファイルに少し手を加えて、EXIF タグ情報を表示するようにしたサンプルを示します．

---

ギャラリーのカスタマイズ参考例

HTMLソースコード： https://y2tech.net/galleria_test/test01a.html

テーマCSSファイル : https://y2tech.net/galleria_test/themes/classic/galleria.myclassic.css

テーマJavascriptファイル : https://y2tech.net/galleria_test/themes/classic/galleria.myclassic.js
　

---

同じページ内に複数のギャラリーを表示することも可能なようです．ギャラリーを２つ組み込んだ参考例です．（別ウインドウ/Tab が開きます）

https://y2tech.net/galleria_test/test02.html