skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

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

｜ ｜ ｜ ｜ ｜ ｜ ｜

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」サンプル

記事作成：2009年12月27日

前の記事：雪が舞い散るJavaScript「Snowfall」
次の記事：Facebook風のツールチップを実現するJavaScript「tipsy」