LightShop:フォトショとLightbox.jsでAjax風フォトギャラリー


現在LightShop2.0をリリースしています。



Adobe Photoshopフォトショ)に「Web フォトギャラリー」という自動でフォトギャラリーを作成してくれる機能があります。

これにLightbox.jsをプラスして、Ajax*1フォトギャラリーを自動生成させるモノを作ってみました。


サンプルページ


↑こういったものが簡単に作れます。


Lightbox.jsでMacwidgetsっぽくイメージを拡大できます。


■インストールは簡単です。
(PhotoShop7.0/WinXP

1.ファイルをダウンロードLightShop0.2.zip))して解凍します*2



2.解凍したフォルダをフォトショップの「Web フォトギャラリー」の中に移動する。
Windowsの一般的な構成では:
/Program Files/Adobe/Photoshop 7.0/プリセット/Web フォトギャラリー、

Macの一般的な構成では:
Adobe? Photoshop? 7.0/プリセット/Web フォトギャラリー です。

これでインストールは完了です。
フォトショが起動していても問題なくインストールできます。
もちろん再起動の必要もありません。


■使い方も簡単です。

1.フォトショを起動し[ファイル]-[自動処理]-[Web フォトギャラリー]を選択します。


2.[サイト]の[スタイル(Y)]で「LightShop0.1」を選択します。


3.[フォルダ]の[参照(B)]で、デジカメで撮った写真が格納されているフォルダを指定し、
 [フォルダ]の[保存先(D)]で、自動で作成されるHTML等が保存されるフォルダを指定します。
 [オプション]で「タイトル」や「背景色」など、様々なカスタマイズをします。


4.完成。


自動処理が完了すると上のようなファイル(フォルダ)が出来ます
「index_2.html」は写真の枚数や[オプション]の設定により異なります。
「UserSelections.txt」と「pages」は必要ありませんので削除してもOKです。


このフォルダごとWebにアップロードすればフォトギャラリーの出来上がりです。

デジカメで撮影した写真を友人などに見せるときに便利です。

サンプルページ

WindowsではIEFirefoxで正常な動作を確認しています。
MacではSafariFirefoxで正常な動作を確認しています。
MacIEではうまく表示されません。これはLightboxの影響です。
  • (2006.02.14)
    • サンプルがMacでうまく見れなかったので修正しました。
  • (2006.02.15)
    • MacSafari, Firefox)でも正常に見えるように修正しました。
    • LightShop0.2にバージョンアップ

*1:Ajaxではありません。

*2:中身はファイル4つ[Caption.htm][indexPage.htm][SubPage.htm][Thumbnail.htm]とフォルダ1つ[images]です。