FCafe  画像カタログ化

  先日の記事でお示しした、表示ファイル(html)に名前を付けてUPすると、テンプレートや記事にスクリプトを書かなくても 「スライドショー」 が実現できるという方法。
  当初は結構イケル方法だと思ったものですが、テンプレートに関数(スクリプト)を書く方法も一度設置してしまえば記事中に書くタグはずっと(改訂後は更に)短くできますから、かなり分が悪い感じもします。 テンプレ替えても表示可能 という絶対的メリットはあります

「アイデア自体は良いと思うんだけどなあ・・」
"テキスト表示機能" なども付加できたら便利でしょうが、 (・e・) な私には荷が重過ぎるかも・・・
などと考える事暫し。  結構よさげ?な応用方法を思い付きました。



vanishing point

  今回も 「画像一枚分のスペースで複数の画像を表示(参照)する」 というテーマは同じですが、形式がかなり異なります。  画像を表示する領域を分割して、サムネイル化したサンプルを並べ、任意の画像を選択できるようにする、というもの。
全画像が一覧可能となりますので「カタログ化」と銘打った次第です。

 サムネイルは画像の原寸を n×n 等分して表示されます(縦横比が保たれる)
利用方法は 「スライドショー」と変わりません。  (必要なのはファイル名操作のみです )
スクリプトを書く必要はありません。 (テンプレートを変更しても 記事中にそのまま表示されます)


 【 方 法 】 以下のソースをメモ帳等のエディタにコピーし、適当な名前の HTMLファイルとしてPCにセーブして下さい 例) 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)がN枚あり、これを切り替えて表示したい場合、
 ○ テーマ(グループ名)を決めます (半角英数字にして下さい)  例) dog
 ○ N枚の画像を dog-1.jpg dog-2.jpg ~dog-N.jpg の名前でアップします
 ○ catalogue.html をアップし dog-N.html という名前に変更します
   ( ”dogというシリーズがN枚” の意 )
 ○ 記事中の画像表示部に以下のタグを書きます
<iframe src="./file/dog-N.html" width="X" height="Y" frameborder="0" scrolling="no"></iframe>
  X 画像の横幅 (例:300 )
  Y 画像の高さ


IFRAME のサイズは画像サイズと同じにして下さい。(サムネイルの縦横比を正しく保つ為)


 【 解 説 】 UPされリネームされた htmlファイルは IFRAME内に表示されると 自分の名前から表示すべき画像ファイルの「グループ名」と「枚数」を知り、枚数から画面を何等分にするか(べき乗が枚数以上となる最小整数)を計算します。
 何等分にするか決めると取得した画面サイズからサムネイルのサイズを計算します。
( サムネイルは原画を縮小表示しますので画像UP時に作成する必要はありません )
画像枚数は 4、9、16等べき乗の数ぴったりでなくても構いません。
画像サイズは統一されている方がbetterですが、異なっていても構いません。
サムネイルは同一サイズで、原画は小さければセンタリングされ、大きければフレームで右側と下側がクリップされて表示されます。
★「スライドショー」と異なりblog表示時に全ての画像が読み込まれます。
サイズの大きい画像を多数設定すると表示が重くなる可能性があります。
( 今回のソースでは最大分割数は25(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

この方法はあくまでも 「画像(写真)一枚分」 のスペースを等分割してカタログ化する というものです。 
(それによりにサムネイルの縦横比が自動算出可能な訳です)
3カラムのように 記事領域が狭いテンプレートでは、「元画像」のサイズも小さくせざるを得ませんから、サムネイルのサイズがさらに小さくなるのは必定と言えます。
( 余裕ができましたら仰せのような方法にも取り組んでみます )

Michiyo Michiyo Edit
05/18 16:15

なるほど…!
納得しました(^^ゞ 3カラムのエントリスペースを
もう少し幅を広げたかったんですけど
Michiyoには無理でした┐('~`;)┌
もう1つ○xciteblogではスキン編集って云うんですけど
以外と簡単に出来るんですよ、FC2blogは難しいです~!!

- - Edit
06/05 08:57

承認待ちコメント このコメントは管理者の承認待ちです

daniel daniel Edit
06/05 13:11

御確認を  記事にも書いてありますが この場合ですと
mim-3.html   としてアップされて下さい
( ”グループ名”+"-"+"枚数"+".html" )

- - Edit
06/05 21:50

承認待ちコメント このコメントは管理者の承認待ちです

daniel daniel Edit
06/05 22:38

おお 表示されましたか。 されたようですね。 (安堵)
・・・ブラウザとかの環境によってダメなのかも、などと 心配してました。
いや、自分で作ったものながら これは結構 ・ ・ ・
もうちょっとレベル上げてさらに強力? なのを開発したいです。

- - Edit
06/05 22:38

承認待ちコメント このコメントは管理者の承認待ちです

daniel daniel Edit
06/05 23:08

うーん 携帯ではスクリプトは動きませんしIFRAMEも表示されません。
また、この方法は頁を「重く」しますから どちらかといいますと
「個別表示モード」(”記事の続き”) での使用が望ましいと言えます。
携帯用には 前文に imgタグを用いるのが良いでしょう。

- - Edit
06/05 23:18

承認待ちコメント このコメントは管理者の承認待ちです


.  
HN Title URL PW secret

TrackBack http://pcafe.blog3.fc2.com/tb.php/76-6d7842ae

Shown after Admisson
幸太郎・Dog Knit Wears *
またまた、FCafeさんのところからお借りしました。FCafe画像カタログ化「画像一枚分のスペースで複数の画像を表示(参照)する」というテーマは同じですが、形式がかなり異なります。  画像を表示する領域を分割して、サムネイル化したサンプルを並べ、任意の画像を選択で
.

≫ 「足跡」 機能 条件限定でリスト化 ≪

2005 / 03 / 04  Fri
Entry   
Comment 12 / TB 1 / Edit
Designed by Daniel Corporation . all rights renounced