先ずは簡単なサンプルで試して見る
完全に新しく書き直されたGalleria V1.2 のソースコードをほんの少し紐解いてみましたが、あまりにも膨大かつ複雑でどこから手を出して良いのかわからないので、とりあえずホームページのサンプルを参考に、実際にどのような動きをするのか追ってみました．
尚、今回用いたソースコードは、” Galleria v 1.2 prerelease 1.1 2010-11-14 ” ですので、まだ正式リリース版ではないようです．11月中に正式リリース版を出す予定のようですが、少し遅れるかも知れませんね．
これから数回に分けて、新しくなった Galleria の機能を追っていきたいと思いますが、最近は専ら山歩きの方が忙しくてIT関係の事は後回しなので暇なときにでも随時UPしていきます．
先日退職したので本来なら次の仕事探しに精を出さなければならない筈なのですが、天気が良いとどうしても山の事が気になってしまって．．．(^_^;)
ソースコードの前処理
Galleria V1.2は “jQuery” をベースに書かれていますが、他のJavascript フレームワークや WordPress などとのネームスペースのコンフリクトを避けるため、予め “$” というjQueryのショートカットの名前を書き換えておきます．
ソースコードの名前の書き換え自体はそれほど面倒な作業ではありませんが、関係ない部分まで書き換えてしまわないように注意して下さい．
jQueryのショートカット（”$”）の名前の書き換えについては”Using jQuery with Other Libraries” を参考にして下さい．
サンプルHTMLコード [ #1 ]
先ずは何もいじらない状態のHTMLサンプルコードを用意して動かしてみます．Wordpress の中で動かすと、前のバージョンの Galleria WP プラグインと被ってしまいますので今回はWordpressの外部のページを用意しました．<ifram> タグを使用して取り込んでいます．
使用したHTMLソースコード
[sourcecode light=”true”]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta charset="UTF-8" />
<title>Galleria Test : #001</title>
<script src="./jquery-1.4.4.min.js"></script>
<script src="./galleria_test.js"></script>
<style>
#galleria_test01 { width:640px; height: 580px; margin: 0 auto; }
</style>
</head>
<body>
<div id="galleria_test01" >
<a href=’./photo/G0011954.jpg’ >
<img src=’./photo/thumbs/G0011954.jpg’ alt="ペシ岬" title="鴛泊港からペシ岬を眺める" />
</a>
<a href=’./photo/G0011973.jpg’ >
<img src=’./photo/thumbs/G0011973.jpg’ alt="眼下には沓形の街並が" title="振り返れば眼下には沓形の街並が" />
</a>
<a href=’./photo/G0011989.jpg’ >
<img src=’./photo/thumbs/G0011989.jpg’ alt="険しい痩せ尾根が続く" title="ガスの中を険しい痩せ尾根を登って行く" />
</a>
<a href=’./photo/G0012002.jpg’ >
<img src=’./photo/thumbs/G0012002.jpg’ alt="利尻山の頂上が顔を覗かせた" title="ガスが切れ利尻山の頂上が顔を覗かせた" />
</a>
<a href=’./photo/G0012013.jpg’ >
<img src=’./photo/thumbs/G0012013.jpg’ alt="三眺山からの眺め" title="三眺山から眺める頂上の様子は格別だった" />
</a>
<a href=’./photo/G0012020.jpg’ >
<img src=’./photo/thumbs/G0012020.jpg’ alt="背負い子投げの難所" title="背負い子投げの難所をロープを伝って無事通過" />
</a>
<a href=’./photo/G0012023.jpg’ >
<img src=’./photo/thumbs/G0012023.jpg’ alt="親知らず子知らず" title="落石危険地帯の『親知らず子知らず』をトラバースする" />
</a>
<a href=’./photo/G0012032.jpg’ >
<img src=’./photo/thumbs/G0012032.jpg’ alt="鴛泊コースと合流" title="9.5合目で鴛泊コースと合流する" />
</a>
<a href=’./photo/G0012049.jpg’ >
<img src=’./photo/thumbs/G0012049.jpg’ alt="利尻山の勇姿" title="振り返ると利尻山の勇姿が" />
</a>
<a href=’./photo/G0012055.jpg’ >
<img src=’./photo/thumbs/G0012055.jpg’ alt="眼下には鴛泊の街が" title="眼下に鴛泊の街が見えてきた" />
</a>
<a href=’./photo/G0012068.jpg’ >
<img src=’./photo/thumbs/G0012068.jpg’ alt="利尻島" title="帰りのフェリーから利尻島を振り返る" />
</a>
</div>
<script>
jQuery.noConflict();
// Load the classic theme
Galleria.loadTheme(‘./themes/classic/galleria.classic.js’);
// Initialize Galleria
jQuery(‘#galleria_test01’).galleria();
</script>
</body>
</html>
[/sourcecode]
このHTMLソースは https://y2lab.org/galleria_test/test01.html に置いてあります．
Galleriaが出力するHTML（DOMエレメント）
Galleria の動作や振る舞いを把握するには先ずは Galleria がどのようなHTMLコードを出力しているのか確認する必要があります．当然ながらGalleria は Javascript ベースですのでWEBブラウザのDOMエレメントをダイナミックに操作しています．普通のWEBブラウザで “ソースコードを見る” とやっても無駄です．
実際に Galleria が動作中にどのようなHTMLコードを出力しているのか確認するには、WEBブラウザのデバッガなどを使って確認してみる必要があります．私が普段使っている Safari 5 のデバッギング機能を使ってGalleriaが出力したHTMLコードをダンプしてみました．
[sourcecode lang=”xml”]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta charset="UTF-8">
<title>Galleria Test : #001</title>
<script src="./themes/classic/galleria.classic.js" async="true"></script><script src="./jquery-1.4.4.min.js"></script> <script src="./galleria_test.js"></script>
<link rel="stylesheet" href="https://y2lab.org/galleria_test/themes/classic/galleria.classic.css" id="galleria-theme">
<style>
#galleria_test01 { width:640px; height: 580px; margin: 0 auto; }
</style>
</head>
<body>
<div id="galleria_test01">
<div class="galleria-container" style="width: 640px; height: 580px; ">
<div class="galleria-stage">
<div class="galleria-images" style="position: relative; top: 0px; width: 100%; height: 100%; left: 0px; ">
<div class="galleria-image" style="overflow-x: hidden; overflow-y: hidden; position: absolute; top: 0px; left: 0px; z-index: 0; opacity: 0; ">
</div>
<div class="galleria-image" style="overflow-x: hidden; overflow-y: hidden; position: absolute; top: 0px; width: 620px; height: 510px; left: 0px; z-index: 1; opacity: 1; ">
<img style="display: block; width: 620px; height: 414px; position: relative; top: 48px; left: 0px; opacity: 1; " src="./photo/G0011954.jpg">
</div>
</div>
<div class="galleria-loader" style="display: none; opacity: 0.4; ">
</div>
<div class="galleria-counter" style="opacity: 0; ">
<span class="galleria-current">1</span> / <span class="galleria-total">11</span>
</div>
<div class="galleria-image-nav">
<div class="galleria-image-nav-right" style="right: -50px; ">
</div>
<div class="galleria-image-nav-left" style="left: -50px; ">
</div>
</div>
</div>
<div class="galleria-thumbnails-container galleria-carousel">
<div class="galleria-thumb-nav-left disabled">
</div>
<div class="galleria-thumbnails-list" style="overflow-x: hidden; overflow-y: hidden; position: relative; ">
<div class="galleria-thumbnails" style="overflow-x: hidden; overflow-y: hidden; position: relative; width: 737px; height: 42px; ">
<div class="galleria-image active" style="overflow-x: hidden; overflow-y: hidden; position: relative; width: 60px; height: 40px; ">
<img style="display: block; width: 60px; height: 40px; position: relative; opacity: 1; left: 0px; top: 0px; " src="./photo/thumbs/G0011954.jpg">
</div>
<div class="galleria-image" style="overflow-x: hidden; overflow-y: hidden; position: relative; width: 60px; height: 40px; ">
<img style="display: block; width: 60px; height: 40px; position: relative; left: 0px; top: 0px; opacity: 0.6; " src="./photo/thumbs/G0011973.jpg">
</div>
<div class="galleria-image" style="overflow-x: hidden; overflow-y: hidden; position: relative; width: 60px; height: 40px; ">
<img style="display: block; width: 60px; height: 40px; position: relative; left: 0px; top: 0px; opacity: 0.6; " src="./photo/thumbs/G0011989.jpg">
</div>
<div class="galleria-image" style="overflow-x: hidden; overflow-y: hidden; position: relative; width: 60px; height: 40px; ">
<img style="display: block; width: 60px; height: 40px; position: relative; left: 0px; top: 0px; opacity: 0.6; " src="./photo/thumbs/G0012002.jpg">
</div>
<div class="galleria-image" style="overflow-x: hidden; overflow-y: hidden; position: relative; width: 60px; height: 40px; ">
<img style="display: block; width: 60px; height: 40px; position: relative; left: 0px; top: 0px; opacity: 0.6; " src="./photo/thumbs/G0012013.jpg">
</div>
<div class="galleria-image" style="overflow-x: hidden; overflow-y: hidden; position: relative; width: 60px; height: 40px; ">
<img style="display: block; width: 60px; height: 40px; position: relative; left: 0px; top: 0px; opacity: 0.6; " src="./photo/thumbs/G0012020.jpg">
</div>
<div class="galleria-image" style="overflow-x: hidden; overflow-y: hidden; position: relative; width: 60px; height: 40px; ">
<img style="display: block; width: 60px; height: 40px; position: relative; left: 0px; top: 0px; opacity: 0.6; " src="./photo/thumbs/G0012023.jpg">
</div>
<div class="galleria-image" style="overflow-x: hidden; overflow-y: hidden; position: relative; width: 60px; height: 40px; ">
<img style="display: block; width: 60px; height: 40px; position: relative; left: 0px; top: 0px; opacity: 0.6; " src="./photo/thumbs/G0012032.jpg">
</div>
<div class="galleria-image" style="overflow-x: hidden; overflow-y: hidden; position: relative; width: 60px; height: 40px; ">
<img style="display: block; width: 60px; height: 40px; position: relative; left: 0px; top: 0px; opacity: 0.6; " src="./photo/thumbs/G0012049.jpg">
</div>
<div class="galleria-image" style="overflow-x: hidden; overflow-y: hidden; position: relative; width: 60px; height: 40px; ">
<img style="display: block; width: 60px; height: 40px; position: relative; left: 0px; top: 0px; opacity: 0.6; " src="./photo/thumbs/G0012055.jpg">
</div>
<div class="galleria-image" style="overflow-x: hidden; overflow-y: hidden; position: relative; width: 60px; height: 40px; ">
<img style="display: block; width: 60px; height: 40px; position: relative; left: 0px; top: 0px; opacity: 0.6; " src="./photo/thumbs/G0012068.jpg">
</div>
</div>
</div>
<div class="galleria-thumb-nav-right">
</div>
</div>
<div class="galleria-info">
<div class="galleria-info-text">
<div class="galleria-info-title">
鴛泊港からペシ岬を眺める
</div>
<div class="galleria-info-description">
ペシ岬
</div>
<div class="galleria-info-author" style="display: none; ">
</div>
</div>
<div class="galleria-info-link">
</div>
<div class="galleria-info-close">
</div>
</div>
<div class="galleria-tooltip">
</div>
</div>
</div>
<script>
jQuery.noConflict();
// Load the classic theme
Galleria.loadTheme(‘./themes/classic/galleria.classic.js’);
// Initialize Galleria
jQuery(‘#galleria_test01’).galleria();
</script>
</body>
</html>
[/sourcecode]
Galleria をカスタマイズして自分専用のGalleria を作る場合の参考になりますね．Galleriaのデフォルト設定だけではどうしても不便ですので、必要な機能を追加したり余分な機能を削らなければなりません．
まだ、Galleria V1.2を触り始めたばかりですので極一部の機能しか把握できていませんが、今後オプションの設定や自分専用の拡張を施す方法について調べていきたいと思います．
記事が長くなってしまったので今回はこの辺にしておきます．
