“mylightbox” イメージギャラリプラグイン
WordPress用のイメージギャラリプラグインモジュール “mylightbox” の公開に向けてある程度骨格ができあがったので、本番環境でのテストを始めることにした.
“mylightbox” はこれまで用途に応じて複数のイメージギャラリーを使い分けていたが、管理やソースコードのメンテナンスが煩雑になってきたので、思い切って一つのプラグインモジュールに纏めてみることにした.
現時点では “Highslide JS”, “jQuery lightBox”の2種類のビューワに対応している.おまけとして画像に含まれているEXIFタグ情報をテキストでダンプする機能も組み込んでみた.jQuery lightBoxには自動スライドショーの機能がないので、ついでに自動スライドショー機能も付加してみようと思う.
画像のキャプションとして表示する項目として、撮影日時や撮影場所などのジオタグ情報、露出情報や機材に関する情報などある程度ユーザ側でカスタマイズできるようになっている.
一般公開までにはまだバグ潰しやドキュメント作成などしなければならない事が残っているが、近いうちに公開する予定です.
“mylightbox V1.0.3” 公開 [ 最終更新日 3/20 2012 ]
ダウンロード先: https://y2tech.net/wp_plugins/mylightbox/mylightbox.zip V1.0.3
【修正・変更履歴】
・v1.0.3 jQuery lightBox で AJAXによるEXIFデータ読み込み時に、サーバのレスポンスが遅い場合に
EXIFデータの表示の同期が取れなくなる現象が発生していたが、EXIFデータの表示時点でEXIF
データの取得が間に合わない場合は、一定時間経過後に再試行するように修正.
・v1.0.0 正式リリース版.
・v0.9.6b 日本語表示用リソース追加.
・v0.9.5b Google Maps, Yahoo Japan Map で逆ジオコーディングによる地名を表示.
・v0.9.4b ショートコードタグの再帰呼び出し(ショートコードタグのコンテンツ中に別な
ショートコードタグを入れる)を可能にした.
・v0.9.3b インラインショートコードタグ(Enclosing Shortcode Tag)方式に対応
・v0.9.2b Galleria の分離
まだ未完成ですが、一通りの機能の実装が終わりましたのでとりあえず公開します.まともなドキュメントはありませんが、WEBデザイナーやプログラマ系の方々であれば自分でいじり回してみてください.
Galleria 1.2 によるイメージギャラリーの例 【削除:v0.9.2 => “Galleria WP2” へ移行】
[mylightbox ngg_gallery=15 viewer=galleria ]
jQuery lightBox によるイメージギャラリーの例
[mylightbox ngg_gallery=17 viewer=lightbox thumb_class=”filmstrip-real” ]
#01
歴史を感じさせるボストンの野球場 Fenway Park
DateTime: [Jul 31 2006 14:53:43 (Asia/Tokyo)]
Exposures: [F Number: 7.0, Exposure Time: 1/250s, ISO: 200, Exposure Bias: 0.00Ev]
Equipments: [Focal Length: 5.7mm, Maker: FUJIFILM]
#02
鳥海山外輪山コースから七高山を望む
DateTime: [Sep 19 2009 13:27:51 (Asia/Tokyo)]
Exposures: [F Number: 6.3, Exposure Time: 1/500s, ISO: 64, Exposure Bias: -0.70Ev]
Equipments: [Focal Length: 5.9mm, Maker: RICOH ]
Location: [Lat: 39° 5' 39.86" N ( 39.094406° ) , Lon: 140° 2' 51.50" E (140.047638° ) , Altitude: 2162.6m ]
#03
大雪山系旭岳の中腹にある夫婦池
DateTime: [Sep 25 2009 14:10:19 (Asia/Tokyo)]
Exposures: [F Number: 5.6, Exposure Time: 1/640s, ISO: 100, Exposure Bias: -0.30Ev]
Equipments: [Focal Length: 5.9mm, Maker: RICOH ]
Location: [Lat: 43° 39' 51.82" N ( 43.664395° ) , Lon: 142° 49' 41.65" E (142.828235° ) , Altitude: 1618.3m ]
#04
神奈川県三浦海岸
DateTime: [Jan 10 2010 14:24:02 (Asia/Tokyo)]
Exposures: [F Number: 9.0, Exposure Time: 1/1000s, ISO: 64, Exposure Bias: -1.30Ev]
Equipments: [Focal Length: 5.9mm, Maker: RICOH ]
Location: [Lat: 35° 8' 27.00" N ( 35.140833° ) , Lon: 139° 40' 28.80" E (139.674667° ) , Altitude: 7.0m ]
#05
西丹沢の手軽なハイキングコースとして人気の大野山から丹沢湖を望む
DateTime: [Mar 05 2011 11:40:40 (Asia/Tokyo)]
Exposures: [F Number: 10.0, Exposure Time: 1/250s, ISO: 100, Exposure Bias: 0.00Ev]
Equipments: [Focal Length: 37.0mm, Maker: Canon]
Location: [Lat: 35° 23' 12.29" N ( 35.386748° ) , Lon: 139° 2' 55.70" E (139.048807° ) , Altitude: 754.9m ]
#06
西丹沢畦ヶ丸近辺もシロヤシオ(五葉躑躅)が咲き誇っていた
DateTime: [May 21 2011 13:34:05 (Asia/Tokyo)]
Exposures: [F Number: 4.9, Exposure Time: 1/200s, ISO: 100, Exposure Bias: -0.33Ev]
Equipments: [Focal Length: 15.6mm, Maker: Panasonic]
Location: [Lat: 35° 28' 55.44" N ( 35.482067° ) , Lon: 139° 2' 21.04" E (139.039177° ) , Altitude: 1149.7m ]
#07
富士山剣が峰から大内院と呼ばれる中央火口を望む
DateTime: [Oct 09 2011 14:14:01 (Asia/Tokyo)]
Exposures: [F Number: 5.6, Exposure Time: 1/400s, ISO: 100, Exposure Bias: -0.33Ev]
Equipments: [Focal Length: 6.3mm, Maker: Panasonic]
Location: [Lat: 35° 21' 37.80" N ( 35.360500° ) , Lon: 138° 43' 39.53" E (138.727646° ) , Altitude: 3758.6m ]
Highslide JS によるイメージギャラリーの例
[mylightbox ngg_gallery=10 viewer=highslide thumb_class=”kodachrome” ]
#01
高尾山薬王院
DateTime: [Oct 31 2009 12:36:24 (Asia/Tokyo)]
Exposures: [F Number: 3.2, Exposure Time: 1/125s, ISO: 64, Exposure Bias: -0.70Ev]
Equipments: [Focal Length: 5.9mm, Maker: RICOH ]
Location: [Lat: 35° 37' 33.60" N ( 35.626000° ) , Lon: 139° 15' 0.00" E (139.250000° ) , Altitude: 582.6m ]
#02
城山の頂上は結構賑わっていた
DateTime: [Oct 31 2009 13:29:17 (Asia/Tokyo)]
Exposures: [F Number: 3.2, Exposure Time: 1/125s, ISO: 64, Exposure Bias: 0.00Ev]
Equipments: [Focal Length: 5.9mm, Maker: RICOH ]
Location: [Lat: 35° 37' 47.40" N ( 35.629833° ) , Lon: 139° 13' 16.20" E (139.221167° ) , Altitude: 674.8m ]
#03
富士山の絶好のビューポイント 姫次
DateTime: [Nov 07 2009 10:52:54 (Asia/Tokyo)]
Exposures: [F Number: 8.0, Exposure Time: 1/400s, ISO: 100, Exposure Bias: 0.00Ev]
Equipments: [Focal Length: 6.3mm, Maker: Panasonic]
Location: [Lat: 35° 30' 36.60" N ( 35.510167° ) , Lon: 139° 7' 55.80" E (139.132167° ) , Altitude: 1314.8m ]
#04
その昔武田信玄の軍勢の犬が越えたので犬越路
DateTime: [Nov 07 2009 14:35:02 (Asia/Tokyo)]
Exposures: [F Number: 5.6, Exposure Time: 1/250s, ISO: 100, Exposure Bias: 0.00Ev]
Equipments: [Focal Length: 6.3mm, Maker: Panasonic]
Location: [Lat: 35° 29' 42.60" N ( 35.495167° ) , Lon: 139° 4' 37.80" E (139.077167° ) , Altitude: 1056.0m ]
#05
西丹沢の登山拠点となっている西丹沢自然教室
DateTime: [Nov 07 2009 15:54:54 (Asia/Tokyo)]
Exposures: [F Number: 2.8, Exposure Time: 1/80s, ISO: 100, Exposure Bias: 0.00Ev]
Equipments: [Focal Length: 6.3mm, Maker: Panasonic]
Location: [Lat: 35° 28' 18.60" N ( 35.471833° ) , Lon: 139° 3' 47.40" E (139.063167° ) , Altitude: 544.8m ]
#06
山中湖が見えてきた
DateTime: [Jan 23 2010 13:38:18 (Asia/Tokyo)]
Exposures: [F Number: 7.1, Exposure Time: 1/640s, ISO: 64, Exposure Bias: -0.70Ev]
Equipments: [Focal Length: 5.9mm, Maker: RICOH ]
Location: [Lat: 35° 25' 58.20" N ( 35.432833° ) , Lon: 138° 55' 34.80" E (138.926333° ) , Altitude: 1178.6m ]
#07
三湖台から西湖を見下ろす
DateTime: [Jan 30 2010 14:41:17 (Asia/Tokyo)]
Exposures: [F Number: 8.0, Exposure Time: 1/200s, ISO: 100, Exposure Bias: 0.00Ev]
Equipments: [Focal Length: 18.0mm, Maker: Canon]
Location: [Lat: 35° 29' 16.81" N ( 35.488003° ) , Lon: 138° 40' 56.98" E (138.682495° ) , Altitude: 1198.5m ]
#08
三湖台から眺める富士山
DateTime: [Jan 30 2010 14:42:27 (Asia/Tokyo)]
Exposures: [F Number: 11.0, Exposure Time: 1/200s, ISO: 100, Exposure Bias: 0.00Ev]
Equipments: [Focal Length: 33.0mm, Maker: Canon]
Location: [Lat: 35° 29' 15.52" N ( 35.487645° ) , Lon: 138° 40' 57.82" E (138.682727° ) , Altitude: 1201.2m ]
#09
本栖湖の畔からも美しい富士山を望むことができる
DateTime: [Mar 14 2010 11:07:24 (Asia/Tokyo)]
Exposures: [F Number: 8.0, Exposure Time: 1/640s, ISO: 64, Exposure Bias: -0.70Ev]
Equipments: [Focal Length: 5.9mm, Maker: RICOH ]
Location: [Lat: 35° 27' 51.58" N ( 35.464329° ) , Lon: 138° 35' 52.34" E (138.597873° ) , Altitude: 916.3m ]
#10
朝霧高原
DateTime: [Mar 14 2010 14:55:59 (Asia/Tokyo)]
Exposures: [F Number: 6.3, Exposure Time: 1/640s, ISO: 64, Exposure Bias: -0.70Ev]
Equipments: [Focal Length: 5.9mm, Maker: RICOH ]
Location: [Lat: 35° 24' 30.00" N ( 35.408333° ) , Lon: 138° 34' 39.60" E (138.577667° ) , Altitude: 874.0m ]
#11
六地蔵さん
DateTime: [May 08 2010 10:49:19 (Asia/Tokyo)]
Exposures: [F Number: 8.0, Exposure Time: 1/800s, ISO: 200, Exposure Bias: -0.70Ev]
Equipments: [Focal Length: 5.9mm, Maker: RICOH ]
Location: [Lat: 35° 14' 21.01" N ( 35.239170° ) , Lon: 138° 27' 44.16" E (138.462267° ) , Altitude: 250.4m ]
#12
山梨と静岡の県境となっている田代峠
DateTime: [May 08 2010 15:44:47 (Asia/Tokyo)]
Exposures: [F Number: 3.2, Exposure Time: 1/160s, ISO: 200, Exposure Bias: -0.30Ev]
Equipments: [Focal Length: 5.9mm, Maker: RICOH ]
Location: [Lat: 35° 12' 6.77" N ( 35.201881° ) , Lon: 138° 24' 40.79" E (138.411331° ) , Altitude: 1031.5m ]
おまけの EXIF 簡易タグダンプ機能
[mylightbox ngg_gallery=18 viewer=exifviewer ]
#01
小樽祝津海岸自然探勝路
DateTime: [Oct 13 2002 13:04:37 (Asia/Tokyo)]
Exposures: [F Number: 7.0, Exposure Time: 1/300s, ISO: 200, Exposure Bias: 0.00Ev]
Equipments: [Focal Length: 5.7mm, Maker: FUJIFILM]
#02
朝霧高原
DateTime: [Mar 14 2010 14:55:59 (Asia/Tokyo)]
Exposures: [F Number: 6.3, Exposure Time: 1/640s, ISO: 64, Exposure Bias: -0.70Ev]
Equipments: [Focal Length: 5.9mm, Maker: RICOH ]
Location: [Lat: 35° 24' 30.00" N ( 35.408333° ) , Lon: 138° 34' 39.60" E (138.577667° ) , Altitude: 874.0m ]
#03
鎌倉朝比奈切通しの磨崖仏
DateTime: [Sep 29 2010 14:48:21 (Asia/Tokyo)]
Exposures: [F Number: 5.6, Exposure Time: 1/30s, ISO: 125, Exposure Bias: 0.00Ev]
Equipments: [Focal Length: 18.0mm, Maker: Canon]
Location: [Lat: 35° 19' 37.51" N ( 35.327085° ) , Lon: 139° 35' 26.51" E (139.590698° ) , Altitude: 92.5m ]
本文中にHTMLタグを直接記述してビューワを起動
<a href=”https://y2tech.net/blog/wp-content/uploads/2011/11/photo12277.jpg” rel=”lightbox” >
<a href=”https://y2tech.net/blog/wp-content/uploads/2011/11/P1020142.jpg” class=”highslide” onclick=”return hs.expand(this)” >
jQuery lightBox で表示
Highslide JS で表示