jQueryで簡単かつビジュアルに長けたLightBox「Visual LightBox JS」

クチコミサイト構築「エディタ・エンタープライズ」
デモサイトトップ
制作技術
jQueryで簡単かつビジュアルに長けたLightBox「Visual LightBox JS」

クチコミサイト構築「エディタ・エンタープライズ」デモサイト

日本初のブログ自動収集システム「エディタ・エンタープライズ」により、簡単・低コスト・SEO対策が可能な口コミサイトが構築可能です。
ブロガー別の記事一覧やカテゴリ別、月別、取得画像別などさまざまな切り口で見せることができるので、映画や商品のキャンペーンをはじめ、テーマ別のポータルサイトを構築できます。

2009年12月27日｜記事提供：すくえあ

jQueryを使用してFacebook風、Vista風、Mac風のLightBoxを簡単に作れる「Visual Lightbox JS: Free Visual Generator for Lightbox 2 script for jQuery or Prototype. jQuery Lightbox.」です。
これ、何がすごいってローカルで動くプログラムで必要なファイルをすべて生成しちゃうってとこ。
手間がかかる画像加工もhtmlの記述もいりません。
唯一残念なのは、商用利用は有償ってとこ。

使用方法
Visual Lightbox JSからvisuallightbox-setup.exeをダウンロードします。

でてきたこいつをダブルクリックすると・・・

これにギャラリーぽくしたい画像をドラッグしていきます。

※画像をクリックするとキャプションを変更することが可能です。
次に設定に移ります。
歯車のような画像をクリックすると以下のようなモノがでてきます。

左上から、ギャラリー設定、サムネイル設定、LightBox部分設定、パブリッシュ設定となります。
■ギャラリー設定
スライドショーや自動再生、拡大表示、拡大時にオーバーレイをかけるかを選択します。
またjQueryだけでなく、prototypeも選択可能です。
■サムネイル設定
画像の見せ方を選択可能です。
また大きさ、画質も変更できます。
■LightBox設定
ここでは拡大時の設定が可能です。
こちらも見せ方、大きさを選択できます。
なお「Watermark」という項目がありますが、こちらは有償版でないと変更できないようです。
無償版の場合は、VisualLightBox.comと画像に入ってきます。
■パブリッシュ設定
ローカルに吐き出すか、FTP上に上げるかを選び、最後にファイル名を決めて「Publish」すれば完成です。
できるファイルは、「data」「engine」の2つのフォルダで、設定側はすべてengineに入っています。

jQueryで簡単かつビジュアルに長けたLightBox「Visual LightBox JS」サンプル