先日の記事でお示しした、表示ファイル（html）に名前を付けてＵＰすると、テンプレートや記事にスクリプトを書かなくても 「スライドショー」 が実現できるという方法。
当初は結構イケル方法だと思ったものですが、テンプレートに関数（スクリプト）を書く方法も一度設置してしまえば記事中に書くタグはずっと（改訂後は更に）短くできますから、かなり分が悪い感じもします。 テンプレ替えても表示可能 という絶対的メリットはあります
「アイデア自体は良いと思うんだけどなあ・・」
"テキスト表示機能" なども付加できたら便利でしょうが、 （・e・） な私には荷が重過ぎるかも・・・
などと考える事暫し。 結構よさげ？な応用方法を思い付きました。
vanishing point
今回も 「画像一枚分のスペースで複数の画像を表示（参照）する」 というテーマは同じですが、形式がかなり異なります。 画像を表示する領域を分割して、サムネイル化したサンプルを並べ、任意の画像を選択できるようにする、というもの。
全画像が一覧可能となりますので「カタログ化」と銘打った次第です。
サムネイルは画像の原寸を ｎ×ｎ 等分して表示されます（縦横比が保たれる）
利用方法は 「スライドショー」と変わりません。 （必要なのはファイル名操作のみです ）
スクリプトを書く必要はありません。 (テンプレートを変更しても 記事中にそのまま表示されます）
【 方 法 】 以下のソースをメモ帳等のエディタにコピーし、適当な名前の HTMLファイルとしてＰＣにセーブして下さい 例） catalogue.html
<head>
<style type="text/css">
body {margin:0; padding:0;}
#list img {margin:1px}
</style>
<script type="text/javascript"><!--
n=1; mx=2; U=""+self.frames.location;
p=(U.slice((U.lastIndexOf("/")+1),-5)).split("-");
fn=p[0]; pn=eval(p[1]); if (pn>25) {pn=25}
for (i=2;i<5;i++) {if (pn>i*i) mx=i+1;}
function del(n) {document.getElementById(n).style.display="none"}
function shw(n) {document.getElementById(n).style.display="block"}
function chg(n) {del('p'+n);shw('list')}
function sel(n) {del('list');shw('p'+n)}
//--></script>
</head>
<body>
<div align="center">
<script type="text/javascript"><!--
w=Math.floor(document.body.clientWidth/mx)-2;
h=Math.floor(document.body.clientHeight/mx)-2;
if (h<1) {h=Math.floor(innerHeight/mx)-2}
for (i=1;i<=pn;i++) {
t='<img src="'+fn+'-'+i+'.jpg" id="p'+i+'" onClick="chg('+i+')">';
document.write(t); del("p"+i);
}
document.write('<div id="list">');
for (i=1;i<=pn;i++) {
t='<img src="'+fn+'-'+i+'.jpg" width="'+w+'" height="'+h+'" onClick="sel('+i+')">';
document.write(t);
}
document.write('</div>');
--></script>
</div>
</body>
以下、お馴染みの例を挙げて説明します
○ 愛犬の写真（jpg）がＮ枚あり、これを切り替えて表示したい場合、
○ テーマ（グループ名）を決めます （半角英数字にして下さい） 例） dog
○ Ｎ枚の画像を dog-1.jpg dog-2.jpg 〜dog-N.jpg の名前でアップします
○ catalogue.html をアップし dog-N.html という名前に変更します
（ ”dogというシリーズがＮ枚” の意 ）
○ 記事中の画像表示部に以下のタグを書きます
<iframe src="./file/dog-N.html" width="X" height="Y" frameborder="0" scrolling="no"></iframe>
X 画像の横幅 （例：300 ）
Y 画像の高さ IFRAME のサイズは画像サイズと同じにして下さい。（サムネイルの縦横比を正しく保つ為）
【 解 説 】 ＵＰされリネームされた htmlファイルは IFRAME内に表示されると 自分の名前から表示すべき画像ファイルの「グループ名」と「枚数」を知り、枚数から画面を何等分にするか（べき乗が枚数以上となる最小整数）を計算します。
何等分にするか決めると取得した画面サイズからサムネイルのサイズを計算します。
（ サムネイルは原画を縮小表示しますので画像UP時に作成する必要はありません ）
画像枚数は ４、９、１６等べき乗の数ぴったりでなくても構いません。
画像サイズは統一されている方がbetterですが、異なっていても構いません。
サムネイルは同一サイズで、原画は小さければセンタリングされ、大きければフレームで右側と下側がクリップされて表示されます。
★「スライドショー」と異なりblog表示時に全ての画像が読み込まれます。
サイズの大きい画像を多数設定すると表示が重くなる可能性があります。
（ 今回のソースでは最大分割数は２５（5X5）までが上限となっています ）＞
5 X 5 SAMPLE スライドショーが”シーケンシャルアクセス”ならば こちらは”ランダムアクセス”とでも云った所でしょうか。 どちらがイイとかいうものでもありませんが、「ストーリー性」や「期待感」を与えたい場合は前者が、 「選択性」に重きを置く場合は後者が適していると思われます。
Comment
★
Michiyo
Michiyo
Edit
05/14 18:32 |
参考にさせて頂きました。 ありがとうございました。
参考と云うよりは、コピペさせて頂きました。
写真を沢山使うのでとっても便利で、これからも
ありがたく使わせて頂きます。
|
★
daniel
daniel
Edit
05/15 11:14 |
お役に立てたようで何よりです。
私的には こっち系をパワーアップしたいと思ってるのですが
写真撮ってる暇があまりありません・・
|
★
Michiyo
Michiyo
Edit
05/16 06:30 |
おはようございます 一つ質問なんですが…
横長の写真がほとんどなんですけど、横3枚で並んで表示されるため
画像サイズを小さく設定することになります、大きくするとエントリースペースから
はみ出しちゃうんですよo(;・。・;)o出来れば、
横2枚で以下に続くように出来ないでしょうか？！
|
★
daniel
daniel
Edit
05/16 13:35 |
この方法はあくまでも 「画像（写真）一枚分」 のスペースを等分割してカタログ化する というものです。
（それによりにサムネイルの縦横比が自動算出可能な訳です）
３カラムのように 記事領域が狭いテンプレートでは、「元画像」のサイズも小さくせざるを得ませんから、サムネイルのサイズがさらに小さくなるのは必定と言えます。
（ 余裕ができましたら仰せのような方法にも取り組んでみます ）
|
★
Michiyo
Michiyo
Edit
05/18 16:15 |
なるほど…！
納得しました(^^ゞ 3カラムのエントリスペースを
もう少し幅を広げたかったんですけど
Michiyoには無理でした┐('〜`;)┌
もう１つ○xciteblogではスキン編集って云うんですけど
以外と簡単に出来るんですよ、FC2blogは難しいです〜！！
|
★
toshi
toshi
Edit
06/05 08:57 |
comment
ブログ初心者です。参考にさせて頂いているのですが、どこかおかしいようです。どの様に説明すれば良いのか.....。ご指導お願い致します。
作成手順
�．瓮眥△�mim-n.htmlとしてソースを保存（Ｄドライブ：ホルダーなし）
�◆岫 廚鬟侫．ぅ襯▲奪廛蹇璽匹房茲蟾�み
��mim-1.jpg・mim-2.jpeg・mim-3.jpgをファイルアップロードに取り込み
�ぁ岫◆廚鮨卦�エントリー画面に投稿
以下のようになっています。
この状態でmim-1.jpeg１枚しか表示されず、根本的に何処か違うようです。
ご指導頂けませんか？宜しくお願いいたします。
＜新規エントリーに投稿した状態＞
<a href="http://blog11.fc2.com/m/miyabikurosaki/file/mim-n.html" target="_blank"></a>
<iframe src="./file/mim-n.html" width="242" height="368" frameborder="0" scrolling="no"></iframe>
|
★
daniel
daniel
Edit
06/05 13:11 |
御確認を 記事にも書いてありますが この場合ですと
mim-3.html としてアップされて下さい
（ ”グループ名”＋"-"＋"枚数"＋".html" ）
|
★
toshi
toshi
Edit
06/05 21:50 |
comment
有難うございました。もう少し勉強が必要ですが、表示されました。大変重宝しそうなので使わせて頂きます、時々遊びに来て下さいませ。
|
★
daniel
daniel
Edit
06/05 22:38 |
おお 表示されましたか。 されたようですね。 （安堵）
・・・ブラウザとかの環境によってダメなのかも、などと 心配してました。
いや、自分で作ったものながら これは結構 ・ ・ ・
もうちょっとレベル上げてさらに強力？ なのを開発したいです。
|
★
toshi
toshi
Edit
06/05 22:38 |
comment
ご指導有難う御座いました。ブログにup出来ました。が、携帯ＴＥＬから画像は見れないのでしょうか？やはり１枚１枚upするしか無いでしょうか.....。ご面倒おかけ致します。
|
★
daniel
daniel
Edit
06/05 23:08 |
うーん 携帯ではスクリプトは動きませんしＩＦＲＡＭＥも表示されません。
また、この方法は頁を「重く」しますから どちらかといいますと
「個別表示モード」（”記事の続き”） での使用が望ましいと言えます。
携帯用には 前文に imgタグを用いるのが良いでしょう。
|
★
toshi
toshi
Edit
06/05 23:18 |
またまた感謝！ comment
有難う御座います、修行致します。
|
|
TrackBack http://pcafe.blog3.fc2.com/tb.php/76-6d7842ae
Shown after Admisson
幸太郎・Dog Knit Wears *
またまた、FCafeさんのところからお借りしました。FCafe画像カタログ化「画像一枚分のスペースで複数の画像を表示（参照）する」というテーマは同じですが、形式がかなり異なります。 画像を表示する領域を分割して、サムネイル化したサンプルを並べ、任意の画像を選択で�
|
| . |