スライドショーの最近のブログ記事

 国宝　陽明門（ようめいもん） 【スライド可】

今日 ググっていて偶然に出会ったサイトでLightbox Plusを自動スライドショー化というスクリプトを発見しました。まさに私が望んでいたスクリプトです。早速入れ替えてみました。画像が表示されたら（LightBox_plusのスクリプトを読み込み終わったら）はじめの一枚の画像をクリックすると始まりです。表示された画像の上にマウスを置くと現れる矢印の上でクリックするとスライドショーが始まります。約5秒間隔で次の画像を表示し、終了すれば元の画面に戻ります。途中で止めたいときは画面の上でクリックするだけです。 画像の左にある矢印をクリックするとその画像から逆順に自動でスライドします。
このスクリプト　FireFox　ではrel属性を書かなくても意図したように表示してくれますが、IE7　ではrel属性とグループ名を書かなければスライドショーが始まらないようです。
また運悪く画像に画像以外のリンクを貼っているとNow loadingの画像 がでて終了しません。そのときは画面上でマウスをクリックして終了させて下さい。
でもおかげでとっても便利で楽しくなりました。papasanありがとうございます。

なお自動スライド化以前もそうでしたが、左上の このボタンをクリックするとマウスフォイールで画像のサイズを自由にかえることができます。このときの終了はダブルクリックして下さい。

(写真をクリックするともう少し大きなサイズで見て頂けます）

yahooフォトのページを開きます。わからないときはgoogleなどで検索すると早いです。

ログインして下さい。ID等は全てのYahooのサービスと共通です。ID取得に関するYahooのヘルプページへはここをクリック

アルバムを作りましょう

アルバムの名前等記入して（ここでは練習という名前にしました）
※非公開を推奨します

必要事項に記入または選択してアルバムを作成をクリック

作成したアルバムを開きます

このアルバムに写真を挿入します。

一枚ずつでは大変なのでアップロードツールを使います。

初めての時はアクティブXのインストールを求められますので許可して下さい。
追加したい写真の入ったフォルダを選びます。サムネイル表示させるとわかりやすいです。

追加したい写真を選びアップロードをクリックします。

アップロードが始まります

続けてアップロードすることもできます。そのときは　はい　を選択して下さい。

これで写真の入ったアルバムができました。このアルバムを見せたいときはフォトアルバムをクリックして

友だちに見せたいアルバムを選び、友だちに見せるをクリックすると

メール送信のためのページが開きますので　必要なことを書き込んで

メールを送信をクリックすればメールを送ることができます。 

写真の挿入（追加）は以下の方法でもできます。

Yahoo フォトのページの写真を追加するをクリックする

アルバムを選んで選択をクリック

※ここで新しいアルバムを作ることもできます

新しいアルバムを作成にチェックを入れて　アルバム名を書き込んで下さい。選択ボタンをクリックすると

写真の追加画面に変わります。

今日Yahoo フォトアルバムが楽しくなっているよと聞いて早速見てみました。(説明の画像はクリックするともう少し大きな画像が表示されます）

１．メールで送って頂いたアルバムのリンクを開くと。。。宣伝や色々な機能へのリンクがありますが今回はスライドショーで見ることにします。

右上のスライドショーのボタンをクリックします。

２．するとテーマを選ぶ画面に変わりますので好きなテーマを選びます。使いたいテーマのラジオボタンにチェックを入れて下の選択ボタンをクリックします。

テーマについてのYahooの説明ページはこちらです。

3．これで音楽入りのスライドショーを楽しめます。

右下の全画面表示ボタンをクリックすると全画面表示で見ることもできます。

好みの音楽を選んだり

写真の切り替わる速度を選ぶこともできます。

テーマは再選択できます。

音の大きさを変更したり、タイトルを表示させないようにすることもできます。詳しくはYahoo のスライドショーの詳細設定　のページをご覧下さい。

Yahooフォトアルバムについてはの詳しいヘルプは
http://help.yahoo.co.jp/help/jp/photos/upload/index.html
をご覧下さい。

ほんと！楽しめます。
それに見る人の環境で設定を変えられるのは良いですね。

教えてくれたPekoちゃんどうもありがとう！

ネット上には色々な無料のウェッブアルバムのサービスがあります。
それらの比較やリンクが以下のサイトにあります。
特徴を知って利用すると良いですね。

http://www.kooss.com/album/
http://internet.watch.impress.co.jp/static/link/2004/04/09/album.htm
http://atasinti.chu.jp/photo/index.html

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つのスライド・ストリートショーのファイルを収納しています。

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

あのあと、そうそうノートパソコンではどうかしら（リカバリ後間もないXPｓｐ２）とyoko mama さんのスライドショーのページをノートパソコンで開いてみました。すると

「このWebサイトは、'Microsoft Corporation'からの'Windows Media Player Core'
アドオンを実行しようとしています。」
というメッセージが表示されましたので許可しましたが状況は同じでした。

マーチンさんが
フォルダ名から判断して、Photostory3 を使われているようなので、
http://www.microsoft.com/japan/windowsxp/using/digitalphotography/photostory/default.mspx
のサンプルが見られるか、ご確認ください。と教えて下さいましたので早速そのページを開きました。

そしてサンプルファイルを開いたらMediaPlayer9の設定画面になりCodecのインストールを要求されインストールしましたが MVP2Codecが必要だといわれダウンロードページへ行きました。そのページはWin 2000やMe向けでした。

ネットでMVP2Codecが必要だがどこで入手できるかと言う質問に、XPを使っているなら　Media Player10 をインストールする方がいとアドバイスしている方があり　MediaPlayer10　をインストールしました。それで問題解決しました。

私は普段Media Playerを使っていないのでデスクトップもノートPCもMediaPlayer9のままだったようです。

MediaPlayer10に付属しているMVP2Codec　がPhotostory3には必要なようです。
MediaPlayer11では動きませんでしたので。。。推察するに10から11にバージョンアップした場合はMVP2Codec　は残るので大丈夫だけれど　11にはこのCodecは含まれていないのでしょうか？？？念のためまだあまり評判の良くない１１にバージョンアップしてみましたが問題なく表示されます。

ちなみにFirefoxでは最初　iTunes を選択することで動きました。またOpera でも　Lunascape4　でも問題なく動いています。

しかしフォルダ名からPhotostory3　を使用と推測されるとは・・・やはりマーチンさんです。私はwmv　という拡張子にだけ注目して気付きませんでした。
なぜかしらと思っていることが解決すると気分がいいですね。ありがとうございました。

ちなみにCodecはなんぞやと思って調べたら以下のサイトに分かりやすい説明がありました。

http://www.hanamoku.com/codec/

yoko mama さんのスライドショーのページを見せて頂いたら

こんな風に表示されていつまで待っても動かない

ソースを見せて頂いたら
<EMBED src="××.wmv" width="800" height="600" loop="true">
とある。このタグ昔使ったことのあるような？？？
どんなタグだったか検索してみました。
すると　とほほ　のページ　http://www.tohoho-web.com/html/embed.htm　に

Netscape Navigator 2.0 が始めに実装し、IE3.0 にも実装されました

とありましたので、FireFox で開いたら難なく表示されました。

よく使われるプラグインソフトは

• Windows Media Player
• RealPlayer
• QuickTime
• MidRadio Player
• Macromedia Flash Player
• Macromedia Shockwave Player

だそうでIE7で不具合が多くアドオンを無効にしていた私、早速確かめましたが
QuickTime とMacromedia Shockwave Player　は有効になっています。
なぜ表示されないのかしら？
そうだwmv　というファイルについて調べてみればいいのかも。。。で検索すると

動画圧縮標準のMPEG-4を元にMicrosoft社が開発した動画形式。Windows標準のメディアプレーヤーである「Windows Media Player」が標準でサポートしている形式の一つ。（http://e-words.jp/w/WMV.html　より）

とありましたので　Media Player11をインストール、
すると表示は

こうなりました。やった！と思ったのですが動きません。

そしてなんと動いたはずのFireFoxでも同じ状態。Media　Player11が悪いのかとロールバックしましたが状況は同じです。

IE7のせいでしょうか？皆さんは如何ですか？
ファイルとそれを動かすタグとプラグインとブラウザの関係。。難しいですね。　

妥協を許さないマーチンさんがコメント欄にタイトルに表示させたいときとコメントに表示させたいときで、プログラムを切り替えるのはいやだし、タイトルとコメントを別々につけたい場合もあるのでということで以下の４通りのプログラムを書いて下さいましたのでご紹介します。(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+"),";
}
----------------------

ファイルの記入とタイトルまたはコメントの記載がマーチンさんのおかげで超簡単になりました。
リネーム君などのリネームソフトを使ったりして写真の番号を01から連番で書きかえた場合です。
また例はサムネイル画像を作成してアップした場合です。

http://plasticity.jp/hitohira/photo/20080501mandaraji/test5mandaraji.htm
をご覧下さい。

これはタイトルコメントなしの場合

//個別データベース

//　　　　　"サムネール ，原画 ，タイトル,コメント,ストーリータイプ,ストーリー時間"
//サムネールファイル名を省略すると原画ファイルで兼用します（「,」は残すこと）
//ストーリータイプを省略すると乱数表で自動選択します
//ストーリー時間を設定するとコマごとに切り替え時間が変えられます。

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

http://plasticity.jp/hitohira/photo/20080501mandaraji/test4mandaraji.htm
の場合は

//個別データベース

//　　　　　"サムネール ，原画 ，タイトル,コメント,ストーリータイプ,ストーリー時間"
//サムネールファイル名を省略すると原画ファイルで兼用します（「,」は残すこと）
//ストーリータイプを省略すると乱数表で自動選択します
//ストーリー時間を設定するとコマごとに切り替え時間が変えられます。

n=25;
for (i=1; i <= n; i++){dt[i]="";}

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

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

これは飛び飛びでもタイトルを表示させたいときのソースの例です。

dt[i] = "s"+a+".JPG,"+a+".JPG,"+a+","+dt[i]+",";

こうすると九尺藤などの言葉はコメントとして表示されます。

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

もうおわかりですね。n=25 は写真が25枚の時です。
いろいろアレンジも出来そうです。

では素敵なスライドショーを作って下さい。

マーチンさんありがとうございました。これで大丈夫ですよね。

PHOTOのページでQPONさんの「ＱＰＯＮ高画質写真スライドショー・ストーリーショー公開ソース 」を使わせて頂いています。とても素敵な動きに自己満足しております。

この公開ソース、表示させたい写真の名前をソース中に書き込まねばなりません。

//ストーリータイプを省略すると乱数表で自動選択します
//ストーリー時間を設定するとコマごとに切り替え時間が変えられます。

n++;dt[n]="syobu1s.jpg,syobu1.jpg,しょうぶ１,高槻花菖蒲園１,12,10";
n++;dt[n]="syobu2s.jpg,syobu2.jpg,しょうぶ２,高槻花菖蒲園２";
n++;dt[n]="syobu3s.jpg,syobu3.jpg,しょうぶ３,高槻花菖蒲園３";
n++;dt[n]="syobu4s.jpg,syobu4.jpg,しょうぶ４,高槻花菖蒲園４";

のsyobu1s.jpg,syobu1.jpg,の部分を自分がアップしたい写真の名前に書きかえるのですが写真の枚数が多いと結構面倒です。フリーのリネームソフトを探して連番でリネームして、前に作ったソースの基本ファイル名部分を置換していましたが今日使いやすいリネームソフトが見つかりましたのでご紹介します。

今まで使っていたものもディレクトリの中のファイル名をまとめて変更してくれるツールでしたが、このリネーム君は基本となる名前部分を空白のままでリネームしてくれます。拡張子の書きかえも出来ます。（JPGをjpgになど）

つまり　DCS1234.jpg DCS1256.jpg DCS2345.jpg と一つづつ書きかえるのは面倒なので今までは
flower01.jpg  flower02.jpg flower03.jpg と言う具合に
基本となる名前を元に連番でリネームしてくれるツールを使ってリネームし
以前に使ったソースファイルのたとえば
bird01.jpg  bird02.jpg  bird03.jpg の
birdの部分を flowerに置換していたのですがこのツールを使えば

DCS1234.jpg DCS1256.jpg DCS2345.jpg を
01.jpg 02.jpg 03.jpg に瞬時にリネームしてくれるのです。

これなら一度

n++;dt[n]="s01.JPG,01.JPG,01,01/25,,";
n++;dt[n]="s02.JPG,02.JPG,02,02/25,,";
n++;dt[n]="s03.JPG,03.JPG,03,03/25,,";
n++;dt[n]="s04.JPG,04.JPG,04,04/25,,";
n++;dt[n]="s05.JPG,05.JPG,05,05/25,,";
n++;dt[n]="s06.JPG,06.JPG,06,06/25,,";
n++;dt[n]="s07.JPG,07.JPG,07,07/25,,";
n++;dt[n]="s08.JPG,08.JPG,08,08/25,,";
n++;dt[n]="s09.JPG,09.JPG,09,09/25,,";
n++;dt[n]="s10.JPG,10.JPG,10,10/25,,";
n++;dt[n]="s11.JPG,11.JPG,11,11/25,,";
n++;dt[n]="s12.JPG,12.JPG,12,12/25,,";
n++;dt[n]="s13.JPG,13.JPG,13,13/25,,";
n++;dt[n]="s14.JPG,14.JPG,14,14/25,,";
n++;dt[n]="s15.JPG,15.JPG,15,15/25,,";
n++;dt[n]="s16.JPG,16.JPG,16,16/25,,";
n++;dt[n]="s17.JPG,17.JPG,17,17/25,,";
n++;dt[n]="s18.JPG,18.JPG,18,18/25,,";
n++;dt[n]="s19.JPG,19.JPG,19,19/25,,";
n++;dt[n]="s20.JPG,20.JPG,20,20/25,,";
n++;dt[n]="s21.JPG,21.JPG,21,21/25,,";
n++;dt[n]="s22.JPG,22.JPG,22,22/25,,";
n++;dt[n]="s23.JPG,23.JPG,23,23/25,,";
n++;dt[n]="s24.JPG,24.JPG,24,24/25,,";
n++;dt[n]="s25.JPG,25.JPG,25,25/25,,";

とでもソースを書いておけばあとは題名やコメントの変更程度、好きな名前のフォルダを作成してその中にスライドショーを１セット（写真とソースファイルと音楽ファイルなど）収納するだけです。(良かったらこの部分コピーしてください）

ちなみに1/4...4/4　の表示はyoko mama さんが使っておられるものをグッドアイディアと拝借しました。○○枚中の○番目のつもりです。

またサムネイル画像は縮小専用を利用していました。これですとリサイズしたファイル名の前または後ろに任意の文字を付け加えることが出来ますので。

でもこのリネームソフトを使えば、私は画像管理にピカサを使っていますので、ピカサを使えば簡単です。スライドショーに使いたい写真にスターをつけてスターあり写真を選択をクリック、元画像としたいサイズとサムネイルのサイズの２種類を別々のフォルダにエクスポートしてリネームすればいいですから。

 **********************************************************************
    一度リネームしたものは元のファイル名には戻せません。責任は負いかね
    ますので、くれぐれも大事なファイルをリネームしてしまわないようご注
    意ください！
  **********************************************************************

 とリネーム君のRenameKn.txtにあります。。。

このリネーム君というツールは以下からダウンロードできます。

http://www.vector.co.jp/soft/win95/util/se093487.html

◆動作環境
  Windows95/98/Me/NT4.0/2000/XP
　　VISTAには未対応のようです。

解凍すればすぐに使えます。

名前を変更したいファイルを取り込むには、アイコンの上に(ショートカットでも可）リネームしたい写真の入ったフォルダをドロップするだけで良いです。またはメニューバーのファイルからフォルダを選択してください。

上図のように連番にチェックを入れ、基本ファイル名を空白にして桁数と開始番号を設定し、あとは→（右やじるの赤いマーク）をクリックするだけ！

ちなみにリサイズ用の画像は以下のようにしてリネームしました。

(５月２３日追加）拡張子の変更は変更したいファイルを選択後、拡張子にチェックを入れて書き直したい文字を記入して実行するだけです。

 2008年6月14日追記　連番を2桁や3桁に設定すれば開始番号を01とか001にしなくても2桁の場合は01 3桁の場合は001から番号が自動的にふられます。また最初にソースで使っている拡張子(大文字か小文字か）にしておくと一度の操作で済みます。