« 自動展示切替えアルバムを試す | トップページ | 自動展示切り替えの説明記事にミスがありました »

2005/05/10

訂正:自動展示切替えアルバムを試す2

 ベーシックプランで遊べるコンテンツと紹介しました自動展示切替えアルバムの、ソースの説明です。
ソースは、別ウインドウを呼び出すスクリプトと、別ウインドウに展示する内容を設定するスクリプト・ファイルのふたつになります。展示する画像ファイルや文書ファイルなどは自分で準備してくださいね。

まず、別ウインドウを呼び出すスクリプトの部分です。この部分は「マイリスト/リンク/(追加)/メモ欄(テキスト表示)」に記入します。ブログ画面に表示させるときは、「ブログ/デザインの編集/コンテンツ」でチェックを入れて保存し、「ブログ/デザインの編集/並べ方」を決めて保存してください。

tableタグでメニューを見易くします。(マイリストの表示安定化を兼ねて、tableタグはいつも使います) 幅(width)を170ピクセルに設定。
<table border="0" width="170" bordercolor="white">
<tr>
メニューを入れる部分の高さと背景色の設定。この中に下で設定するメニューが入ります。
<td height="20" bgcolor="#ffffff">
別ウインドウを開く個人設定の関数(artwin())を定義付けします。「artwin()」は複数の別ウインドウを設定するときは、別の関数名にします。
<script type="text/javascript"><!--
function artwin(){
別ウインドウに展示する「展示ファイルの保存場所/ファイル名」、別ウインドウの大きさ(width,height)と表示位置(left,top)を設定します。
window.open("http://自分のブログサイト/files/ファイル名.html","awin","width=188,height=320,left=520,top=200");
}
// -->
</script>
ブログ画面のメニュー表示を、自分の好みの大きさ(width,height)に設定します。
<style type="text/css"><!--
#ani{ width:164px; height:15px; margin:1px; padding:2px;position: relative; left:0px; top:0px; background-color:#ffbb66; }
-->
</style>
<div id="ani">
メニューに表示する「項目名」を、つぎの「modigliani」の部分に書き込みます。「modigliani」をクリックすると,別ウインドウが開くように設定します.
<span onClick="artwin()" style="cursor:pointer;">modigliani</span>
</div>
</td>
</tr>
</table>

つぎは、別ウインドウの中に展示するものを設定する部分です。この部分は「files」ディレクトリにHTMLファイル名を付けて保存してください。
<html>
展示する複数の画像ファイルなどを一括読みこみします。ファイル名は、一括読みこみし易い名前にする必要があります。この事例では、「modi0.jpg modi1.jpg modi2.jpg ...」などと設定しています。一括読み込みをするのは、表示をスムーズにするためですが、逆に表示開始までの時間が長くなります。
<script type="text/javascript"><!--
展示する画像ファイルが4個以外の場合、「Array(4)、i<4」の数値を書換えます。
var preScan = new Array(4);
var timer, layout=0; for (var i=0 ; i<4; i++) {
    preScan[i] = new Image();
展示する画像ファイルなどの保存場所とファイル名を指定します。下記の例ではファイル名が上にも書きましたように「modi0.jpg」などとなっています。
    preScan[i].src = "http://ブログサイト名/images/modi" + i + ".jpg";
}
この下は、展示切替動作前の待ち時間設定でした。
(ミスをお詫びします。切替時間間隔の設定は、ここから19行ほど下の
《訂正》
の部分になります。)
展示スピードの設定をします。(1500で1.5秒間隔)

function startShow() {
    if (document.images) {
        timer = setTimeout("forward()", 1500); }
}
「restart」の関数設定
function restartShow() {
    clearTimeout(timer);
    startShow();
}
この辺から下は、また機会がありましたら説明します。(少し面倒です)
function forward() {
    if (layout < 3) {         layout++;
    } else {
        layout = 0;     }
    document.images[0].src = preScan[layout].src;
《訂正》 展示切り替えの設定はこの部分です。
展示切り替えスピードの設定をします。(2000で2秒間隔)

    timer = setTimeout("forward()", 2000);
}
//-->
</script>
<style type="text/css"><!--  .modig{width:170px;height:300px;position:absolute;left:0px;top:0px;background-color:#f7f6e6;}
   .modig span{width:170px;height:15px;position:absolute;left:90px;top:295px;}
-->
</style>
この下が、別ウインドウが開いたら展示切り替えを自動起動する部分です。
<body class="modig" onload="startShow();" onunload="clearTimeout(timer);">
展示する内容の切り替え動作開始前の展示指定部分
<img width="170" src="http://ブログサイト名/images/modi0.jpg" alt="slide show" >
この下で、ストップ/再スタートの設定。 span要素として、スタイルシートで別ウインドウ内での表示位置も設定しています。
<span>
<a href="javascript:clearTimeout(timer);">stop</a>
<a href="javascript:restartShow();">restart</a>
</span>
</body>
</html>

別ウインドウ展示内容指定部分の説明抜きのソースは、この下のファイルのソースを参考にしてください。
「slideshow3_2.txt」をダウンロード   

|

« 自動展示切替えアルバムを試す | トップページ | 自動展示切り替えの説明記事にミスがありました »

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/78586/4023693

この記事へのトラックバック一覧です: 訂正:自動展示切替えアルバムを試す2:

« 自動展示切替えアルバムを試す | トップページ | 自動展示切り替えの説明記事にミスがありました »