ぴくとぽっぷ：ページ上から直リンクしている画像を順次表示するブックマークレット

ブログページ上にサムネイルはあるけれど、拡大画像はクリックしないと見られない……数が多いと面倒だなぁ……と感じたこと、ありません？
実際そう感じた人がここに約一名(苦笑)。
休み中にどっかへおいしいものでも食べに行きたいなぁ……と思ってネット上をあちこち散策していたとき、『関谷江里の京都暮らし』というページを見つけ……食欲をそそられる、おいしそうな料理の画像が並んでるんですけれど、いちいちサムネイルを選択してクリックするのがなんとも面倒で。

なので、こんなブックマークレットを作成してみました。

ぴくとぽっぷ：ページ上から直リンクしている画像を順次表示するブックマークレット

ブックマークレットの登録方法等はこちら→【Web】ブックマークレットのブラウザ毎の登録方法

ページ上に画像への直リンク(<a href="(画像ファイル)">サムネイル or テキスト</a>)があるページでこのブックマークレットを実行すると、先頭の画像をページ左上に作ったウィンドウ(div要素)内で表示します。
ウィンドウが表示されている状態で、マウスのホイールを前後に動かすと、画像が切り替わります。

画像へのリンクかどうかは拡張子で判断しており、*.jpg、*.jpeg、*.pngに制限しています。また、ココログの場合は/images/又は/photos/下の画像であることもチェックします。

【2007/05/01追記】
*.gifも対象に含めたい場合は、こちら↓をお使いください。

ぴくとぽっぷ[+GIF]：GIFも対象にしたブックマークレット

また、リンク先が*.htmlのものも含めたい場合は、

ぴくとぽっぷ[+HTML]：HTMLも対象にしたブックマークレット

ぴくとぽっぷ[+GIF+HTML]：GIFとHTMLも対象にしたブックマークレット

をお試しください。

対象となるHTMLファイル(*.html、*.htm)は同一ドメインのものに限ります。
ブックマークレット起動時にリンク先HTMLを全て読み込むため、準備完了までに時間がかかります。
また、表示される画像は1つのみ(HTML内の最初のimg要素)となります。
→【2007/06/23追記】オプション操作(下記参照)によって最初のimg要素以外も表示できるようになりました。

■操作について
ウィンドウが出ているときには、以下の操作が有効です。

なお、ウィンドウが隠れた状態で、対象となる画像へのリンクをクリックすればウィンドウが再表示されます。
リンクを[Shift]キーを押しながらクリックすると、本来のリンク先が別窓で表示されます。

1. マウスホイールを前後に動かすことで画像が切り替わります。
2. ウィンドウを普通にクリックすると、ウィンドウは隠れて、表示されていた画像の元リンク付近へ移動します。
3. ウィンドウを[Ctrl]キーを押しながらクリックすると、ウィンドウは隠れて、ページ先頭へ移動します。
4. ウィンドウを[Alt]キーを押しながらクリックすると、ウィンドウが隠れるだけで移動(スクロール)はしません。
5. ウィンドウを[Shift]キーを押しながらクリックすると、その画像が別窓で表示されます。
   このとき、ウィンドウは隠れません。
   
6. 【2007/05/01追記】
   マウスカーソルを一度ウィンドウの外に出した後、[Ctrl]キーを押しながら再度ウィンドウ内に入れると、画像がオリジナルサイズで表示されるようになります。
   もう一度同じ操作を行うことで、縮小サイズに戻ります。
   
7. 【2007/06/23追記】
   [+GIF+HTML]のついたブックマークレットを使った場合、マウスカーソルを一度ウィンドウの外に出した後、[Shift]キーを押しながら再度ウィンドウ内に入れると、リンク先HTML内の最初の一画像以外も続けて表示できるようになります。
   もう一度同じ操作を行うことで、最初の一画像のみの表示に戻ります。
   

■制限について
以下のような制限があります。ご了承の上でご使用願います。

1. 当然ながら、スクリプト(JavaScript)が有効な環境でないと動作しません。
2. 確認したブラウザはSleipnir2.5.12(IEエンジン)、IE6 SP2、Firefox 2.0.0.3、Opera 9.10(全て WinXP SP2上)のみです。それ以外のブラウザでは動作確認していません(し、動作しない可能性が高いです)。
   また、上記ブラウザであっても動作保証は一切ありません。自己責任でお使いください。
3. IE6 SP2では、実行直後に表示されるウィンドウ上では、なぜかマウスホイールが効きません(同じエンジンを使っているはずのSleipnirではOKなんですけれど……)。
   お手数ですが、一旦ウィンドウをクリックして隠し、再度画像リンクをクリックして下さい(これ以降は効きます)。
   なお、ブックマークレットのURLのvar cocoPictPop1st=trueのtrueをfalseに変えておけば、ウィンドウを隠す手順が省略できます。
4. ウィンドウの大きさは最大800×600です。これより縦又は横幅が大きな画像は縮小されます。
   【2007/05/01】元サイズで表示することも出来るようになりました(上記参照)。
5. 画像はJPEG・PNG形式(拡張子*.jpg、*.jpeg、*.png)で、ページ上から直リンクされたもの又はページ上でimg要素として直接表示されているもの(リンクはされていないもの)が対象です
   後者はリンクに変換されます。なお、この条件にあてはまっていても正常に表示されない場合もあります。
6. ウィンドウ内での前後画像への移動はマウスホイールでしか出来ません。
7. フレームを使ったページには対応していません。
   →【2007.06.02】フレーム分解用ブックマークレットを試作してみました。