digilog.blog

スポンサーサイト

--/--/--(--)
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

SimpleViewerの設置方法とカスタマイズ(iPhone、Android対応FLASHギャラリー)

2010/03/08(月)
Simple Viewer
このエントリーでは、誰でも簡単にフォトギャラリーを設置できるオープンソース、「SimpleViewer(シンプルビューアー)」の解説を行っています。

SimpleViewerを使うと、自分のWebサイトに写真や画像を一覧表示させるギャラリーを簡単に設置することがでます。また、見た目や表示方法をカスタマイズできる豊富なオプションが用意されており、配布元は英語ですが、画像の説明文に日本語やHTMLタグを使うこともできます。更にiPhoneなどのスマートフォンに対応しているのでタッチスクリーンでも快適に操作できます。

おかげさまで沢山の方からお問い合わせを頂いておりますが、SimpleViewer自体が度々アップデートを行っているので、どうしても古いバージョンの説明では不十分な箇所が発生してしまいます。あらかじめご了承下さい。

分からない部分があって、なるべく早く返事が欲しい方は直接メールフォームよりお問い合わせ下さい。
最終確認履歴:Version 2.3.1
動作確認:まずはダウンロードしてみよう

「SimpleViewer」とはFLASHとXMLを使用して誰でも簡単にフォトギャラリーが作れるオープンソースです。

▼ダウンロード
SimpleViewer公式サイトへ

【手順】
・SimpleViewerの本体をダウンロード
・ダウンロードした圧縮ファイルを解凍
・[simpleviewer]フォルダの中にある[web]フォルダを開く
・webフォルダの中にある[index.html]ファイルをブラウザで開く
↓↓↓
ブラウザ(IEやFirefox)で正常に観覧できましたか?
ちゃんと表示されたら動作チェックは完了です!


基本的な設置方法:好きな写真や画像を表示させよう

まず、[web]フォルダ内にある[images]フォルダにギャラリーで表示させたい画像を入れます。そして、[thumbs]フォルダにはサムネイル用の小さい画像を入れます。この2つは同じものでも構いませんし、あえて違う画像にしても問題ありません(いくらでも変更できます)。

【手順】
・[web/images]フォルダに画像を入れます
・[web/thumbs]フォルダにサムネイルとして表示させたい画像を入れます
・[web]フォルダ内にある[gallery.xml]を開いて編集します

※[gallery.xml]は、初期設定の状態でダブルクリックするとブラウザが起動することがあります。XMLファイルを編集できるテキストエディタで開きましょう
※[images]と[thumbs]に入れる画像のファイル名は管理しやすいように同じ名前か、似たような名前にしておきましょう

下記と同じ部分を探してみましょう。
[gallery.xml]27行目あたり。
<image imageURL="images/wide.jpg" thumbURL="thumbs/wide.jpg" linkURL="" linkTarget="" >
<caption><![CDATA[Welcome to <u><a href="http://www.simpleviewer.net" target="_blank">SimpleViewer</a></u>.]]></caption>
</image>

こちらを分かりやすく並べ替えてみると、こういう構造になります。
<image imageURL="images/wide.jpg" thumbURL="thumbs/wide.jpg" linkURL="" linkTarget="">
<caption>
<![CDATA[
Welcome to <u><a href="http://www.simpleviewer.net" target="_blank">SimpleViewer</a></u>.
]]>
</caption>
</image>

例)
表示させたい画像「001.jpg」を[images]フォルダに入れます。
サムネイル画像「thum001.jpg」を[thumbs]フォルダに入れます。

※[images]フォルダに入れる画像と[thumbs]フォルダに入れる画像のファイル名は、同じ名前でも違う名前でも問題ありません
※[images]フォルダに画像を入れて[thumbs]フォルダに画像を入れないと、[images]フォルダ内の画像で勝手にサムネイルを表示してくれます。しかし、処理が遅くなるのでなるべく用意しましょう

[gallery.xml]を以下のように変更します。
<image imageURL="images/001.jpg" thumbURL="thumbs/thum001.jpg" linkURL="" linkTarget="">
<caption>
<![CDATA[
Welcome to <u><a href="http://www.simpleviewer.net" target="_blank">SimpleViewer</a></u>.
]]>
</caption>
</image>

ここまでできたら、一度[gallery.xml]を上書き保存して、[index.html]をブラウザで開いて確認してみましょう!うまく表示されない方は、フォルダに入れたファイル名とXMLに記述したファイル名が合っているか確認してください。


テキストの編集:<caption>の使い方(日本語使用可能)

[gallery.xml]内の[caption]は、各写真の説明文です。
基本的に文字列だけを扱う場合は
<caption>
Welcome to SimpleViewer
</caption>
というシンプルな記述でOKです。

<caption>
日本語も使えます。
</caption>
という具合に日本語も扱えます。


<caption>の中でHTMLタグを使う

[caption]内でHTMLタグを使いたい場合には「CDATAセクション」というものを用います。簡単に説明すると、XMLの要素内で直接HTMLタグは使えないので、CDATAで括ってあげれば使えるようになるよ!というものです。
<caption>
<![CDATA[
CDATAで括られた部分は<font color="#003399">XML上で通常の文字列</font>として扱われます。<b>HTMLタグ</b>で文字を装飾できます!
]]>
</caption>



画像にリンクを付ける&別ウィンドウで開く

ギャラリーでは、画像ごとにリンクURLを設定することができます。また、リンク先を表示する際のオプションも設定することが可能です。

▼[gallery.xml]
<image imageURL="images/001.jpg" thumbURL="thumbs/thum001.jpg" linkURL="http://www.google.co.jp/" linkTarget="Blank" >
<caption>
キャプション内のテキスト:画像の説明文
</caption>
</image>

linkURL="右上のリンクオープンボタンに飛び先を設定"
linkTarget="ターゲット(リンクの開き方)の設定"
という感じで、各写真に対して個別にリンクを設定できます。


gallery.xml のオプションを設定する

[gallery.xml]内にある下記のパラメーターに対して、様々なカスタマイズが可能になっています。

▼[gallery.xml]
galleryStyle="MODERN or CLASSIC or COMPACT"
title="ギャラリーのタイトル"
textColor="文字の色(ex:#333333)"
frameColor="写真フレームの色(ex:#EEEEEE)"
frameWidth="写真フレームの幅(0~n)"
thumbPosition="サムネイルの表示位置(TOP,RIGHT,BOTTOM,LEFT)"
thumbColumns="サムネイルの横並び数(1~n)"
thumbRows="サムネイルの縦並び数(1~n)"
showOpenButton="リンクオープンボタンの表示設定(TRUE or FALSE)"
showFullscreenButton="フルスクリーンボタンの表示設定(TRUE or FALSE)"
maxImageWidth="写真最大幅"
maxImageHeight="写真最大高さ"
useFlickr="Flickrを使うかどうか(TRUE or FALSE)"
flickrUserName="Flickrの設定(基本空欄)"
flickrTags="Flickrのタグ(基本空欄)"
languageCode="言語コード(基本AUTO)"
languageList="言語リスト(確認)"
imagePath="写真フォルダへのパス(images/)"
thumbPath="サムネイルフォルダへのパス(thumbs/)"



ギャラリー全体の背景色を変更する

画面全体の背景色を変えたい場合は、[index.html]内の下記ソースを直接編集することで実現できます。
▼[web/index.html]
<script type="text/javascript">
simpleviewer.ready(function () {
simpleviewer.load('sv-container', '100%', '100%', '222222', true);
});
</script>

上記の場所に[FFFFFF]や[0066FF]などのカラーコードを指定します。
カラーコードサンプル


ギャラリーに背景画像を付ける

画面全体に背景画像を敷きたい場合は[index.html]にCSSを追記して、javascriptを少しいじる必要があります。
<style type="text/css">
<!--
body {
background-image: url(images/background.jpg);
}
-->
</style>
まずはヘッダー内にCSSを追記して、背景画像を指定します。

<script type="text/javascript">
simpleviewer.ready(function () {
simpleviewer.load('sv-container', '100%', '100%', 'transparent', true);
});
</script>
次に、背景色を指定するパラメーターを「transparent(透明)」にします。
これでCSSが呼び出した画像が背景に表示されるはずです。


複数のギャラリーを設置したい場合

一つのサイト内に複数のギャラリーを設置したい場合の対処方法です。丸ごと複製して別ディレクトリに設置することもできますが、swfとJavascriptを使い回した方が軽くて管理も楽になります。

▼SimpleViewerの本体を読み込むHTML内のJavascript
<script type="text/javascript">
simpleviewer.ready(function () {
simpleviewer.load('sv-container', '100%', '100%', '222222', true);
});
</script>
上記コード内に、[galleryURL]のパラメーターを追加します。

<script type="text/javascript">
var flashvars = {};
flashvars.galleryURL = "gallery01.xml";

simpleviewer.ready(function () {
simpleviewer.load('sv-container', '100%', '100%', '000000', true, flashvars);
});
</script>
これは、SimpleViewerのコアファイルに渡すパラメーターのオプションの一つで、[flashvars]という変数にギャラリーのURLを代入して渡す機能になります。

または、
<script type="text/javascript">
simpleviewer.ready(function () {
simpleviewer.load('sv-container', '100%', '100%', 'FFFFFF', true, {galleryURL: 'gallery02.xml'});
});
</script>
という風に記述することもできます。

例えば…
index.html
├gallery01.htmlでgallery01.xmlを読込
├gallery02.htmlでgallery02.xmlを読込
└gallery03.htmlでgallery03.xmlを読込
このようにHTMLとXMLを複数用意することで、違う画像を表示させるギャラリーをいくらでも作ることができます。
※この際、それぞれのXMLファイルで定義する画像ファイルを別々のフォルダに分けておくと管理しやすいでしょう


やっぱり素晴らしい!SimpleViewer

バージョンが新しくなって更に高機能になったSimpleViewer!とても使いやすく、初心者から上級者まで幅広いユーザーを満足させてくれます。
趣味で写真を撮っている方、イラストやCGを格好よく並べたい方は、色々試してみてはいかがでしょうか。

SimpleViewerが特に素晴らしい点は以下
・無料で使える
・分かりやすい
・柔軟なカスタマイズ
・日本語対応
・スマホ対応

▼ダウンロード
Simpleviewer.net

関連記事

日本語対応 FLASHウェブギャラリー「TiltViewer」の使い方!

■コメント
Re: タイトルなし / LOSTMAN@管理人 #-
>SAKUさん
コメントありがとうございます。
Web上にアップして公開するにはサーバーをレンタルする必要があります。
既にサーバーを持っている場合には、FTPソフトなどを使ってファイル一式をアップロードします。
HPを持っている場合は、そのHTML内にSimpleViewerへのパスをリンクでつなぎます。
2013/03/19(火) 21:08 | URL
/ SAKU #-
参考にさせて頂きました!
無事カスタムし終えたのですが、これをWEB上にUPして、
自信のHPから表示させるにはどうすればいいのかが見当がつきません・・・
2013/03/19(火) 01:12 | URL
Re: タイトルなし / LOSTMAN@管理人 #-
えーいちさん

>彩度の低下の原因はカラープロファイル
なるほどカラープロファイルでしたか。
その画像をWebでしか公開しないのであればカラープロファイルを埋め込まないのも一つの手ですね。
Photoshopなどで画像を書き出す際に「カラープロファイルを埋め込む」のようなチェックボックスがあるはずなので、それを外すとモニタで表示されたまんまの色が出るはずです。
それにしても「Pro」をDLするとは!柔軟な対応すばらしいです!
2013/02/19(火) 15:47 | URL
管理人のみ閲覧できます / #
このコメントは管理人のみ閲覧できます
2013/02/14(木) 15:18 |
Re: 彩度について / LOSTMAN@管理人 #-
えーいちさん
コメントありがとうごうざいます。
こちらで最新版をDLして確認してみましたが、彩度は元の画像と同じままでした。
JPG、GIF、PINそれぞれ別の画像で試しましたが変化無しです。

・もう一度最新版をDLして初期状態で確認してみる
・他の画像に差し替えて確認してみる
・同じ環境を別のPCで見てみる
などで何か原因が分かるかも知れません。

どうしても解決できない場合は
使用しているソースと画像を添付で送って頂ければ解析してみます。
宜しくお願いします。
2013/02/09(土) 13:39 | URL
彩度について / えーいち #gBH.Dyms
こんにちは、シンプルビューアーのカスタマイズでお世話になっております。
今回、気になる点が見つかったのですが
教えてください。

というのは、
シンプルビューアーを通して画像を表示させると、
彩度が低下して表示されてしまいます。
更新前のものでは気になることはなかったのですが、現在のものは顕著です。
また、グーグルクロームのブラウザを使用しているのですが、ブラウザ上にドロップした画像自体は彩度の低下はみられません。
なので、シンプルビューアーが原因とする彩度の低下かとおもわれますが、
原因と解決策をご教授ください。

ただいまの推測は、各RGB(Nikon RGB, Adobe RGB, sRGBなど)との互換性なのかな?と考えたりもしていますが、どちらにせよ解決方法がわからない状況です。

宜しくお願いします
2013/02/07(木) 15:02 | URL
Re: SimpleViewerの複数設置 / LOSTMAN@管理人 #-
>とみちゃんさん
コメントありがとうございます。
ギャラリーを複数設置する場合には、index.html内の下記コードを書き足します。
複製したファイル名が「gallery_2.xml」であれば、
simpleviewer.ready(function () {
simpleviewer.load('sv-container', '100%', '100%', '222222', true);
});
▼▼▼
simpleviewer.ready(function () {
simpleviewer.load('sv-container', '100%', '100%', '222222', true, 'gallery_2.xml');
});
という風に記述します。

※エントリー内の説明に一部誤りがあったので修正しました。
宜しくお願いします。
2013/02/06(水) 19:00 | URL
SimpleViewerの複数設置 / とみちゃん #-
ページでの詳しい説明有難う御座います。

当ホームページにてフォルダ写真別SimpleViewerを複数に設置したいのですが上記のご回答にある
simpleviewer.ready(function () {
simpleviewer.load('sv-container', '100%', '100%', parameters.bg, false, {galleryURL: parameters.galleryURL || 'gallery.xml'});
});

を記述すると何も表示されなくなってしまいます。
既存は下記です。
simpleviewer.ready(function () {
simpleviewer.load('sv-container', '100%', '100%', '222222', true);
});

gallery.xmlより複製しgallery_2.xmlを作成し
ました。
ご回答お願い致します。
当方多少わかるぐらいの初心者ですが宜しくお願い致します。
2013/01/30(水) 11:37 | URL
Re: XML編集について / LOSTMAN@管理人 #-
MKさん

> 説明通り、imageにp001.jpg thumbsにt001.jpgと入力したのですがindexで見ると×になってしまいます。
再度確認してみましたが、違うファイル名の画像を入れて指定しても表示されることを確認しました。
上記の文章だと「image」のフォルダ名を「images」に直すと改善するかもしれません。

[images]と[thumbs]に同じファイル名を指定した場合は、自動的に[images]フォルダ内の画像を縮小して表示してくれます。

確認してみてください。
2012/07/26(木) 14:40 | URL
Re: XML編集について / LOSTMAN@管理人 #-
MKさん
コメントありがとうございます。

> 説明通り、imageにp001.jpg thumbsにt001.jpgと入力したのですがindexで見ると×になってしまいます。
「images」フォルダと「thumbs」フォルダに同じファイル名の画像を入れておくと大丈夫なようです。
一応gallery.xmlでは個別に設定できるので、別ファイルでも行けそうなのですが、いろいろ試してみると「images」フォルダに入っている画像を縮小してサムネ表示させているようです。

現状、「同じファイル名の画像を入れておく」で対応お願いします。
※記事中の説明を修正しておきます。
2012/07/26(木) 14:12 | URL
XML編集について / MK #-
説明通り、imageにp001.jpg thumbsにt001.jpgと入力したのですがindexで見ると×になってしまいます。
どうすればいいでしょうか?
2012/07/24(火) 02:30 | URL
Re: Simple Viewer.swf作成について / LOSTMAN@管理人 #-
>ぱぱぱさん

Simple Viewer本体のFLASHはあくまで
ギャラリーの動きを制御するものです。

Gallery XMLの中に画像情報を記述し
HTMLのソース内でGallery XMLを読み込むことで
ブラウザで見たときに動くような仕様になっているかと思います。

なので、swf、xml、htmlのセットで使う必要があるので
現状のswf単体では動きません。

あくまでダウンロードした状態の形で
使ってもらうことを想定しているものだと思います。
2012/01/20(金) 01:41 | URL
Simple Viewer.swf作成について / ぱぱぱ #-
お世話になっております。
Simple ViewerでHTMLファイルの他にSWFファイルも作成したいのですが、方法はあるのでしょうか?
(旧バージョンだと出来てたっぽいのですが…)
実際にダウンロードしたSimple Viewerのファイルを見ると、Simple Viewer.swfファイルがありましたが、開くと「Gallery XML NotFound」となり表示されません。
これはXMLに何かの記述を加えないといけないのでしょうか?
何度も申し訳ございません。
よろしくお願いします。
2012/01/14(土) 18:05 | URL
Re: 画像について / LOSTMAN@管理人 #-
ULTRAさん

コメントありがとうございます。

ダウンロードしたソースをそのままの状態で表示されないものが、いつのまにかおかしくなった場合、カスタマイズしている途中の経過に原因があります。元のソースと自分が変更した部分を見比べてみると解決方法が見つかるかもしれません。

調べてみても分からない場合は、メールフォームから詳しい内容を書いて送ってもらえれば調査できるかと思います。
宜しくお願いします。
2011/12/11(日) 14:29 | URL
画像について / ULTRA #-
表示されたメイン画像に矢印と一緒に下にグレイのラインがでて何文の何枚目の1/4が表示されるのですが
これはどうしたら消せるのでしょうか教えてください。
DEMOサンプルにはでていないので消し方をよろしくお願い致します。
2011/12/10(土) 23:09 | URL
index.htmlのアップロードについてのお礼 / stone #-
ありがとうございました

これらのやり方は、検索して調べる→やってみる→分からないところを検索して調べる→やってみる、の繰り返しで理解できるようになります。

その通りでした。時間は掛かりましたが理解出来、たいへん勉強になりました。
ご指導ありがとうございます
とても感謝いたします

2011/12/06(火) 00:47 | URL
Re: index.htmlのアップロードについて / LOSTMAN@管理人 #-
stoneさん
コメントありがとうございます。

ファイルのアップロードに関しては、外部に公開するサーバースペースを借りる必要があります。
お金を掛けたくなければ「無料 レンタルサーバー」などで検索、広告を設置したり好きなドメインで運営したい場合は「さくらインターネットのレンタルサーバー」などがオススメです。

流れとしては、サーバーを借りる→アップロードする→そのファイルが置かれているURLへアクセスする。という感じです。

これらのやり方は、検索して調べる→やってみる→分からないところを検索して調べる→やってみる、の繰り返しで理解できるようになります。

是非とも自分なりのやり方を見つけてみて下さい!
2011/12/05(月) 17:11 | URL
index.htmlのアップロードについて / stone #-
とても分かりやすく初心者の私にも作成することが出来、カスタマイズまでできました。
しかし、ここからが素人なのですが、どうしたらサイトにこのindex.htmlをアップロード出来るのでしょうか?どうか教えていただきたいです。よろしくお願い致します

2011/12/04(日) 23:06 | URL
Re: 大変参考になりました / LOSTMAN@管理人 #-
ぎぎさん
コメントありがとうございます。

「FC2ブログにindex.htmlをアップロードした」とはテンプレートを書き換えたということでしょうか?
基本的にホームページとブログは、Webサイトという意味では同じですが、Simpleviewerはホームページ向きです。
Simpleviewerを使ってギャラリーを作るには、HTMLとFTP(今はsftpかscpを推奨)の知識が必要です。

Simpleviewerやブログがどのように動いているのか、何となくでも良いので調べてみてください。
宜しくお願いします。
2011/09/11(日) 11:59 | URL
大変参考になりました / ぎぎ #35yttFdc
ぎぎと申します。
この記事を参考にしてみて
simpleviewer\web\index.htmlを開いてみた結果、正常に表示することができました。
そこでFC2ブログの方にギャラリーを作りたかったので早速,先程のindex.htmlをアップロードしてみたところ真っ白なページが表示されてしまいます。
WEBに関しては全く知識が無いのでアップロードするものが足りないんだと思いgallery.xmlやimagesフォルダ・svcoreフォルダ・thumbsフォルダの中のものを一つずつアップロードしていきました。そしてindex,htmlを確認したのですが白紙のページのままです。
前述の通りwebに関しての知識が無いので色んなページを参考にしながら試行錯誤している段階なのですが一向に解決出来ません。アップロードするべきものを間違えているのでしょうか?的はずれなことを聞いていたらごめんなさい。
ちなみにsvBuilderというsimpleviewer付属のソフトを使ってindex.htmlを作成したので記述にミスがあるということはないと思います。
2011/09/10(土) 15:50 | URL
Re: タイトルなし / LOSTMAN@管理人 #-
やんゆじさん

コメントありがとうございます。

> 作ったsimpleviewerの画面を、すでにある自分のgalleryのページに表示させることは出来ますでしょうか?
DLしたSimpleviewerのindex.html内にある9~17行目を移植することで設置可能です。その際、ページのCSSやパラメーター(simpleviewer.load('sv-container', '100%', '100%', '222222', true);)の設定を工夫してみてください。

> simpleviewerを複数のページにわたって設置したい場合、どのようにすれば実現できますでしょうか?
DLしたファイルの中にあるsimpleviewer_213/web/svcore/full.html のソースを見るとヒントがあります。
▼Javascript
simpleviewer.ready(function () {
simpleviewer.load('sv-container', '100%', '100%', parameters.bg, false, {galleryURL: parameters.galleryURL || 'gallery.xml'});
});

gallery.xmlを別名で複製してgalleryURLで指定してあげます。(例:gallery002.xml)
gallery002.xml内部の画像指定を変えれば別ギャラリーとして機能するはずです。

ほかに不明な点がありましたらメールフォームからお問い合わせ下さい。
2011/07/31(日) 23:28 | URL
/ やんゆじ #-
はじめまして。記事を拝見させていただきました。大変分かりやすいご説明で非常に助かっております。
質問なのですが、この作ったsimpleviewerの画面を、すでにある自分のgalleryのページに表示させることは出来ますでしょうか?

また以前にも質問があったようですが、simpleviewerを複数のページにわたって設置したい場合、どのようにすれば実現できますでしょうか?
質問が多くて申し訳ありませんが、アドバイスよろしくお願いいたします。
2011/07/31(日) 17:58 | URL
Re: 困ってます / LOSTMAN #-
> miyukiさん
> cannot Parse Gallery XML
XMLを正しくパースできてないようです。
別のオープンソースか何かの中に組み込もうとしたり、サーバーの環境によってはエラーがでるかもしれません。
詳しい状況を教えて頂ければ、何かアドバイスできるかもしれないので、お困りでしたらメールフォームよりご連絡下さい。
2011/07/13(水) 22:14 | URL
困ってます / miyuki #-
cannot Parse Gallery XMLと表示されます。なぜだか原因がまったくわかりません!!教えてほしいです。。。
2011/06/27(月) 19:55 | URL
Re: ミスして気がつきました / LOSTMAN@管理人 #-
> ヒロ吉さん
コメントありがとうございます!
確かに画面背景色の変更は需要の多そうな部分ですね!アドバイス頂いた内容を本文に追記させて頂きました。
宜しくお願いします。
2011/06/22(水) 16:39 | URL
ミスして気がつきました / ヒロ吉 #o/PXu/q6
とてもわかりやすい解説をありがとうございます。
index.html のどこをいじればバックの色が変わるのかも付け加えられたら、初心者の方もより使えるようになるかと思います。

たまたま忘れて気がついたのですが、「thumbs」に画像を入れなくても、「images」に画像が入っていれば、勝手に「thumbs」も作成されていました。

これはもしかすると環境によっては変わってくるのかもしれませんが…。
せっかく使いやすいページなので、おせっかいを!
2011/06/22(水) 01:42 | URL
Re: わからない>< / LOSTMAN@管理人 #-
Junさん

コメントありがとうございます。

> 初めまして、突然ですが質問です。
> 画面右上に「新規ウインドウで開く」というと「振るsクリーン再生」と言うアイコンが出ますが、これらを表示させない方法は??

gallery.xmlの
showFullscreenButton="TRUE"

showFullscreenButton="FALSE"
で設定できます。
ご確認を!
2011/06/02(木) 10:39 | URL
わからない>< / Jun #JalddpaA
初めまして、突然ですが質問です。
画面右上に「新規ウインドウで開く」というと「振るsクリーン再生」と言うアイコンが出ますが、これらを表示させない方法は??
2011/06/02(木) 09:05 | URL
Re: タイトルなし / LOSTMAN@管理人 #-
コメントありがとうございます。
こちらではフレーム内でも正常に表示されることを確認できました。
ファイルへのパスが正常に指定されているか確認してみて下さい。

//サンプル
<frameset rows="60px,*">
<frame src="framesample01.html" name="f-header">
<frameset cols="150px,*">
<frame src="menu.html" name="f-menu">
<frame src="gallery.html" name="f-body">
</frameset>

お問い合わせフォームから詳しい状況を教えて頂ければ、もう少し調査できるかもしれません。
宜しくお願いします。

> 2分割したフレーム内にsimple viewerを表示させたいのですが上手く表示できません。
> リンクを押すとフレーム内に灰色の画面(多分simple viewerの背景色)しかうつりません。お手数かけますがアドバイス頂けると嬉しいです

2011/05/15(日) 17:07 | URL
/ 名無し #-
2分割したフレーム内にsimple viewerを表示させたいのですが上手く表示できません。
リンクを押すとフレーム内に灰色の画面(多分simple viewerの背景色)しかうつりません。お手数かけますがアドバイス頂けると嬉しいです
2011/05/08(日) 01:32 | URL
Re: 初めましてiphone表示について / LOSTMAN@管理人 #-
>リリーさん

SimpleViewerはFLASHで作られているのですが、基本的にiPhoneではFLASHが見れません。
何か対策できるかどうかこちらでも調査してみます。

具体的な質問や実際にサイトを見ながらのアドバイスが必要な場合は、問い合わせからメールアドレスをお知らせ下さい。
2011/04/04(月) 13:55 | URL
初めましてiphone表示について / リリー #SFo5/nok
SimpleViewer Galleryを使ってHPを作っています。PCで見る分には問題ないのですが、iphoneで見ると、CSSで組んである背景が自動圧縮されません。(全体が見えない状態)で、SimpleViewerのソース部分をとると自動リサイズされ全体が見えます。購入したのに困ってます。。。もし改善策があれば教えて頂けないでしょうか?
▼サンプル
www.eight-wonder.com/pgp/03.html

www.simpleviewer.net/simpleviewer/examples/compact/
2011/04/04(月) 10:01 | URL
Re: タイトルなし / LOSTMAN@管理人 #-
>三毛猫さん
ありがとうございます。
SimpleViewerがまたバージョンアップしたようで、ソースが変わっていました。
調査が必要なので、解決しないようでしたら問い合わせフォームからメールを頂けると、分かり次第返事ができると思います。宜しくお願いします。
2010/12/22(水) 14:35 | URL
/ 三毛猫 #-
詳しく説明してくださり、とても助かりました。HP作り初心者ですがおかげさまでSimpleViewerを無事設置する事ができました。

ひとつお聞きしたいのですが、ひとつのHPで複数のギャラリーを作る事は出来ないのでしょうか?
(fatboyさんへのコメント欄にある方法しかないでしょうか?)

>■index.html 内のソース
└flashvars.galleryURL = "gallery.xml";
という部分の読み込みXMLファイルを変えることで増設可能です。

これが見当たらないのです・・・

自分はhtmlとcssが少し分かる程度の初心者なので、もし的外れの質問だったらごめんなさい。勉強してきます。
2010/12/20(月) 11:57 | URL
管理人のみ閲覧できます / #
このコメントは管理人のみ閲覧できます
2010/09/28(火) 21:33 |
管理人のみ閲覧できます / #
このコメントは管理人のみ閲覧できます
2010/09/04(土) 03:05 |
ありがとうございました。 / MY #-
LOSTMANさん

お忙しい所 お返事ありがとうございます。
あれからずっと悩んでいたのですが
WEBに詳しい方に会う機会があったので見てもらったところ 解決しました!

<style type="text/css" media="screen">の中に のflashContentの幅の指定をしてなかったのが原因だったようです。

ありがとうございました。
2010/08/06(金) 18:48 | URL
Re: windows7などの表示について / LOSTMAN@管理人 #-
>MYさん
質問ありがとうございます。
現在当方の環境がWin XPのため、直接確認できないのですが、Win7の方に「simpleviewer」のサイトのDEMOを見て頂いて、正常に表示されるようなら、何かしら改善の見込みがあると思います(最新版をDLするとか)。
詳しい状況が分かれば、調査できるかもしれません。
2010/08/01(日) 19:09 | URL
windows7などの表示について / MY #-
LOSTMANさん
初めまして。

詳しくご説明頂いているおかげで とても簡単にsimpleviewerを設置する事ができました!ありがとうございます。

ですが 何人かの友達が1本線が入っているだけで 写真が表示されてないと言うんです。聞くとそれはwindows7の人ばかりでした。
そういった事はありますか?
それように なにかカスタマイズする必要があるかもし分れば 是非アドバイス頂けたらと思います。
どうぞよろしくお願いします。
2010/07/16(金) 10:40 | URL
Re: タイトルなし / LOSTMAN@管理人 #-
>こしあんさん
質問ありがとうございます。

>titleのフォントサイズがとても大きく入れたい文字が全て表示されなくなってしまいます。
>titleのフォントサイズを変更することは可能でしょうか?
titleとは gallery.xml の「title」(サムネイルの上に表示されるもの)のことでしょうか?

こちらは長いタイトルを入れても勝手に改行されて全部表示されるはずです。基本的な仕様では文字サイズは変えられないようですね。

一応裏技的に
title="この中にHTMLタグを特殊文字でエスケープして書く"
というのが使えますが、動作保障できないので非推奨ですね。
2010/04/14(水) 18:37 | URL
/ こしあん #-
前回のSimpleViewerの記事も含めて参考にさせて頂きました。

一つ色々なサイトを回ったのですがどうしてもわからない事がありましたので質問よろしいでしょうか。
新しいバージョンのSimpleViewerを使おうと思っているのですが、
titleのフォントサイズがとても大きく入れたい文字が全て表示されなくなってしまいます。
titleのフォントサイズを変更することは可能でしょうか?
2010/04/11(日) 03:27 | URL
Re: simpleviewerカスタマイズ / LOSTMAN@管理人 #-
>と さん
ありがとうございます。
バックミュージックを付ける場合
Simpleviewer自体にではなく
Simpleviewerを表示させているHTMLの中に
埋め込む形になります。

ウェブページにBGMを埋め込む手段は色々ありますので
検索して自分に合った方法を見つけて頂くのが
一番良いかと思います!
2010/04/09(金) 22:30 | URL
simpleviewerカスタマイズ / #-
失礼いたします。
いつも参考にさせて頂いております。

バックミュージックなどはつけれないんでしょうか?
2010/04/08(木) 02:20 | URL
/ mi #HshMhk12
自分もいろいろ試したのですが、やはりだめですよね。
ありがとうございました。
2010/04/02(金) 13:19 | URL
Re: サムネイルの枠について / LOSTMAN@管理人 #yM49gNbs
miさん初めまして。
LOSTMANです。

どうやらサムネイルの枠は無くすことができないようですね。
gallery.xmlの
frameColor="写真フレームの色"
はメイン写真フレーム色、サムネイルのフレーム色、矢印の色を一括で変えるようになっていますが、
frameWidth="写真フレームの幅"
はメイン写真フレーム幅しか変えてくれません。

おそらく、「どの写真を選んでいるのか分かるように」対処しているのではないかと思われます。今のところframeColor="写真フレームの色"で自分の好きな配色にして、気にしないでおくことが唯一の対処法ではないか、と思います。
2010/04/01(木) 23:57 | URL
サムネイルの枠について / mi #HshMhk12
参考にさしていただきました。
サムネイルの枠ですが、なくすことはできませんか?
色を変えると、下の矢印も一緒に変わってしまうので難儀してます。
アドバイスお願いします。
2010/04/01(木) 17:24 | URL
Re: Simple Viewerは・・・ / LOSTMAN@管理人 #-
>fatboy様
質問ありがとうございます!(回答少々遅れてしまいました!)
これはちょっと変則的なカスタマイズですが、出来ないことはないです。

■index.html 内のソース
└flashvars.galleryURL = "gallery.xml";
という部分の読み込みXMLファイルを変えることで増設可能です。

例えば…
gallery001.html + gallery001.xml
gallery002.html + gallery002.xml
gallery003.html + gallery003.xml
・・・
とやっていけば、あとはそれぞれのHTMLにリンクを貼っていくだけで複数ジャンルのギャラリーを持つことが可能です。
その際にもちろんgallery001.xmlやgallery002.xmlの中身をそれぞれ適切な画像を読み込む形に設定しなければなりません。画像ディレクトリは一緒のものを使っても、それぞれのギャラリー用に分けても問題ありません。自分のやりやすい方でOKです!
2010/03/27(土) 21:51 | URL
Simple Viewerは・・・ / fatboy #-
参考にさしていただきました。
疑問なんですがこちらはフォルダーをわけて表示することはできないのですかね・・・?
例えば動物園の写真フォルダー(クリック)→動物園の写真
みたいな感じで。
そしたら色々なイベントごとにわけれると思ったのですが、そこまではできないのですかね・・・?
2010/03/12(金) 17:52 | URL
コメント投稿
URL:
コメント:
PASS:
秘密: 管理人のみに公開
 

プロフィール

管理人:LOSTMAN
東京でWebディレクターをやっています。独学で楽しみながら興味のあることを投稿していきます。

タグキーワード

関連サイト

HTML講座
CSS講座
SEO講座
無料素材・画像
HOME
[ FC2 ID ]
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。