y2blog » mylightbox イメージギャラリ

11

10

2011

mylightbox イメージギャラリ

“mylightbox” イメージギャラリプラグイン


WordPress用のイメージギャラリプラグインモジュール “mylightbox” の公開に向けてある程度骨格ができあがったので、本番環境でのテストを始めることにした.


“mylightbox” はこれまで用途に応じて複数のイメージギャラリーを使い分けていたが、管理やソースコードのメンテナンスが煩雑になってきたので、思い切って一つのプラグインモジュールに纏めてみることにした.


現時点では “Highslide JS”, “jQuery lightBox”の2種類のビューワに対応している.おまけとして画像に含まれているEXIFタグ情報をテキストでダンプする機能も組み込んでみた.jQuery lightBoxには自動スライドショーの機能がないので、ついでに自動スライドショー機能も付加してみようと思う.


画像のキャプションとして表示する項目として、撮影日時や撮影場所などのジオタグ情報、露出情報や機材に関する情報などある程度ユーザ側でカスタマイズできるようになっている.


一般公開までにはまだバグ潰しやドキュメント作成などしなければならない事が残っているが、近いうちに公開する予定です.


“mylightbox V1.0.3” 公開 [ 最終更新日 3/20 2012 ]


ダウンロード先: https://y2lab.org/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, Boston Fenway Park, Boston

#02

鳥海山外輪山コース 鳥海山外輪山コース

#03

旭岳夫婦池 旭岳夫婦池

#04

三浦海岸 三浦海岸

#05

丹沢湖を望む 丹沢湖を望む

#06

シロヤシオ(五葉躑躅) シロヤシオ(五葉躑躅)

#07

富士山中央火口 富士山中央火口


Highslide JS によるイメージギャラリーの例


[mylightbox ngg_gallery=10 viewer=highslide thumb_class=”kodachrome” ]

#01

高尾山 高尾山

#02

城山の頂上 城山の頂上

#03

姫次 姫次

#04

犬越路 犬越路

#05

西丹沢自然教室 西丹沢自然教室

#06

山中湖 山中湖

#07

三湖台 三湖台

#08

富士山 富士山

#09

本栖湖 本栖湖

#10

朝霧高原 朝霧高原

#11

六地蔵さん 六地蔵さん

#12

田代峠 田代峠

おまけの EXIF 簡易タグダンプ機能

[mylightbox ngg_gallery=18 viewer=exifviewer ]

#01

小樽祝津海岸

#02

朝霧高原

#03

朝比奈切通し



本文中にHTMLタグを直接記述してビューワを起動


<a href=”https://y2lab.org/blog/wp-content/uploads/2011/11/photo12277.jpg” rel=”lightbox” > <a href=”https://y2lab.org/blog/wp-content/uploads/2011/11/P1020142.jpg” class=”highslide” onclick=”return hs.expand(this)” >
夫婦池越しの旭岳 jQuery lightBox で表示
御殿場口 Highslide JS で表示

Local Search

Calendar

September 2019
S M T W T F S
« Aug    
1234567
891011121314
15161718192021
22232425262728
2930  
  • Blogroll

  • Meta