やらなきゃいけないことに追われている時ほど、やらなくてよい事をやりたくなってしまう。テレビで高校野球をぼんやり見たり、愛犬と発作的にじゃれあったり、いろんなウェブツールで遊んでみたり。
前々から気になっていた Lightbox JS というスクリプト。その ver.2.0 がリリースされたので導入してみた。どんなものかと言うと、右の画像をクリックしていただけば一目瞭然だろう。
サムネイルから実寸画像を見せる方法としては別窓展開がポピュラーだが、Lightbox を使うとこんなにスマートになる。一見 Flash 仕様のように見えるが、CSS と JavaScript によるツールである。しかも今回の v2.0 から複数画像のスライドショーが可能になった。すばらしい。
複数枚の写真をスライドショーとして見せることもできるが、このスクリプトの場合、矢継ぎばやに写真を展開させるより、フォト・エッセイふうに「１枚の写真＋テキスト」でじっくり見てもらうのに適していると思う。いずれにしても最強で最良のスクリプトだ。ぜひお試しあれ。
ダウンロード先は下記のとおり。
Minima のflaファイルをダウンロードしたけどもワケ分からん、というメールをもらったので、ざっと説明を。
前回のエントリにも書いたが、Minimaの元ネタは Macromedia の load_images.fla である。その他のサンプルと併せて下記よりダウンロードできる。
Macromedia Japan - Flash MX : サンプルファイル（追記：現在このサンプルは閉鎖中）
以下はその load_images.fla（イメージのロード）の ActionScript。
-
//initialize variables and properties
square._alpha = 0;
whichPic = 1;
//initiate change to new image when buttons are clicked
next.onPress = function() {
if (whichPic<5 && !fadeIn && !fadeOut) {
fadeOut = true;
whichpic++;
input = whichPic;
}
};
back.onPress = function() {
if (whichPic>1 && !fadeIn && !fadeOut) {
fadeOut = true;
whichpic--;
input = whichPic;
}
};
_root.onEnterFrame = function() {
// when a new Photo is selected, fade out, load new image, and fade in
if (square._alpha>10 && fadeOut) {
square._alpha -= 10;
}
if (square._alpha<10) {
loadMovie("../images/image"+whichPic+".jpg", "square");
fadeOut = false;
fadeIn = true;
}
if (square._alpha<100 && fadeIn && !fadeOut) {
square._alpha += 10;
} else {
fadeIn = false;
}
// limit input field
if (input>5) {
input = 5;
}
// initiate change to new image when Enter key is pressed
if (Key.isDown(Key.ENTER)) {
fadeOut = true;
whichpic = input;
}
};
// if a number is entered in the input field but Enter is not pressed, change
// back to current Photo number when clicking anywhere else
inputField.onKillFocus = function() {
input = whichPic;
};
Minima へ改造するにあたって、まず青字の部分を削除した。
削除した箇所はインプット・フォームに写真のナンバーを入力すると当該写真が表示されるというアクションなのだが、実用性はまったくゼロだろう。何十枚ものスライドを見たあとで、もう一度見たい写真の番号を覚えている人がいるとは思えない。
次に、赤字の部分を下記のように改変した。
//initialize variables and properties
nMax = _root.total;
nMin = 1;
nRandomInt = Math.floor(Math.random()*(nMax-nMin+1))+nMin;
square._alpha = 0;
whichPic = nRandomInt;
//initiate change to new image when buttons are clicked
next.onPress = function() {
if (whichPic< nMax && !fadeIn && !fadeOut) {
fadeOut = true;
whichpic++;
} else {
fadeOut = true;
whichpic = 1;
}
};
back.onPress = function() {
if (whichPic>1 && !fadeIn && !fadeOut) {
fadeOut = true;
whichpic--;
} else {
fadeOut = true;
whichpic = nMax;
}
};
_root.onEnterFrame = function() {
// when a new Photo is selected, fade out, load new image, and fade in
if (square._alpha>10 && fadeOut) {
square._alpha -= 10;
}
if (square._alpha<10) {
loadMovie("images/"+whichPic+".jpg", "square");
fadeOut = false;
fadeIn = true;
}
if (square._alpha<100 && fadeIn && !fadeOut) {
square._alpha += 10;
} else {
fadeIn = false;
}
};
１行目の変数 nMax = _root.total で写真の総枚数を読み込ませている。
３行目でスタートの写真をランダムにかきまぜ、５行目でそのランダム数値を変数に代入している。
２箇所の else は、Next & Back をループさせるため。最初の else の部分を削ればスライドが終わりまで行ったらそれ以上は進まない。次の else を削ればスタート写真からバックしてラスト写真へ移動しない。そこのところはお好みで。
さらに下の images/"+whichPic+".jpg は、写真が格納されたフォルダ名、画像ファイル名である。GIF画像を使いたければ、jpg を gif に変更するといい。
とてもシンプルな仕組みなので、改造はラクと思う。
ちなみに画像を読み込むムービークリップは square である。このサイズを変えれば、お好みの大きさのスライドショーが出来上がる。
とはいえ宣伝させてもらうなら、ビッグなサイズのスライドショーツールをお求めなら、上記のスクリプトをいじるより CINRA BABI をお薦めしたい。盟友マサキさん作の素晴らしいツールなので。ただ、BABIの仕様上、ナビゲーションが写真に重なるようにレイヤー表示されるので、超ミニフォトだとナビがはみ出る感じになる。それが気になる方は Minima をどうぞ。
【関連エントリ】
これは本宅のアバウト・ページに設置してある豆スライドショーである。奥ゆかしくも写真サイズは 100x100px。携帯フォトより小さい。
たいしたツールじゃないが、これが欲しいと言うゲストさんがいらっしゃったので、配付することにした。もらって下さる奇特な方は下記よりどうぞ。詳しい設置方法はダウンロードされたフォルダー内のマニュアルを参照ください。
ツール名は minima。小さいので。取り柄はそれくらいだし。
実はこれ、FLASH MX に付いているサンプルを改造しただけの代物。手近な素材は有効利用すべきだ。とはいえサンプルは所詮サンプルに過ぎず、サイバーチックなデザインも好みじゃなかったので、デザインも機能も私好みに改造させてもらった。カタチ・テイストに変えた部分は下記の四点。
ネバーエンディング・フォトアルバム
少ないコンテンツを有効に。矢印キーのどちらを押しても（右がネクスト、左がバック）エンドレスに写真が展開。
リロードのたびにランダム表示
更新してなくてもランダムに最初の写真が変わるので、ゲストさんに「この管理人はマメに更新しているなぁ」と思わせることができる。
HTMLによるセッティング
セッティングといっても写真を追加したら総枚数の指定を書き換えるだけ。手間を省くことがナマケモノの極意である。
背景カラーはお好みで
縁取りのシャドーは透明レイヤーなので、ページの背景がショッキングピンクだろうとクレイジーレッドだろうと何でもＯＫ。
ちなみにSWFファイルには「読み込みプロテクト」をかけていない。マクロメディアのサンプルの改造版なので、プロテクトをかけるのは筋違いという気がした。
flaファイルも公開するので、デザインや写真サイズなど、さらに独自に改造したい方はご自由にお持ち帰りのほどを。
改造したい方は下記のエントリを参照ください。
| 1 |
2 |