Galleria V1.2の機能拡張に関する補足事項

11月に正式版をリリースする予定だというGalleria V1.2ですが、まだ何もアナウンスがないところを見るとバグフィクスがまだ十分ではないのかもしれません．

ギャラリーの画像を表示する際に、既に表示した画像に戻ったときに時折画像が表示されない（画像のwidth, height属性が 0 になってしまっている）場合が見受けられます．どのような時にこの現象が起きるのか突き止めていないので、まだバグ報告はしていませんが時間があれば追跡してみたいと思います．

Galleriaのドキュメントを眺めていたら、機能拡張の参考になりそうな記述がありましたので、そのうちの幾つかについて補足説明をしておきます．

　

・”this” キーワードの取り扱い

Galleria本体のソースコードやテーマファイルの中に頻繁に現れる、 “this” というJavascriptのキーワードがありますが、この “this” の指しているオブジェクトがその使われているコンテキストによって異なります．（ “$” ショートカットの代わりに “jQuery” を用いています）

    jQuery( this.get('stage') ).click( function( e ) { 
        this.openLightbox();   // この場合の this は 'stage' classの div 要素（HTML)        
                                           // 従ってLightboxメソッドは使えない
    } );

このように “this” と単純に記述すると紛らわしいので、Galleriaオブジェクトに関しては別な名前のオブジェクト変数を用意して次のように区別して使うように推奨しています．

    var  gallery = this;
    jQuery( gallery.get('stage') ).click( function( e ) {
        gallery.openLightbox(); // LightboxメソッドはOK
    }); 

・ “proxy” メソッド

jQueryのコールバック関数内でも “this” が Galleriaのインスタンスを指すように proxy メソッドが用意されています．

    jQuery( this.get('stage') ).click( this.proxy( function( e ) {
        this.openLightbox(); // Lightbox メソッドも OK
        jQuery( e.currentTarget ).addClass('newclass'); // jQueryの操作
});

やはり無理矢理 this を使うより、別なGalleriaインスタンスを用意しておく方がすっきりしていて分かり易いですね．

・ “extend” オプション

この “extend” オプションを利用すると、WEBコンテンツ毎に個別にGalleriaの機能を変更することができます．オリジナルのドキュメントではステージ上の画像をクリックするとLightbox表示を行うサンプルが示されていますが、ここでは趣向を変えてサムネイル上の画像をダブルクリックすると自動スライドショーを開始するようにしてみましょう．

Galleria のオプションにも自動スライドショーの機能は用意されているのですが、ユーザの意志とは無関係に勝手に自動スタートしてしまいますのでちょっと不便です．そこでユーザがボタンをクリックしたり特定のキー入力を行ったりした場合にスライドショーがスタートするようにしてみます．

自動スライドショーのコントロール方法についてはまた別な機会に説明したいと思いますが、ここでは オプション機能だけを使って組み込んでみます．

	// Initialize Galleria
	jQuery('#galleria12').galleria( { 
		max_scale_ratio: 1.0,
		min_scale_ratio: 0.5, 
		extend: function( options ) {
			this.bind( Galleria.THUMBNAIL, function( e ) {
			
				jQuery( e.thumbTarget ).dblclick( this.proxy( function() {
					this.play( 3000 ); // interval [ ms ]
				}));
			});
		}
	} );

---

サムネイル画像をダブルクリックすることによって自動スライドショーを開始させる例

　
※任意のサムネイル画像上でダブルクリックすると、その画像から自動スライドショーが始まります（画像表示間隔は３秒に設定してあります）
HTMLソースコード： https://y2lab.org/galleria_test/test01c.html

---