スポンサーサイト 
-- -- --
-- --:--:--

スポンサー広告  Comment -  Trackback -  edit.

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

スライドショースクリプト 
2006 03 01
Wed 22:11:00

カスタマイズ  Comment 6  Trackback 0  edit.

今回のスライドショースクリプト使いながら何となく気が付いた事が一つ。
実は、このスクリプト、ID名を変更する事でその背景画像を変更出来る事が判りました。
実際にヘッダーのID名に変更して見た所、ちゃんと変更出来るんですな?これが。(^^;
かなり軽量化しましたのでスクリプトだけでも載っけておこうかと。

以下を参考に。

<!-- スライドショースクリプト -->
<SCRIPT language="JavaScript">
<!--
photo = new Array();
var pn = 0;

//**************書き換える部分***************

photo[pn++] = "./show01.gif";
photo[pn++] = "./show02.gif";
photo[pn++] = "./show03.gif";
photo[pn++] = "./show04.gif";
photo[pn++] = "./show05.gif";

//**************書き換える部分***************

var n = photo.length;
var bango = 0;
function main(){fr = 0;hyouji();}
function tugi(){bango++;main();}
function mae(){bango--;main();}
function hyouji(){
if(bango==-1){bango=n-1;}
if(bango==n){bango=0;}
document.getElementById("header").style.backgroundImage="url("+photo[bango]+")";
}
//-->
</SCRIPT>


上がスクリプト本体ですが、ここで青文字のheaderを背景画像を変更したいID名に変更する訳です。

下のタグは、このスクリプトをページ表示と一緒に読み込む為の設定です。

</head>
<body onload="main();">
<div id="header">


ここではヘッダー画像がスクリプト本体内で書き換える部分にある画像のアドレスを好きな画像のアドレスに変更する事で順番に画像が変更されます。
(画像の枚数に合わせて追加出来ますし画像のアドレスに制限は有りません。まぁ?サイズ的なものは統一した方が無難でしょう。)

<a href="#" OnClick="mae()" title="前の写真を表示">←PRE</a>
<a href="#" OnClick="tugi()" title="次の写真を表示">NEXT→</a>


上のリンクが画像を変更する為のボタンの役目をしています。

これだけで好きな場所の背景画像が変更出来る。(背景画像なので文字などをそのエリアに書いて置く事も出来ますね。)

他の形としては、表示するエリアにスクリプトを貼り付けて使う方法も有ります。

<div id="top_img">
<!-- スライドショー画像表示部分 -->

<script language="javascript">
<!--
photo = new Array();
var i=0,pn=0;

//**************書き換える部分***************

photo[pn++] = "./show00.gif";
photo[pn++] = "./show01.gif";
photo[pn++] = "./show02.gif";
photo[pn++] = "./show03.gif";
photo[pn++] = "./show04.gif";
photo[pn++] = "./show05.gif";

//**************書き換える部分***************

hyouji();
var n=photo.length;
function tugi(){
if(i<n-1){i++;hyouji();}else{i=0;hyouji();}
}
function mae(){
if(i>1){i--;hyouji();}else{i=n-1;hyouji();}
}
function hyouji(){
document.getElementById("top_img").style.backgroundImage="url("+photo[i]+")";
}
//-->
</script>
</div>


この場合は、<body onload="main();">と言う設定は要らず、表示したい場所に直接貼り付ける方法でスライドショーが使えますね。
時々、onload="main();"の設定を忘れたり、必要のないページで読み込みエラーを起こす事も無く無難な方法では無いかと思います。
勿論、このスクリプトもID名を変更する事で、好きなID名の背景画像を変更する事が出来る訳です。

まぁ?こんな簡単なスクリプトに成ってしまいましたが、元々は自動始めに戻るとか最後の画像とか色々付いてましたが、要らないので削除した訳です。(作者さん御免なさい。)

今回、使用するスライドショースクリプトは、当初上のものを使う予定でしたが、無難な下の方を使用してテンプレートに搭載する事にしました。

原作スクリプトはこちらでどうぞ。(他にも色々あります)
JavaScriptでスライドショーを作る

ジャンル [ ブログ テーマ [ カスタマイズ ]

Re comments.

「(□。□-) フムフム」
なんとなく このあたりのことは
理解できそうですv-221
しかし 来るたびに 凄い発展!
公開が 凄く待ち遠しいですv-411
読んでるだけでも お勉強になりますよv-353
結構好きなのです javaで遊ぶことv-344
公開されたら 頑張ってお借りして設定にお絵描きに挑戦しようっとv-411
でもなぁ~お絵描きは なんちゅっても
落書きしか描けないけど
最近 落書きにはまってるんで(笑)
がんばってみようかと 考え中
o(*^▽^*)oあはっ♪
2006/03/02(木) 18:10:53 [URL] ちひなさん [編集]
「スクリプト関連は良いのですがw」
ちひなさんこんばんは。
実はこのテンプレートのスタイルシートで設定している画像関連は全部で73項目有ります(自爆)
まぁ~5色分有るので、一色だけを使うとして29程度でしょうか。
それでも基本を変えずに使うとしても20個ほど画像が必要に成ります(自爆)

メニューと記事タイトル部分、ヘッダー、スライドショーの画像だけなら10~12枚くらいかな?
と言う事で大変かと思いますが(笑)

ちなみに完成までには、リンゴ画像の変更と、ヘッダー画像、記事背景画像、メニュー下のワンポイント画像とゴールはまだまだです(ToT)
それと今考えているのは、開閉式メニューでちひなさんの様にフォルダー画像を使って、開いた時と閉じた時の画像変更が出来ないかな?とスクリプトの見直し中です。

って、90%所の完成じゃないですね、これじゃヽ(´Д`;)ノ
2006/03/02(木) 23:32:06 [URL] 有希之武さん [編集]
「スライドショーがうまくいきません(T_T)」
はじめましてm(_ _)m

うさと申します。
以前はココログで作っていましたが、先日FC2を見つけて楽しめそうだなと始めました。

今朝【3cca-s_change】をお借りしてブログに使っているのですが、どうがんばってもスライドショーの【次】のボタンが反応しないんです。
6枚写真を設定しても1枚だけでて【前】のボタンを押すと、元々のテンプレートの画像になってしまいます。

今朝(12日)ダウンロードしたので上記の【表示するエリアにスクリプトを貼り付けて使う方法】でやってみました。
ファイルの書き換えは、読み込みの部分を書き換えて、あとスライドショー表示の部分に一番下のタグを貼り付けたらいいののでしょうか。
(貼り付ける必要はないのか・・がよくわからないんです。(;^_^A  )

でもどれでやっても、【次】のボタンが反応しないので、何が悪いのかご指示いただければ嬉しいです。
ちひなさんのところを拝見させていただいたら、ちゃんとスライドしてたのでやはり私の何かが悪いのですが。

お手すきの時で結構ですのでよろしくお願いいたします。m(_ _)m
2006/03/12(日) 17:16:55 [URL] うささん [編集]
「うささんへ」
どうもはじめまして。
え~と、ブログを拝見してソースを見てみましたが設定自体は問題無いように思えるのですが、どうやらスライドショースクリプトと、ハートが画面上を動くスクリプトとの相性が悪いようです。
同じ変数が使われて居るみたいですね。
ハートの方を削除して試験してみたらスライドショーの方は動きました。

スライドショースクリプトの方で別の変数名にしてみたりしたのですが、スクリプトを完全にマスターしている訳じゃ無いので、これで大丈夫と言う保証は有りません。

変数を変えたバージョンのHTML用ファイルを作ってみましたのでファイルを保存して内容を入れ替えて使ってみて下さい。
http://blog8.fc2.com/b/breaktime/file/3cca-s_change02-html.txt

くれぐれもクリックでは無く、リンク部分で右クリック「対象をファイルに保存」で一度保存してからメモ帳などで開き、コピーペーストしてお使い下さい。

一番良いのはどちらかを外す方法かと思います。

又は、テンプレートに付いているスライドショースクリプトをこの記事のバージョンに変更するかです。

変更方法は</head>前に有るスライドショースクリプトを以下のものに変更します。
<!-- スライドショースクリプト -->
<SCRIPT language="JavaScript">
<!--
photo = new Array();
var pn = 0;

//**************書き換える部分***************

photo[pn++] = "http://blog56.fc2.com/j/jaeheelover/file/jslide_00.jpg";
photo[pn++] = "http://blog56.fc2.com/j/jaeheelover/file/jslide_01.jpg";
photo[pn++] = "http://blog56.fc2.com/j/jaeheelover/file/jslide_02.jpg";
photo[pn++] = "http://blog56.fc2.com/j/jaeheelover/file/jslide_03.jpg";
photo[pn++] = "http://blog56.fc2.com/j/jaeheelover/file/jslide_04.jpg";
photo[pn++] = "http://blog56.fc2.com/j/jaeheelover/file/jslide_05.jpg";
photo[pn++] = "http://blog56.fc2.com/j/jaeheelover/file/jslide_06.jpg";

//**************書き換える部分***************

var n = photo.length;
var bango = 0;
function main(){fr = 0;hyouji();}
function tugi(){bango++;main();}
function mae(){bango--;main();}
function hyouji(){
if(bango==-1){bango=n-1;}
if(bango==n){bango=0;}
document.getElementById("top_img").style.backgroundImage="url("+photo[bango]+")";
}
//-->
</SCRIPT>

次に、<DIV id=top_img> に書かれているスクリプト部分を削除して下さい。

<!-- スライドショー画像表示部分 -->

<script language="javascript">
<!--
hyouji();
var n=photo.length;
function tugi(){
if(i<n-1){i++;hyouji();}else{i=0;hyouji();}
}
function mae(){
if(i>1){i--;hyouji();}else{i=n-1;hyouji();}
}
function hyouji(){
document.getElementById("top_img").style.backgroundImage="url("+photo[i]+")";
}
//-->
</script>

(赤文字の部分を全て削除)

後は、
<!-- トップページでの色設定 -->
<!--index_area-->
<body id="gray" onload="main();">
<!--/index_area-->
と言う様に青文字部分の onload="main();"を追加します。
これで大丈夫だと思います。
2006/03/13(月) 00:36:38 [URL] 有希之武さん [編集]
「感謝!感謝です~!」
有希之武様♪

早々のご指示ありがとうございました。(*^^*)

やはりあのハートが悪かったのですね・・
私も、3時間くらいこちらとリンク先の原作スクリプトをにらめっこして悩んだ挙句これが怪しいとは思ったのですが。(笑)
でも素人の私には、何が正しいかわからず、お忙しい中おすがりした次第です。

教えていただいた2通りとも試してみました。
両方どちらでもスライドショーは完璧でした。v-218
ただ最初からそうだったのですが、あのハートが右サイドのライン外を通った時に影の部分が崩れてラインが乱れていたので、
おっしゃるように最終的にハートを削除しました。
だって私にはハートよりこのテンプレートの方が大切ですから。v-238

色々とお手数をおかけしましたが、これで楽しいブログ生活が続けられます。
これからも幻想的でセンス良いテンプレートを作ってくださいね。
楽しみにしています♪v-407

この度は本当にありがとうございました。m(_ _)m
2006/03/13(月) 19:45:52 [URL] うささん [編集]
「うささんへ」
画像の崩れですが、これはIEのレンダリングの問題であり、どうしようも無いですね。(^^;

IEには色々な不具合が多くあり、本来は誰でもが使える代物では無いんですよ。
それでも使っている人が80%以上居る為、それに対応しないといけない訳なんですが・・・

まぁ~スクリプトをあまり貼る様なサイトが少ない時代に作られた代物ですから(笑)

でも今回の事で、他に使われる事のない変数名を使用すると言う見逃し安い部分が修正できたことは私にとっても大いに役立ちました。(^ー^)
2006/03/14(火) 17:07:04 [URL] 有希之武さん [編集]
Comment form.

  管理者にだけ表示を許可する 
  注意 名前、タイトル、本文を入力する事で投稿可能になります。

Trackbacks.

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