Highslide JS イメージギャラリを試して見る
これまでに Javascript ベースのイメージギャラリとしてLightbox 2.0や Galleria 等のライブラリを用いてきたが、これらのライブラリは jQuery や Prototype などの外部Javascript フレームワークを用いているため、これらの外部フレームワークなどのアップデートなどにより導入後も結構メンテナンスが必要だった.
今回 Javascript ベースのイメージギャラリとして新たに、 “Highslide JS” という外部フレームワークを使っていない独自のイメージギャラリをテストしてみることにした.まだ、使い始めたばかりなのでどのような機能があるのか良く分からないが、サンプルなどを見る限りかなり高機能なイメージギャラリを構築することができそうだ.
これまでは用途に応じて Lightbox2.0 と Galleria 1.2 を使い分けて来たが、このギャラリを上手く使いこなすことができれば、このギャラリだけで両方の機能を置き換えることができそうだ.
Highslide JSの開発元は “Hichart” を開発している “Highslide Software” という会社で、商用での利用には有料でこのソフトウェアをライセンスしているが、非商用の場合は無償でこのソフトウェアを利用できる.
Highslideギャラリーの実装例 [ mylightbox ngg_gallery=4 thumb_class=”kodachrome” ]
#01
ニューイングランドアクアリウムのメインタンクを上から覗く
DateTime: [Jul 27 2006 11:05:47 (Asia/Tokyo)]
Exposures: [F Number: 2.8, Exposure Time: 1/25s, ISO: 200, Exposure Bias: 0.00Ev]
Equipments: [Focal Length: 5.7mm, Maker: FUJIFILM]
#02
モンタレー湾水族館のカリフォルニア湾再現水槽
DateTime: [Aug 14 2006 16:08:55 (Asia/Tokyo)]
Exposures: [F Number: 1.7, Exposure Time: 1/60s]
Equipments: [, Maker: Panasonic]
#03
Monterley Bay Auarium
DateTime: [Aug 14 2006 16:26:07 (Asia/Tokyo)]
Exposures: [F Number: 3.4, Exposure Time: 1/500s]
Equipments: [, Maker: Panasonic]
#04
スカンクシュリンプはお掃除やさん
DateTime: [Oct 07 2007 13:45:17 (Asia/Tokyo)]
Exposures: [F Number: 5.6, Exposure Time: 1/60s, ISO: 400, Exposure Bias: 0.00Ev]
Equipments: [Focal Length: 33.0mm, Maker: Canon]
#05
ペルクラのカップルです
DateTime: [Oct 07 2007 13:57:13 (Asia/Tokyo)]
Exposures: [F Number: 6.3, Exposure Time: 1/60s, ISO: 400, Exposure Bias: 0.00Ev]
Equipments: [Focal Length: 34.0mm, Maker: Canon]
#06
強毒を持つハタゴイソギンチャク
DateTime: [Oct 25 2007 17:28:23 (Asia/Tokyo)]
Exposures: [F Number: 3.5, Exposure Time: 1/20s, ISO: 400, Exposure Bias: 0.00Ev]
Equipments: [Focal Length: 24.0mm, Maker: Canon]
#07
江ノ島水族館の赤クラゲ
DateTime: [Jun 20 2009 15:16:12 (Asia/Tokyo)]
Exposures: [F Number: 3.5, Exposure Time: 1/13s, ISO: 400, Exposure Bias: 0.00Ev]
Equipments: [Focal Length: 18.0mm, Maker: Canon]
#08
新江ノ島水族館のイルカプール
DateTime: [Jun 20 2009 15:36:44 (Asia/Tokyo)]
Exposures: [F Number: 10.0, Exposure Time: 1/320s, ISO: 400, Exposure Bias: 0.00Ev]
Equipments: [Focal Length: 18.0mm, Maker: Canon]
#09
ロボコップのような動きをするキャメルシュリンプ
DateTime: [Nov 23 2009 08:50:50 (Asia/Tokyo)]
Exposures: [F Number: 5.6, Exposure Time: 1/125s, ISO: 400, Exposure Bias: 0.00Ev]
Equipments: [Focal Length: 55.0mm, Maker: Canon]
#10
東海大学の海洋科学博物館
DateTime: [Feb 14 2010 13:56:33 (Asia/Tokyo)]
Exposures: [F Number: 4.5, Exposure Time: 1/320s, ISO: 64, Exposure Bias: -0.30Ev]
Equipments: [Focal Length: 5.9mm, Maker: RICOH ]
Location: [Lat: 35° 1' 7.20" N ( 35.018667° ) , Lon: 138° 31' 4.80" E (138.518000° ) , Altitude: 12.6m ]
#11
黄色が映えるイエローコリス
DateTime: [Aug 13 2010 16:45:37 (Asia/Tokyo)]
Exposures: [F Number: 9.0, Exposure Time: 1/125s, ISO: 400, Exposure Bias: 0.00Ev]
Equipments: [Focal Length: 48.0mm, Maker: Canon]
[ mylightbox ngg_gallery=10 thumb_class=”filmstrip” mapviewer=”colorbox” ]
#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 ]
とりあえず WordPressのプラグインを作成してみたが、”ThickBox3.1″ が IE9 に対応していないので “ThickBox” 以外に”ColorBox” という “ThickBox” と同じようなJavascript のライブラリを組み込んでみた.IE9の場合には “ThickBox” から強制的に”ColorBox” に切り替えるようにした.
プラグインの作成では電子国土の Javascript ライブラリの制約や不具合が多くて”ThickBox”や”ColorBox”上で電子国土地図を表示させることに苦労した.電子国土のシステムは最新の技術を採り入れて一度ゼロから作り直さなければ使い物にならなくなるのではないかと思う.国土地理院が提供するサービスは基本地図情報データをユーザに提供するだけにして、そこでどのようなアプリケーションを作成するかは全てユーザ側に任せた方が良いと思う.その方がユーザが使いやすい便利なシステムを構築できる筈である.
電子国土の Javascript ライブラリの問題があるので残念ながらこのプラグインは一般には公開できないだろう.