以前に Lightbox2 の紹介をしましたが、グループ化したイメージをスライドショーした時、グループの最後のイメージから最初のイメージに戻るにはまた一つづつ順に辿っていかなければならない。グループの途中から始めたりするとまどろっこしい。ループできないものか？ 例えば6枚のグループ画像なら、1/6枚目の画像から6/6枚目へ、さらに6/6枚目から1/6枚目へ移れないかということです。
ネット検索では思う記事が見つからないので、Lightbox の作者のサイトへ行って、HELP ページで探してみると Loop という見出しが見つかってリンクを辿ったが、今使ってる Lightbox のバージョンが古くなってて、新しいバージョンの説明だった。仕方なくv.2.7.1をダウンロードし直すことにした。
java script を変えると html も書き換えないといけないんだろうなと憂鬱になりながらも、古い html に試してみると全く問題なく使えた。本当に親切な作者に感謝です。ただそれなら使い方の説明で何故以前のとは異なる html コードを書いてるのだろうか？
HELPの 説明ページ です。
ついでにちょっと補足。ダウンロードしたファイル群の jquery もバージョンが上がって jquery-1.11.0.min.js になってましたが、古い jquery-1.7.2.min.js でも大丈夫でした。また 2.51 には無かった lightbox.min.js を lightbox.js を置いた同じディレクトリーにつけ加えておかないといけませんが、html の head にこのファイルのことを書き加える必要は無いようです。
更に前回の説明で lightbox.css 内と lightbox.js 内でアイコンディレクトリーへのパスを書き換えましたが、新しい lightbox.js では close.png と loading.png へのリンクも lightbox.js 内ではなく他のアイコン同様 lightbox.css 内で指定してるので、新しくダウンロードした lightbox.css 内のパスだけをを書き換えて古い lightbox.css と置き換えればＯＫです。このとき新しい lightbox.css はアイコンディレクトリーを「images」ディレクトリーではなく「img」ディレクトリーに変えてますので、新たに「img」ディレクトリーを作るか、ファイル内の 「img」 を 「images」 に書き換えるかします。
その他、screen.css というファイルが増えてますが、今のところ無くても支障なさそうです。
肝心のループの件ですが、lightbox.js の最初の関数内の this.wrapAround = false (ループしない/初期値) を true (ループする) に変えればいい。
更なる情報です。アンカー名、つまり <name="anchor"> や <id="anchor"> で「-」ハイフンを使っていると、そのアンカー名でジャンプしてきたときには smooth scroll が効きません。
試しに次の「hy-phen」を右クリックして新しいタブかウィンドウで開いてみて下さい。そのウィンドウで「ページの先頭」をクリックしても smooth scroll は効きません。どのブラウザでも同じです。どうしてだかわかりません。「_」アンダーバーなら大丈夫です。
クリック --> hy-phen
追加情報です。前記サイトからダウンロードしたファイルは IE 11 では効きません。
smoothscroll.js のダウンロードサイトを
http://javascript.webcreativepark.net/library/smoothscroll
に変えてダウンロードしたファイルに入れ替えてみたら、IE 11 でも効くようです。
こちらの記事もごらんください。
ページ内でアンカーへジャンプして、javascript の history.back() やブラウザの「戻る」を使うと、そのページの中でジャンプする前の位置に戻ってしまう。本当はこのページに来る前のページに戻りたいのだ。ページ内ジャンプの履歴は残したくない。非常に煩わしいので何とかならないものかと調べてみた。history.length で何とかならないものかとやってみたけど、history.length をjavascript で変える事はできない。
たまたま見ていたＨＰで、やりたい動作をしていたので、出来るんだと判って調べました。ここ
http://www.dezinerfolio.com/2007/08/08/df-javascript-smooth-scroll
から「df_smooth_scroll.zip」をダウンロードして解凍して、「smooth.pack.js」を適当なディレクトリーに置いて、<head>で「smooth.pack.js」を読み込ますだけです。
<script type="text/javascript" src="../pass/smooth.pack.js"></script> ・ ・ <a name="top" id="top">Top</a> ・ ・ <a href="#top">Topへジャンプ</a> ・ ・
以上で完了です。簡単ですね。早速このページにも使ってみましたのでの「ページの先頭」をクリックして確かめてみて下さい。もう「戻る」（＝history.back()）でページ内をうろうろすることはありません。
格好の好いポップアップ・ウィンドウを簡単に自分のホームページに取り入れて利用できるコードをＷＥＢに公開してくれてる人が居ます。ありがたいですね。
http://lokeshdhakar.com/projects/lightbox2/
上のリンクがそれです。ここからダウンロードしたファイルを自分のホームページに適当に配置して、html のコードを数行書くだけです。ファイルの内容はさっぱり解りませんが、ちゃんと動きます。
使い方を書いておきます。
マニュアルにある通り、.html ファイルの <head> 部分に下の２つの.jsファイルと、１つの.cssファイルを置いた場所をパス指定します。下の「pass」部分。
<script src="pass/jquery-1.7.2.min.js"></script>
<script src="pass/lightbox.js"></script>
<link href="pass/lightbox.css" rel="stylesheet" />
同じ .html ファイルの <body> に以下のコードを書けば出来上がり。
<a href="pass/image-1.jpg" rel="lightbox[group]" title="my caption"> 画像のサムネイルか説明文字 </a>
複数画像をスライドショーにすることもできます。スライドショーにしたい画像のリンクタグ（上の部分）内の [group]を同じ名前にすればその グループの画像郡を をスライドショーにできます。
マニュアルには書いてないのですが、ちょっと手直しが要るのは「lightbox.js」内で、ボタンのイメージ画像を置いた場所（＝imagesディレクトリー）へのパス指定をせねばならないこと。
しかも不便なことに imagesディレクトリー へのパスは 「lightbox.js」からのパスではなく、「lightbox.js」を呼び出す「.htmlファイル」から「imagesフォルダ」へのパスを指定しなければなりません。すなわち下記部分の「pass」を書き直します。
L.51) this.fileLoadingImage = 'pass/images/loading.gif'; L.52) this.fileCloseImage = 'pass/images/close.png';
従って、このスクリプトを使う「.html」ファイルは全て「images」ディレクトリーから同じ深さの階層になければならないので、使い勝手が悪くなります。今のところ改善できる目処はつきません。尤も、このパスが違ってもloading と close のイメージが出ないだけでプログラムは動くようです。
次に、「lightbox.css」内でこちらは「lightbox.js ファイル」から imagesディレクトリーまでのパスを指定します。次の２つの部分の「pass」です。
L.114) background: url(pass/images/prev.png) left 48% no-repeat; }
/* line 85, ../sass/lightbox.sass */
.lb-next:hover {
L.119) background: url(pass/images/next.png) right 48% no-repeat;
}
見栄えは良いのですが、ポップアップ・ウィンドウは親ウィンドウの一部として親ウィンドウの中に開きますので、開いている親ウィンドウより大きな画像の場合はケられて全部を表示できない場合も出るかもしれませんね。
私のようにデスクトップに小さめのウィンドウをいくつも開いて使う習慣の人には面倒くさいことになりそうです。
もっと早く知っていれば全部統一のとれたものになったんだけど、既存のファイルを全部書き換えるのは億劫です。とりあえず新しく追加した科のページから変えて行きます。
ポップアップ・ウィンドウの名前を "_blank" にすると取り敢えずはいいのですが、ブラウザを終了すると後にデスクトップがウィンドウだらけになってしまいます。
ウィンドウを複数開かないようにウィンドウに名前をつけるとウィンドウはひとつでそこに次々と画像が表示されるのですが、、大きさの違う写真を開いたときに最初に開いたウィンドウの大きさが変わらないので、大きい画像なら「け」られるか、より小さいものなら余白が出るかしてしまいます。
そこで、resizeTo で開いたウィンドウのサイズ変更を試みたのですが、IEならとりあえずＯＫ。でもなぜかサイズが小さい。横20px 高さでなんと98pxも足りません。しかももっと問題なのは Firefox は最近になって(v.7) resizeTo のスクリプトをサポートしなくなりました。
そんなら・・・・
window name に空のウィンドウを開いてすぐそれを閉じて、改めて目的のウィンドウを開く。これでうまくいった! と喜んだんですが、IEではなぜか最初のポップアップ・ウィンドが開かない。二回目のクリックでも開いたり、開かなかったり。
キーボードバッファにenter keyが重複して入ってしまってるいるのかも。しかもこの症状はWeb=ホストのファイルを開いたときにでて、ローカルのぼくのPCのHDのファイルを開いたときは不具合が出ません。訳分らん！ そこでもっと他の方法を模索してやっと行き着いたのが次の処理。
IEの場合はresizeToで処理。それ以外ではwindowを開いて閉じてそしてまた開く、という処理にしました。Opera とか上記２つのブラウザ以外ではどうなるか分りません。
htmlから < a href=>タグ中で、url（=画像のアドレス）とname(植物名)をパラメータとして sidewindow() に渡して呼び出してます。
後日談：それからもいろいろ試行錯誤してわかった。開いたウィンドウを入れた変数をグローバルにしたら、それが閉じてるか開いてるか調べられるし、閉じることもできる。それで全てどうやら解決です。・・と思ってたがやっぱりＩＥでは時に開かない時がある。
原因不明で、そのままにしとこ。
あ〜〜ぁ(涙)
html の呼び出し (これもjava script がoffでも不具合が無く動くように変えました。)
<a href="javascript:sidewindow('url','name');">
<a href="url" onClick="sidewindow('url','name'); return false;">
//グローバル変数宣言
var pwin;
// ブラウザがIEかどうかを調べる ---- (これも不要になった)
//function sidewindow(src,nam){
// if(navigator.userAgent.indexOf("MSIE") != -1){
// var brw = "MS";
// sidewindow2(src,nam,brw);
// }
// else{
// var brw = "els";
// winclose(src,nam,brw);
// }
//}
// ウィンドウを閉じる(IE以外)
function winclose(src,nam,brw){
// pwin=window.open("","wide");
if(pwin){pwin.close();
}
sidewindow2(src,nam,brw);
}
// ポップアップウィンドウ本体
function sidewindow2(src,nam,brw){
var i = new Image();
i.onload = function() {
w = i.width; h = i.height;
var pwin = window.open(
src,
"wide",
"width="+w+",height="+h+",scrollbars=no,resizable=yes"
);
if ( pwin ) {
pwin.window.document.open();
pwin.window.document.write(
'<html>'
+'<head><title>'+i.alt+'</title></head>'
+'<body style="margin:0;padding:0;border:0;">'
+'<a href="javascript:window.close()">'
+'<img src="'+i.src+'" alt="'+nam+'" title="クリックで閉じる" />'
+'</a>'
+'<div style="position:relative; top:-20px; text-align:center;
color:#ffffff;">'+nam+'</div>'
+'</body>'
+'</html>'
);
pwin.window.document.close();
これも不要
// if (brw == "MS"){
// pwin.window.resizeTo(w+20,h+98);
// }
pwin.focus();
} else {
location.href = i.src;
}
i.onload = function(){};
}
i.src = src;
}