トップ   編集 差分 履歴 添付 複製 名前変更 リロード   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS   ログイン

WebTools/フォトギャラリー/simpleviewer2 の変更点


#author("2018-05-19T09:43:27+09:00","default:hrmz","hrmz")
#contents
*SimpleViewer [#u76c2a96]
-http://www.simpleviewer.net/simpleviewer/
-flash/HTML5で実装されているフォトギャラリー
-flashがなくても利用できる様になった。
-Standard版(無料)は50枚までしか画像が表示できなくなった模様。。。

**スクリーンショット [#mb8608fc]
標準(MODERN)スタイル
#ref(./sv2-modern.jpg,44%)
コンパクト(COMPACT)スタイル
#ref(./sv2-compact.jpg,46%)

**動作環境 [#y83f59ac]
-flashプラグイン もしくは HTML5をサポートしたブラウザ

**セットアップ環境 [#y223077f]
[[@niftyホームページサービス>http://homepage.nifty.com/]]~
SimpleViewer v2.1.2~

**インストール [#ue7494b2]
http://www.simpleviewer.net/simpleviewer/
(Downloadのボタンから)

-上記からsimpleviewer.zipをダウンロードしてきてローカルPCで解凍しておきましょう。
-自分のサーバのドキュメントルートにsimpleviewerディレクトリを作成。
-作ったsimpleviewerディレクトリにzipを解凍してできたwebフォルダの中のファイルをアップロードしましょう。

**画像の登録 [#u9d0f83d]
-好きな画像をimagesディレクトリにアップロード
-http://www.simpleviewer.net/simpleviewer/support/buildgallery.html
&br;(2.Download BuildGallery にダウンロードリンクがあるので「buildgallery_sv.zip」をダウンロード)
-buildgallery_sv.zipをダウンロードしたら解凍しておく。
-画像登録スクリプト(buildgallery.php)をサーバーのインストール時に作ったディレクトリにアップロード
-画像登録スクリプト(buildgallery.php)を実行するとギャラリーの設定ページが起動し、項目を設定して「Update」を押すと画像管理ファイル(gallery.xml)とサムネイルが生成される。
#ref(./buildgallery.jpg)
-下記のカスタマイズ可能な項目もある程度GUI(buildgallery.php)で設定できる様です。

**カスタマイズ [#ebd8aa84]
***ブラウザに表示されるタイトルを変える(タイトルバー) [#d850593e]
index.htmlのtitleタグで囲まれた部分を修正する。~
日本語を使う場合はcharsetの指定やファイル自体を指定した文字コードで保存しておく事を忘れずに!(初期状態だとUTF-8で保存 > [[UTF-8を扱えるテキストエディタはこちら>Windows/テキストエディタ]])

***背景色を変更する [#n08b6075]
index.htmlの13行目付近
 SV.simpleviewer.load('sv-container', '100%', '100%', '222222', true);←「222222」の部分が背景色の指定。
[[Webサイト制作関連/カラーパレット]]等を参考に好きな色を指定する。

***ページの中のタイトルを変える [#q2a545d2]
gallery.xmlの最初の方にあるsimpleviewergalleryタグ内のtitle に好きなタイトルを設定する。

***ナビゲーション(サムネイル画像リスト)の位置や数を変える [#jaa5d595]
gallery.xmlの最初の方にあるsimpleviewergalleryタグ内の
-thumbPosition ・・・ナビゲーションの位置を指定する&br;
"top", "bottom","left","right","none"が指定できる
-thumbColumns・・・サムネイルの列数
-thumbRows・・・サムネイルの行数

例えば
 thumbPosition = "bottom" thumbColumns = "5" thumbRows = "1" 
と指定すると画像の下に横に1行5枚サムネイルが並ぶ

***ギャラリーのスタイルを変える [#y1d6ffb9]
gallery.xmlの最初の方にあるsimpleviewergalleryタグ内のgalleryStyleを変える
-MODERN・・・標準のスタイル
-COMPACT・・・ブログ等に埋め込む為のスタイル。ナビゲーションがコンパクトにまとめられていたり、キャプションがオーバーレイで表示される。
-CLASSIC - SimpleViewer v1.9 のスタイルらしい(矢印のデザインがちょっと違う)

***画像フレームの色や太さを変える [#v547e358]
gallery.xmlの最初の方にあるsimpleviewergalleryタグ内の
-frameColor・・・フレームの色を指定できる。&br;
[[Webサイト制作関連/カラーパレット]]等を参考に好きな色を指定する。
-frameWidth・・・フレームの太さを指定できる。(px)

***キャプション等のテキストの色を変える [#df0cac6c]
gallery.xmlの最初の方にあるsimpleviewergalleryタグ内のtextColorで指定する。&br;
[[Webサイト制作関連/カラーパレット]]等を参考に好きな色を指定する。

***「新規ウィンドウで開く」「フルスクリーンで再生」ボタンの有無を調整する [#x6fa29c4]
gallery.xmlの最初の方にあるsimpleviewergalleryタグ内の
-showOpenButton・・・「新規ウィンドウで開く」ボタン"true"が有りで"false"が無し
-showFullscreenButton・・・「フルスクリーンで再生」ボタン"true"が有りで"false"が無し

***画像にキャプションをつける [#hc576330]
gallery.xmlに画像1枚毎にimageタグでくくられているので、その中にcaptionタグを設定する。
  <image imageURL="画像のパス" thumbURL="サムネイルのパス" imageLinkURL="" imageLinkTarget="">
    <caption><![CDATA[<a href="キャプションのリンク先(不要な場合は取る)"><u>この部分の文字列を変更する。</u></a>]]></caption>
  </image>

**コメント [#g5228ee2]
- はじめまして。わかりやすく書かれているので、だいぶ参考にさせて頂きました。 -- [[K]] &new{2011-05-19 (木) 01:37:01};
- すみません、誤ってコメントボタン押してしまいました。カテゴリー分けして複数のギャラリーを表示させたいのですが、どのようにすればいいのかわかりません。もしおわかりでしたら、教えて頂けると助かります。 -- [[K]] &new{2011-05-19 (木) 01:39:56};
- すいませんカテゴリー分けについてはできるか判らないですね。。。(できなさそう)複数のギャラリーを使うなら[[WebTools/フォトギャラリー/IMAGIN]]か[[WebTools/フォトギャラリー/minishowcase]]がオススメです。 -- [[hrmz]] &new{2011-05-19 (木) 11:30:30};
- 早速お返事ありがとうございます。そうなんですね…画像が50枚以上あるので、複数ギャラリー作りたかったのですが。 -- [[K]] &new{2011-05-19 (木) 15:36:38};
- おすすめソフトも見てみます。ありがとうございました -- [[K]] &new{2011-05-19 (木) 15:37:06};
- 1ディレクトリ=1カテゴリにすればできるとは思いますがカテゴリのまとめページを別途作らないといけなさそうですね。 -- [[hrmz]] &new{2011-05-20 (金) 11:15:24};