QPON さんのスクリプトの最近のブログ記事

QPONさんのスライドショーにマーチンさんが作成して下さったスクリプトをプラスした簡単なスライドショーの作成方法を考えてみました。
こんなやり方なら初めて挑戦する人にもできるかなぁ？まずはタイトルもコメントも無し、写真の番号を表示させるだけのスライドショーです。

簡単と言ってもFTPの知識とフォルダの基本的な知識、フリーソフトの導入の知識が必要ですが。。。
slideshow.LZH   slideshow02.LZH 
上のリンクにあるファイルをダウンロードして解凍しておいて下さい。(02は音楽サンプル画像付き）

1. まず以下のサイトからリネーム君をダウンロードして下さい。http://www.vector.co.jp/soft/win95/util/se093487.html
   ◆動作環境
     Windows95/98/Me/NT4.0/2000/XP
   　　VISTAには未対応のようです。
   解凍すればすぐに使えます。
2. アップしたい写真を選び、ピカサや宿専などあなたがいつも使っているツールで、表示させたいサイズとサムネイル用のサイズの2種類を別々のフォルダに 入れます。
   (下の図はピカサを使用した例です）

   
   

3.  リネイム君のアイコンの上に写真のはいったフォルダを別々にドロップする
   

   すると自動的に写真が連番の名前に変わります。
   
   
   サムネイル用のものには基本ファイル名をs とします。
   
   

   s01 s02 のように名前が書き換わります。   

   

これで両方のフォルダの写真の名前が自動的に書き換わりました。
4. それぞれ名前が書きかえられた画像を解凍したslideshowフォルダの中のphoto001の中にフォルダから出してて入れます。(この作業の前に次回以降のためにphoto001フォルダのコピーを作成しておいてください）
5. photo001フォルダの中のonlyone.jsをメモ帳などで開き　★印の部分　写真の枚数は必須　を書きかえます。
6. myphoto.html　をメモ帳やホームページビルダーなどのホームページ作成ソフトで開き必要事項を編集します。最低★印の部分を書きかえて下さい。
7. 後はslideshowフォルダをフォルダごとFTPすればできあがりです。
   アドレスは　あなたのホームページのURL/ファイルを送ったフォルダ/slideshow/photo001/myphoto.html　になりますね。
8. 新しいスライドショーを作りたいときはあらかじめ作成しておいた写真を入れる前のコピーphoto001　の名前を　photo002 とでも書きかえて同じ作業をすればいいです。(作業の前にコピー２photo001フォルダを作っておくとphoto003を作るときに使えます）
   アドレスは　あなたのホームページのURL/ファイルを送ったフォルダ/slideshow/photo002/myphoto.html
   と言う具合にフォルダの名前を書きかえるだけです。　
   

このslideshowフォルダに4枚の写真とそのサムネイル用の小さな写真を入れてアップした物を以下のアドレスにおきました。
http://plasticity.jp/hitohira/test/slideshow/photo001/myphoto.html

slideshow02はサンプル画像音楽付きです
http://plasticity.jp/hitohira/test/slideshow02/photo001/myphoto.html

最近お仲間に入れて頂いたシニアリーグの皆さんのホームページを見せて頂いて気付きました。
そうなんだjs ファイルを別に作成してこれにリンクさせれば良いんだ。
なんのこと？QPONさんのスライドストリートショーのことです。

で昨日のウォーキングで撮った写真を使って早速作成してみました。
一つのフォルダに1つのスライド・ストリートショーのファイルを収納しています。

 左の画像をクリックしてご覧下さい。

妥協を許さないマーチンさんがコメント欄にタイトルに表示させたいときとコメントに表示させたいときで、プログラムを切り替えるのはいやだし、タイトルとコメントを別々につけたい場合もあるのでということで以下の４通りのプログラムを書いて下さいましたのでご紹介します。(6月1日修正済み）

(1)タイトルとコメントを全部指定

設置例
----------------------
n=6; //写真枚数
for (i=1; i <= n; i++){dt[i]=",";}

// dt[]="タイトル,コメント"
dt[1]="曼陀羅寺,九尺藤";
dt[2]="曼陀羅寺,八重黒竜";
dt[3]="138タワーパーク,牡丹";
dt[4]="138タワーパーク,,本紅藤";
dt[5]="江南タワー,牡丹";
dt[6]="江南タワー,躑躅(八重咲き)";

for (i=1; i <= n; i++){
a = "00"+i;
a = a.substr(a.length-2,2);
t = dt[i].split(",");
if (t[0]=="") t[0]=a;
dt[i] = "s"+a+".JPG,"+a+".JPG,"+t[0]+","+t[1]+" ("+i+"/"+n+"),";
}
----------------------

(2)コメントだけを飛び飛びに指定

設置例
----------------------
n=25; //写真枚数
for (i=1; i <= n; i++){dt[i]=",";}

// dt[]="タイトル,コメント"
dt[1]=",01九尺藤";
dt[7]=",07八重黒竜";
dt[12]=",12牡丹";
dt[15]=",15本紅藤";

for (i=1; i <= n; i++){
a = "00"+i;
a = a.substr(a.length-2,2);
t = dt[i].split(",");
if (t[0]=="") t[0]=a;
dt[i] = "s"+a+".JPG,"+a+".JPG,"+t[0]+","+t[1]+" ("+i+"/"+n+"),";
}
----------------------

(3)タイトルだけを飛び飛びに指定

設置例
----------------------
n=25; //写真枚数
for (i=1; i <= n; i++){dt[i]=",";}

// dt[]="タイトル,コメント"
dt[1]="九尺藤,";
dt[7]="八重黒竜,";
dt[12]="牡丹,";
dt[15]="本紅藤,";

for (i=1; i <= n; i++){
a = "00"+i;
a = a.substr(a.length-2,2);
t = dt[i].split(",");
if (t[0]=="") t[0]=a;
dt[i] = "s"+a+".JPG,"+a+".JPG,"+t[0]+","+t[1]+" ("+i+"/"+n+"),";
}
----------------------

(4)なにも指定しない

設置例
----------------------
n=25; // 写真枚数
for (i=1; i <= n; i++){dt[i]=",";}

// dt[]="タイトル,コメント"

for (i=1; i <= n; i++){
a = "00"+i;
a = a.substr(a.length-2,2);
t = dt[i].split(",");
if (t[0]=="") t[0]=a;
dt[i] = "s"+a+".JPG,"+a+".JPG,"+t[0]+","+t[1]+" ("+i+"/"+n+"),";
}
----------------------

プログラムって難しいけれど面白いですね。私はほんの少しの改造しかできませんが上手く動いたときの気分は爽快！

マーチンさんがQPONさんの高画質スライドストーリーショーのファイル名の記入をとても簡単にするプログラムを教えて下さいました。

コメント欄にも書いていますが、コメント無しで写真のNoだけ表示させたいときは

dt[n]=""
n=25;
for (i=1; i <= n; i++) {
a = "00"+i;
a = a.substr(a.length-2,2);
dt[i] = "s"+a+".JPG,"+a+".JPG,"+a+","+i+"/"+n+",";
}

でOKです。

これで以下のページのような表示になります。

http://plasticity.jp/hitohira/photo/20080501mandaraji/test1mandaraji.htm

また全てにタイトルをつけたいときは(以下全てにつけてませんが）""　の中にタイトルを書けばOKです。""の中にコメントを書いてコメント欄に表示させるよう書き直しても良いですね。

n++;dt[n]="九尺藤";
n++;dt[n]="";
n++;dt[n]="";
n++;dt[n]="";
n++;dt[n]="";
n++;dt[n]="";
n++;dt[n]="八重黒竜";
n++;dt[n]="";
n++;dt[n]="";
n++;dt[n]="";
n++;dt[n]="";
n++;dt[n]="牡丹";
n++;dt[n]="";
n++;dt[n]="";
n++;dt[n]="本紅藤";
n++;dt[n]="";
n++;dt[n]="";
n++;dt[n]="牡丹";
n++;dt[n]="躑躅(八重咲き)";
n++;dt[n]="牡丹";
n++;dt[n]="オオヤマレンゲ";
n++;dt[n]="";
n++;dt[n]="";
n++;dt[n]="玉神木";
n++;dt[n]="";

for (i=1; i <= n; i++) {
a = "00"+i;

a = a.substr(a.length-2,2);
dt[i] = "s"+a+".JPG,"+a+".JPG,No."+a+"　"+dt[i]+","+i+"/"+n+",";
}

上記のような場合は

飛び飛びにしかタイトルをつけない、しかもファイル名が連番ならば、

dt[1]="九尺藤";
dt[7]="八重黒竜";
dt[12]="牡丹";
dt[15]="本紅藤";
dt[18]="牡丹";
dt[19]="躑躅(八重咲き)";
dt[20]="牡丹";
dt[21]="オオヤマレンゲ";
dt[24]="玉神木";
n=25;

と教えて頂き早速試しました。

結果は
http://plasticity.jp/hitohira/photo/20080501mandaraji/test2mandaraji.htm

なんだかお節介がはいって　undefined　の文字が入ってしまいます。
何とか回避できないかと考えましたがギブアップしました。

私のことだからたいした検証もせず手抜きばかり考えてスライドショーのページを作成。
うん、うん動いてるとIE以外のブラウザで確かめたら途中でストップするものがあり。。。
ブラウザのせいかしらなんてあまり気にせずにいたらPekoちゃんがコメントにストップしますと・・・
夜にでもゆっくり見てみようと思って先ほどページを開いたら調べるまでもなく

yoko mamaさんが間違いの箇所を発見して下さっておりました。

「チューリップ19,こんなスライドショーを作りました,.";」
このソースの ,. の部分を ,, に書き換えて見て下さい。
これで上手く作動するはずです。

本当に！　目を皿のようにしてソースを見ると　, にすべきところが　. に！
きっと私自身では発見できなかったミスです。

yoko mama　さん　本当にありがとうございました！

いろいろなスライドショーを見たり自分でも設置してみたり

中で簡単なのは例えばgoogle の　picasa ウェッブアルバム

カッコいいのはＱＰＯＮスライド・ストーリー？

これは　Internet　Explorer　と　Lunascapeでは正しく表示されますが。。。
Opera　はサムネイルの枠線などが表示されず、スライドショーではスライド切り替え時の効果が作動しません。背景色も指定したはずなのに。。。コメントも表示されません。ストーリーショーはコメントは表示されますが位置の指定が出来ません。なぜか途中で止まります。（Lunascxape　もストーリーショーはなぜか同じ１８枚目でストップします）
firefox　はスライドショーの画像が一部しか表示されません。(12日朝確かめたら別ウィンドウで開くウィンドウのサイズの問題で画像は表示され切り替えの効果は作動しませんがストーリーショーも動きました。コメントの位置などは指定できていません）

と言うことではありますが先日見たチューリップをスライドショーにしました。IE以外のブラウザをお使いの方ごめんなさい。

もう一つ追加しました