FCafe  スライドショー 改

  昨年の記事を読み返しておりましたら、ver UP 可能なアイテムがある事に気付きました。
個人的には一番の「お気に入り」であるにも拘わらず自身では使用していない画像表示方法についての記事です。 順次表示形式・選択表示形式の二タイプを御紹介済みでしたが、双方でIFRAMEを用いる方法について別法を試みました処、実用に供し得ると判断し発表させて頂くことにしました。
  まずは順次(シ-ケンシャル)表示タイプについて。
これに関してはスライドショースライドショー2の二通りの方法をお示しした訳ですがIFRAMEを用いる前者の方法には「テンプレートに依存しない」というメリットがある一方で、画像群毎にIFRAME用ファイルをリネームしてアップロードする必要がありました。 これが不要になります。

.

【 使用法 】 以下のソースをメモ帳などのエディタにコピペして適当な名前(例: photo.html )のHTMLファイルとしてPCにセーブし, FC2blogにアップロードしておきます

<html><head>
<style type="text/css">
body { height:100%; background-position:center; background-repeat:no-repeat }
</style>
<script type="text/javascript">
n=0; p=location.hash.split('-');
fn=p[0].split('#')[1]; pn=p[1];
function Change() {
n++; if (n>pn) { n=1; }
document.body.style.backgroundImage="url("+fn+"-"+n+".jpg)";
}
</script>
</head>
<body onload="Change()" onClick="Change()">
<noscript> You Need Script </noscript>
</body></html>


 ○ 愛犬の写真(jpg)が3枚あり、これを切り替えて表示したい場合、
 ○ テーマ(グループ名)を決めます (半角英数字にして下さい)  例) dog
 ○ 3枚の画像を dog-1.jpg  dog-2.jpg  dog-3.jpg  の名前でアップします
   ( 1 からの続き番号にして下さい。 名前と番号は半角マイナス記号で繋げます )
 ○ 記事中の画像表示部に以下のようにインラインフレームのタグを書きます

<iframe src="./file/photo.html#dog-3" width="X" height="Y" frameborder="0" scrolling="no"></iframe>

  dog 画像のグループ名
  3   画像枚数
  X  (最も大きい)画像の横幅 (例:300 )
  Y  (最も大きい)画像の高さ

 

【 解 説 】  オリジナルの記事ではファイル名自体によって表示する画像(群)の名前や枚数を判定させていましたが、今回の方法は location.hash (#以下の文字列)を用いています。
( 窓用のファイルをアップロードする手間が省けるのみならず 容量の節約にもなります )
 .
その他の点についてはオリジナルの方法とほぼ同様です ( jpgファイルのみ対応 )
*御注意: シリーズ名自体にマイナス記号を使わないで下さい

Comment

Edit
01/07 01:14

あけましておめでとうございます、danielさん。 i-259i-1

やっとこ私も共有プラグインを拝むことができました。
「ニーズに応えてニッチを埋める」ダークサイダーズのお二人に驚嘆することしきりです。

このスライドショーも、コンパクトに写真を展示できて便利ですよね。
うちの記事の方でプラグイン化できないのかなと書きましたが…これはちょっと難しいですか。すみません(汗)

daniel daniel Edit
01/07 01:53

おめでとうございます 洵さん。
うぅ まぁ 「年頭の挨拶」終わり近くにちょびっと関連事項が・・
結局 スクリプトで動く(スクリプトが無いと動かない)モノですんで、
「実ファイル呼び出し」(猛獣使役)でなく、
「全て空窓へ書き出し」(幻獣召還)でもいいのかな、とか。
( いや、「テンプレ(plugin)化」するなら "スライドショー2" の方が? )


.  
HN Title URL PW secret

TrackBack http://pcafe.blog3.fc2.com/tb.php/280-4c75c8b8

Shown after Admisson
ウェビンブログ *
テンプレ屋の間で年末ずっと噂になっていた、「共有プラグイン機能」の一般公開がはじまりました。スクリプト職人さんが作った便利なブログパーツを気軽に突っ込める、しかも個人用
.

≫ SlideShow plugin 新年を迎えて ≪

2006 / 01 / 06  Fri
Entry   
Comment 2 / TB 1 / Edit
Designed by Daniel Corporation . all rights renounced