=== Galleria WP ===
Contributors: Y2 (Yokoyama Yasuaki)
Donate link: https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=y2%40y2itec%2ecom&item_name=Galleria%20WP&no_shipping=1&no_note=1&tax=0¤cy_code=USD&lc=US&bn=PP%2dDonationsBF&charset=UTF%2d8
Tags: plugin, image gallery, slideshow, short code, jQuery, Galleria, jCarousel, NextGEN Gallery
Requires at least: 2.5.0
Tested up to: 2.5.1
Stable tag: 1.2.5 (Build 708 : 6/23 2008)
Galleria WP は WordPress2.5 用に作成されたちょっとだけ多機能な画像表示プラグインです．
== Description ==
Galleria WP では画像表示のメイン部分は "Galleria" ライブラリを用いています．サムネイルのスクロール表示部分は
"jCarousel" を用いています．"Galleria", "jCarousel" 共に "jQuery" Javascript フレームワークを用いて作成
されています．
まだ、WordPress や PHP, Javascript, jQuery フレームワークを使い始めてから日が浅いせいもあり、
プログラム中にバグや ??? な部分、全然スマートではないコードが沢山あるかと思います．
このプラグインも最初は単機能な画像表示プラグインでしたが、 何の計画性もないまま無頓着に機能を拡張
して行ったせいで、巨大で醜悪なコードになってしまいました．どこかのメタボリックな OSのようになって
しまいましたので、近いうちにコードをダイエットしようと思います．
改良すべき点やまずい部分などを指摘していただければ幸いです．GPLまたはMITライセンスによる配布ですので、
各自で好きなように変更や修正を加えて下さい．
jQuery : http://jquery.com/
Galleria : http://www.monc.se/kitchen/146/galleria-a-javascript-image-gallery
jCarousel : http://sorgalla.com/jcarousel/
NextGEN Gallery : http://alexrabe.boelinger.com/wordpress-plugins/nextgen-gallery/
【 主な機能 】
* Galleria イメージギャラリによる同一ページ内での画像表示が可能
* サムネール表示をタイリングモードとスクロールモードに切り替え可能
* Javascript が使用できない場合でも最低限の画像は表示可能
* 予め用意した CSS クラスを適用することによって、ギャラリーのデザインを変更可能
* 同一ページ上に複数のギャラリーを表示することが可能
* サムネイルの表示位置をメイン画像に対して上下左右に配置可能
* 簡易グループ化機能によって同一ポスト内のアタッチメント画像データをグループ分けし、
それぞれ別なギャラリーとして表示可能
* JPEG 画像データに EXIFメタタグが含まれている場合、キャプション欄にその要約
（撮影日付、絞り、露出、カメラモデル）を表示可能
* 自動スライドショー機能
* ユーザが自分のデフォルト設定を記録しておくことが可能（一々コマンドラインに書かなくても良い）
【 インストール手順 】
1. "GalleriaWP"プラグイン（ZIP圧縮ファイル）を解凍し、WordPressのプラグインディレクトリ "wp-content/plugins/"
に "galleria-wp" をディレクトリごとコピーして下さい．
（Mac/Widows ユーザの方は 『ディレクトリ』という用語を 『フォルダ』に置き換えて下さい）
2. WordPress の管理画面の "プラグイン" メニューで、"Galleria WP" を 有効にして下さい．
3. Admin 画面の『設定』に "Galleria WP Options" という項目が新たに登録されているはずですので、
各自でデフォルト設定を変更して下さい．
4. WordPressのメディアアップロード機能を用いて画像をアップロードするか、NextGEN Gallery のギャラリー、
アルバムを用意します.
5. WordPressの記事、ページの任意の場所に、ショートコードタグ "[galleria]" を記述します．
V1.2.3 からデフォルト設定を管理画面を通じて変更できるようになりましたが、従来通りコマンドラインの
オプションも有効です．コマンドラインの指定の方が優先されますので、一時的にギャラリーの設定を変えたい
場合は、コマンドラインに指定して下さい．
ショートコードタグは WordPress 2.5 から新たに加えられた機能で、"Galleria WP" では "[galleria]"という名前の
ショートコードタグを使用しています．尚、WordPress 2.5 に標準で備わっている "[gallery]" ショートコードも併用する
事が可能です．用途に応じて使い分けて下さい．
【 "[galleria]" ショートコードタグの使い方 】
Usage: [galleria <オプションの並び>] オプションの指定並びにその順番は任意です．
<オプション> : orderby, id, size : WordPress 標準の [gallery] 使用方法と同じです．
id は記事の番号、orderby はギャラリーの並びの順番、size はサムネイル画像として
利用する画像を選択するための指定です．
何も指定しない場合、orderby は'menu_order ASC, ID ASC' という値が指定されます．
id はその記事（現在書いている）のポスト番号（WordPressが自動的に割り振る）が割り当てられ
ます．
size は ユーザのデフォルト設定が適用されます．
columns="<数字>" サムネイルの列数
rows="<数字>" サムネイルの行数 （縦スクロールモードの場合）
スクロールモードの列数、行数は両方指定してもどちらか一方のみ有効です．横スクロールの場合は
列数(columns) が、 縦スクロールモードの場合は 行数(rows) が使われます．英語の表記上の都合で
columns/rows に分けてあるだけです．プログラムの内部では両者とも同じパラメータとして扱われる
ので、どちらを使っても構いません．（縦スクロールモードで "columns" という表記は気持ちが悪い
ので "rows" というオプションを加えただけです）
thumb_w="<数字>" サムネイルの幅 （ピクセル数）
thumb_h="<数字>" サムネイルの高さ （ピクセル数）
columns/rows, thumb_w, thumb_h を指定した場合はその数値が優先されますが、実際に表示
可能な幅を超えた指定をした場合は、自動的に調整されます．
columns/rows を指定しなかった場合は、この値はサムネイルのサイズと表示可能幅に基づいて
自動的に決まります．
thumb_w, thumb_h を指定しなかった場合は、デフォルトのCSS設定値に基づいて columns/rows
が調整されます．
steps="<数字>" コマ送り数
サムネールスクロール時の矢印アイコンボタンを押したときに、幾つコマを送るのかを指定する．
何も指定しないと、サムネイルの表示桁数と同じ値が採用されます．
gid="<タグキーワード>" グループタグのキーワード
WordPress の標準メディアアップロード機能を用いて画像データを管理する際に、タイトル欄に予め
タグキーワードを与える事で、グループ分けさせる事ができます．
ここで与えられたタグキーワードがタイトル欄に含まれている画像だけを表示の対象にすることが可能です．
このオプションを指定しない場合は、対象となる記事に結びつけられた全ての画像データが対象になります．
この機能を利用するには、予めメディアアップロードダイアログのタイトル欄に グループタグの情報を
括弧（bracket [] ）で括っておく必要があります. 括弧は必ず半角文字で入力して下さい．キーワード
として全角文字がまともに使えるかどうかは試していません．全角文字の使用は避けた方が良いでしょう．
各キーワードの間には半角空白を入れて下さい．
例）下記の画像データが記事に関連したアタッチメント画像データとしてアップロードされている場合、
gid="Kyoto" という指定すると、画像#1, #2 だけが表示対象になります．
画像 #1 タイトル欄: gion.jpg [ Gion Kyoto Japan 2008 ]
画像 #2 タイトル欄: maiko.jpg [ Maikosan Gion Kyoto Japan 2008 ]
画像 #3 タイトル欄: kaminarimon.jpg [ Kaminarimon Asakusa Tokyo Japan 2007 ]
画像 #4 タイトル欄: goldengate.jpg [ Golden Gate Bridge San Francisco CA USA 2005 ]
画像 #5 タイトル欄: Yosemite.jpg [ Yosemite Valley CA USA 2005 ]
exif="0/1" EXIF 情報の表示を行う(exif=1)
EXIF メタタグ情報をキャプション欄（２行目）に表示する（有効な EXIF 情報が画像に含まれて居る場合）
cssclass="<CSSテンプレートクラス>"
Galleria WP の標準 CSSテンプレートファイル ("galleria-wp.css") 内に、予めユーザが自分の
CSS スタイルを記述しておく事で、任意のデザインでギャラリーを表示させることが可能です．
尚、"galleria-wp.css" 内には予め、"galleria_std" と "galleria_black" という２つの
テンプレートクラスを用意してあります．このオプションを何も指定しないと "galleria_std"
というテンプレートクラスが適用されます．
例） cssclass="galleria_black" 背景が黒地のテンプレートを利用する
playbutton="<0/1>"
自動スライドショーのボタンを表示する場合は playbutton=1 を指定して下さい．
interval="<数値>" 再生間隔（秒数）
自動スライドショーの表示間隔を秒数で指定します．
指定しない場合はデフォルトの秒数が設定されます．
thumbnail="<キーワード>" サムネイルの表示位置
'top' 画像の上部に配置する（スクロールは無し）
'bottom' 画像の下部に配置する（スクロールは無し）
'left' 画像の左側に配置する（スクロールは無し）
'right' 画像の右側に配置する（スクロールは無し）
'top-scroll' 画像の上側に配置する（スクロールモード）
'bottom-scroll' 画像の下部に配置する（スクロールモード）
'left-scroll' 画像の左側に配置する（スクロールモード）
'right-scroll' 画像の右側に配置する（スクロールモード）
'none' サムネイル画像を表示しない（メイン画像のみ表示）
navigation="< キーワード >" ナビゲーション用リンクの表示位置
'top' ギャラリーの上部に配置
'bottom' ギャラリーの下部に配置
'none' ナビゲーション用リンクを表示しない
index="< キーワード >" 画像インデクス番号の表示位置
'top' 画像の上部に配置
'bottom' 画像の下部に配置
'caption1' キャプション欄（１行目）に含めて表示する
'caption2' キャプション欄（２行目）に含めて表示する
'none' 表示しない
shrink="<0/1>" 画像の表示モード
表示する画像のサイズが現在の表示可能エリア（使用しているテーマファイルにより異なる）を
超える場合に、どのように画像を表示するかの指定
shrink=1 ： 自動的に縮小表示を行う
shrink=0 ： はみ出した画像は表示されません．
showimage="<yes/no>" メイン画像を表示するかどうか
サムネイルのみ表示したい場合は "no" を指定します．
cropthumb="<yes/no>" サムネイル画像の表示方法
デフォルトは "no"（自動的に拡大・縮小を行う）です．
"yes" を指定すると、拡大・縮小を行わずにサムネイル画像の中心部だけを切り取って表示します．
サムネイル画像のサイズと表示サイズが似通っている場合はどちらでもそれ程違いはありませんが、
サムネイル用の画像が用意できない場合は、オリジナル画像の中心付近のごく一部を切り抜く事になる
ので、サムネイル画像としての用途には向いていないかもしれません．．
dblclick="<source/post>" サムネイル上の画像をダブルクリックした場合の動作の指定
"source" を選択すると元のアップロードされたオリジナル画像データを直接開きます．
"post" を選ぶとWordPressの標準的な[gallery] と同じ振る舞いをします．この場合、
アタッチメント画像の記事が表示されます．
従属オプションキーワードとして、"current" というキーワードを上記のオプションに付加すると、
コンテンツを新しいウインドウで開く代わりに、現在のウインドウ上に表示します．
"post-current" --> アタッチメント画像のページが現在のウインドウ上に展開されます
"current" --> "source-current" と同じ意味
（以下の機能はWEB専門家向けです．ギャラリー毎に個別にスタイルを変更したい場合に指定します）
background_style="<styles>" ギャラリー全体の背景のスタイルを指定します．
通常は表示可能エリア一杯（実際は98%) にギャラリーが展開されますが、このオプションを
指定する事で自由にギャラリーのサイズや背景などを指定することが可能です．
ギャラリー全体を囲む <div> セクションに対する CSS スタイルを記述して下さい．
例） ギャラリーの表示幅を 500px とし、背景を黒、左寄せ(float) で配置する．
background_style="width: 500px; background-color: black; float: left;"
caption1_style="<styles>" キャプション欄（1行目）のスタイル指定です
caption2_style="<styles>" キャプション欄（2行目）のスタイル指定です
stage_style="<styles>" 画像のメインステージ用のスタイル指定です．
thumbbox_style="<styles>" サムネイル表示セクションのスタイル指定です．
例）サムネイルを left, right 配置した場合に、画像ステージとサムネイルブロックの配置の割合を
指定する．
thumbnail="left-scroll" or "right-scroll :（スクロールモード）
stage_style="width : 75%;" thumbbox_style="width: 24%;"
(この値は各自で設定を変更して下さい．CSS スタイルの個別設定欄で変更可能です．)
1. background_style="width: 640px; background-color: #666"
thumbbox_style="width: 512px"
stage_style="width : 512px; background-color: black"
ギャラリー全体の背景色 : #666
サムネイルブロックの幅 : 512px
画像メインステージの幅と背景色 : 512px, background color : black
2. caption1_style="font-size: 1.2em; font: helvetica; color: #678"
キャプション欄（１行目）のフォントとサイズ、色を指定する
【具体的な指定例】
[galleria exif=1 thumb_w=90 thumb_h=72 columns=5 navigation=top playbutton=1]
・サムネイルサイズ W90xH72 で５個スクロール表示し、サムネイルを画像の下に表示する．ナビゲーションの位置は画像の上部に
配置し、EXIF データと自動スライドショーボタンの表示を行う．
【デフォルトのサムネイルサイズを変更するには】
デフォルトのサムネイルサイズを変更するには、CSS 設定ファイル "galleria_wp.css" の次の部分を書き換えて下さい．
（※ V1.2.3 以降は、デフォルトオプション設定画面で変更して下さい．CSSファイルの設定よりも優先されます）
CSS file : "galleria_wp.css" (#173 - #195 行目近辺にあります)
/* default thumbnail size */
#galleria_wp .galleria_std
div ul li {
display: block;
float: left;
margin: 0;
overflow: hidden;
width: 75px; <=== ここを書き換える (width)
height: 75px; <=== (height)
border: 2px solid #bbb;
}
/* default thumbnail size (NextGEN Gallery album's thumbnail)*/
#galleria_wp .galleria_std
div ul li.ngg_album {
display: block;
float: left;
margin: 0;
overflow: hidden;
width: 120px; <=== ここを書き換える (width)
height: 90px; <=== (height)
border: 2px solid #bbb;
}
【現在確認されている障害】
・Internet Explorer で、サムネイルを表示しないモード (thumbnail=none) にすると、
jQuery ライブラリ内でエラーが発生する．このエラーが起きた場合、最初だけメイン画像が
表示されないが、もう一度ページを読込すると問題なく表示することができる．
・Safari 3.1 で WordPress の管理画面からコンテンツの表示画面へ切り替えた直後に、
サムネイルの表示が頻繁に乱れる．何度かページをリロードするとサムネイルの表示は正常に戻る．
Safari のレンダリングのタイミングとJavascriptの実行タイミングの相性が悪いのが原因
かもしれません．他のブラウザではこのような現象は殆ど起きません．
・Windows 上の FireFox 2.0 で自動再生モードで画像を表示していると、順番通りに進行せずに、
時折ページがスキップされる現象が起きる．interval を少し長くすればこのような現象は起きません．
FireFox 2.0 のJavascript の処理速度が遅く、画像切り替えのタイミングに間に合わないのが原因
かもしれません．小さめの画像なら 5秒程度の間隔でも大丈夫でしょう．
・使用しているブラウザやコンピュータの環境によって、サムネイルの表示が乱れる場合があります．
大抵の場合は、もう一度ページをリロードすることで表示の乱れは解消されます．
原因は定かではありませんが、サムネイル画像がブラウザに読み込まれるタイミングに起因している
ようです．一度ブラウザにキャッシュされてしまうと表示が乱れるという現象は発生しないようです．
【他のプラグインやテーマファイルとの互換性について】
このプラグインでは、jQuery を用いています．他のプラグインでも jQuery を用いているとコンフリクトを
起こすかもしれません．もしコンフリクトを起こすようでしたら、プラグインの起動の順番（プライオリティー）を
変更するなどの対策が必要です．この辺の知識はWordPressのプログラミングに精通していないと難しいかもしれ
ません．
Javascript のロードや、CSSスタイルの設定は "galleria-wp.php" ファイルの先頭の方にある、
galleria_wp_headers() という関数で行っています．
プラグインの優先順位を変えるには、次のアクション関数のレジストリを行っている部分で、第３番目のパラメータを
変更して下さい．詳細は WordPress Codex （日本語）- Plugin API を参照して下さい．
add_action( 'wp_head', 'galleria_wp_headers', 10 ); // 124行目辺り
add_action( 'init', 'galleria_wp_load_js', 15); // 146行目辺り
使用しているテーマファイルによっては、意図しないCSSスタイルが適用されてしまいギャラリーのレイアウトが
崩れる場合があります．テーマファイルによっては、img, li, ul などのDOM要素に固有性（specificity) が
高い指定をしてあるため、"galleria_wp.css" で指定したプロパティーが効かない場合があります．
この辺の仕組みを理解するにはそれなりのCSSの知識が必要になります．
thumbbox_style, stage_style, caption1_style などのオプションを使って、CSSプロパティーを上書きして
あげると解決する場合があります．これらのオプションは インラインスタイルという方式を採っているため、CSSセレクタ
の固有性が高くなり、テーマファイルのCSS指定より優位に働く可能性が高くなります．
== Screenshots ==
1. default [galleria] thumbnail size W75xH75 ( squared & scaled )
background color : not specified (current background color)
2. [galleria cssclass="galleria_black" exif="1" playbutton="1"]
background color : black ( "galleria_black" is defined in "galleria.css" )
EXIF meta data will be displayed in 2nd caption line(if image contains EXIF data)
Automatic slideshow "Play" button will be appeared.
3. [galleria exif="1" ]
Galleria WP plugin samples
Standard (No options) :
http://y2itec.com/blog/inet/wp/galleria-wp-plugin-1-798/
Sample #2 (grouping, EXIF, slideshow)
http://y2itec.com/blog/inet/wp/galleria-wp-plugin-2-808/
Sample #3 (V1.2 : thumbnail scroll option)
http://y2itec.com/blog/inet/wp/galleria-wp-844/
== Frequently Asked Questions ==
= How do I use "gid" grouping option? =
You need add group tags with bracket to "Title" field of the media upload dialog.
Photo #1 Title: Bob [pet cat persian]
Photo #2 Title: Nimo[pet fish clown anemonefish ]
Photo #3 Title: Alice[friends female San Francisco CA US]
Photo #4 Title: Without group tags
If you give a group option [galleria gid="pet"], only #1 and #2 will be displayed.
= Can I contain multiple [galleria] short code on a page? =
YES. Galleria WP V1.1(or laters) can display multiple galleries on a page.
Restrictions : gallery use thumnail scroll options ( thumbnail = "top-scroll" or "bottom-scroll" )
should be placed the last position, otherwise automatic thumnail scroll will not work.
== Changelog ==
1.2.5 bug fixed (revised javascript loading method) Jun 23 2008
1.2.4 bug fixed Jun 22 2008
1.2.3 added default options admin menu. Jun 21 2008
1.2.2 revised double click operation handler code and added langage resources. Jun 15 2008
1.2.1 bug fixed (ghost caption problem and improved double clicking operation) Jun 13 2008
Special thank to alex. [http://www.alex-betty.com/]
1.2.0 added thumbnail scroll option and thumbnail position (left, right) Jun 9 2008
Special thanks to Mr. Papa. [ http://cruisetalk.org/ ]
1.1.2 added thumbnail background style option May 18 2008
1.1.1 added thumbnail 'none' option May 18 2008
1.1.0 beta test release May 13 2008
1.0.3 added shrink option May 10 2008
1.0.2 adjust for Opera browser May 08 2008
1.0.1 minor bug fix May 08 2008
1.0.0 first release version May 07 2008