FCafe  スライドショー 2

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

  苦節○ヶ月、やっと壁紙が変えられるようになったへたれ管理人です。
( これで 「素材屋さん」 の仲間入りも出来るかも? )
さて、1箇所分のスペースで複数の画像を表示(参照)できるようになりました。
前の記事にアップロード時のネーミングのみでそれを実現する方法を述べましたが、
記事中に書く IFRAME タグが長めに感じられるきらいがなきにしもあらずでした。
( テンプレートを変更しても画像はそのまま見られる、 という利点はありますが )

「投稿時の記述(手間)」 をもっと簡潔にできないものか、と別の方法も考えてみました。


 

現在(2006/01) verUP しております 


 
  
  
( スライドショー用の共通関数 作れば記事中のスクリプトは短くできるんじゃ?)
id 指定とか、グローバル変数(もう何個使ってたっけ)とかはなるべく使わないで・・・
そう考えてアレコレ試してみていたら、何とか実用になりそうなのが出来ました。
画像タグ中にイベントハンドラを組み込む方法です。 (totalでは前記事より短い?)


 【 設置法 】 まず head 領域に以下のスクリプトを書きます。
<script type="text/javascript"><!--
function chg(U,i) {
var p=U.split("-"); var p2=p[1].split("."); var n=eval(p2[0]);
n++; if (n>i) {n=1}
U=p[0]+"-"+n+"."+p2[1]; return U;
}
--></script>
グローバル変数を省略しました  .

 【 使用法 】 前記事の例を用いて説明します

 ○ 愛犬の写真(jpg)が3枚あり、これを切り替えて表示したい場合、
 ○ テーマ(グループ名)を決めます (半角英数字にして下さい)  例) dog
 ○ 3枚の画像を dog-1.jpg dog-2.jpg dog-3.jpg の名前でアップします
 ○ 記事中の画像表示部に以下のタグを書きます
<img src="./file/dog-1.jpg" onClick="this.src=chg(this.src,3)">

・・・以上です。 ( alt オプション等は各自設定されて下さい)


前記事の方法と異なり画像表示に img タグを用います。  タグ中の一行スクリプトで投稿毎に変えるのは 数字部分だけです。 つまり、
 <img src="最初の画像名" onClick="this.src=chg(this.src,枚数)">

・・とする訳です。


 【 解 説 】 クリック(等)で呼ばれたスクリプト(関数) chg() は画像のファイル名と自分に与えられた引数から次に表示すべき画像ファイルを知り、表示されている画像の src と交換します。
今回の方法の特徴は、以下の通りです

  ○ 画像形式を問わない( gif、 png 画像も可。 但し一連の画像は同形式であること)
  ○ 頁内・記事内複数箇所で使用可能 ( これは前記事の方法も同じ)
  ○ グループ毎に class 、 id 、 alt ( title ) オプション等を変更可能
  ○ イベントハンドラを onMouseOver 等とする事で他のユーティリティと併用可能?

★ onMouseOver に変更した例

Comment

さいもん さいもん Edit
03/01 18:40

こんばんわ さっそくいただきました、ありがとうございます。
お客さんより自分が画像換えて喜んでる節が多分にありますが。
ところで、画像ごとにaltの内容も変えることは可能なんでしょうか?

daniel daniel Edit
03/01 19:41

イタイ所を・・ ( そう来ましたか )  こんばんは
写真毎に「解説」みたいなのを表示したい、 てのは当然ありますよね。
  うーん 。 
前記事の方法でグループ管理ファイル(html)に埋め込めば何とか・・・
とは思ってるんですが。 (グループ名指定だけじゃ勿体無いし)

txtファイルも名前付けてUP可能になってますからそれ絡みで、
とかの方法もあるかも知れませんが、かなりの高等処理になるかと。
(ネタが尽きないのでじっくり系統的な勉強がデキナイのが悩みです)
ま、全ては 「確定申告が済んでから」 てことで。

この方法はクリックされるまで「次」の画像を読み出さないので頁表示自体は重くなりませんが、クリックし始めると次々にFC2の鯖から画像を読み出すのでちびっとデンジャラスかも知れません。
( アレンジ面での掲載枚数のタガも外れてしまうワケですから )
・・・全く「自由」とは諸刃の剣であります。

まあ、It's not our job て感じで カッチョイイ写真ガンガン見せて下さい!

さいもん さいもん Edit
03/01 20:00

これができると
本文なし、画像のみ紙芝居的原稿も可能になりますね。
アプローチとしては邪道かもしれませんが、
たまに見せ方を変える、というのも必要なことだと思います。
画像次第では、かなりおもしろいものもできるのかな…と。

daniel daniel Edit
03/01 20:25

イイのか?   ・・良いんじゃないですか。
「一行コメント」 みたいなものなら前述の方法で可能だと思いますが、
長文の解説であれば画像ファイルと同じ名前のtxtファイル作って・・
て手も当然あると思います。  (勉強が必要ですが)
そうなってくるともう、blogなんだかホムペなんだか・・て感じですが。

FC2は「個人使用」も可能ですから、「これで○○○"○出来るじゃん!」
て人もいるかもしれません  ( 誰? )

さいもん さいもん Edit
03/02 08:19

おはようございます これはJUGEMでも応用できるんでしょうか…
単純に画像名を/?image=xxxxに変更しただけじゃだめですよね。
最近画像データベースが軽いようなんでやってみたくなります。
あれが片付いた後お時間がとれた時にでも教えていただけると嬉しいです。

daniel daniel Edit
03/02 09:04

久し振りに JUGEMに上げるネタが !?
可能だと思います。 (てか、これってJPVそのものですわね)


.  
HN Title URL PW secret

TrackBack http://pcafe.blog3.fc2.com/tb.php/73-502584f9

Shown after Admisson
.

≫ 掲示板に思う スライドショー ≪

2005 / 02 / 28  Mon
Entry   
Comment 6 / TB 0 / Edit
Designed by Daniel Corporation . all rights renounced
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。