「Index of」ページの画像を表示するブックマークレット

本当は「Index of」専用というわけではなく、ページ内でリンクされている画像を表示するブックマークレットです。
javascript:(function(){var d=document;var a=d.getElementsByTagName('a');var s='<h2>Image List of '+d.location.href+'</h2>'+'<div onclick="this.parentNode.parentNode.removeChild(this.parentNode)" style="border:black solid 2px;font-weight:bold;width:1em;margin-left:auto">×</div>';for(var i=0;i<a.length;i++){if(/jpe?g$|gif$/.test(a[i].href)){s+='<img src="'+a[i].href+'" style="margin:5px;">';}}var b=d.createElement('div');with(b.style){background='white';position='absolute';width='90%';top='10px';left='5%';border='black solid 2px';padding='5px';}b.innerHTML=s;d.body.appendChild(b);})()
IE6 では長さ制限があるのでこのままでは動かせませんが、例えば「閉じるボタン」の記述をはずすと動かせます。(IE7ではどうなのかな？)

100*100 のサムネール表示にしてみました。
javascript:(function(){var d=document;var a=d.getElementsByTagName('a');var s='<h2>Image List of '+d.location.href+'</h2>'+'<div onclick="this.parentNode.parentNode.removeChild(this.parentNode)" style="border:black solid 2px;font-weight:bold;width:1em;margin-left:auto">×</div>';for(var i=0;i<a.length;i++){if(/jpe?g$|gif$/.test(a[i].href)){s+='<img src="'+a[i].href+'" style="margin:5px;width:100px;height:100px;border:white solid 2px;" '+'onmouseover="this.style.borderColor=\'purple\'" ' +'onmouseout="this.style.borderColor=\'white\'" ' +'onclick="window.open(this.src,\'_blank\')" ' +'>';}}var b=d.createElement('div');with(b.style){background='white';position='absolute';width='90%';top='10px';left='5%';border='black solid 2px';padding='5px';}b.innerHTML=s;d.body.appendChild(b);})()
しかしこれ Opera だと結構重たい。FireFox は問題なし。Opera はスクロール毎に画像の拡大・縮小やってんのかな？

Opera で使えないのはイヤだったのでページあたりの画像数を制限してみた。
javascript:(function(){ var IL=function(id,opt){ this.id=id||'IL_XXX'; var o=opt||{}; this.p=o.p||10; this.ext=o.ext||['jpg','gif']; this._base(); this.n=0; this.show(); }; IL.prototype={ _base:function(){ var a=document.getElementsByTagName('a'); var e=this.ext; var l=new Array(); for(var i=0;i<a.length;i++){ for(var j=0;j<e.length;j++){ if(new RegExp('\\.'+e[j]+'$').test(a[i].href)){ l.push(a[i].href);break; } } } this.l=l; }, show:function(){ var d=document; var b=d.getElementById(this.id); if(!b) { b=d.createElement('div'); b.id=this.id; with(b.style){ background='white'; position='absolute'; width='90%'; top='10px'; left='5%'; border='black solid 2px'; padding='5px'; } d.body.appendChild(b); var self=this; b.onclick=function(){setTimeout(function(){self._re()},0);}; } b.innerHTML=''; var h='<h2>Image List of '+location.href+'</h2>'; h+='<div onclick="this.parentNode.parentNode.removeChild(this.parentNode)" style="border:black solid 2px;font-weight:bold;width:1em;float:right">×</div>'; if( (this.p*(this.n+1) )<this.l.length){ h+='<div onclick="location.hash='+(this.n+1)+';" style="border:black solid 2px;font-weight:bold;width:1em;float:right">＞</div>'; } if(this.n>0){ h+='<div onclick="location.hash='+(this.n-1)+';" style="border:black solid 2px;font-weight:bold;width:1em;float:right">＜</div>'; } h+='<br style="clear:both">'; var l=this.l; for(var i=(this.p*this.n);i<l.length;i++){ if(i>=(this.p*(this.n+1)))break; h+='<img src="'+l[i]+'" style="margin:5px;width:200px;height:200px;border:white solid 2px;" '+ 'onmouseover="this.style.borderColor=\'purple\'" '+ 'onmouseout="this.style.borderColor=\'white\'" '+ 'onclick="window.open(this.src,\'_blank\')" '+ '>'; } setTimeout(function(){b.innerHTML=h;},0); }, _re:function(){ var n=0; if(location.hash){ n=parseInt(location.hash.replace(/^#/,""),10); } if(this.n!=n){ this.n=n; this.show(); } } }; new IL('hogehoge',{p:8,ext:['jpg','png']}); })()
location.hash にページ番号を持たせて、onlick で再描画しています*1。ブラウザの「戻る」・「進む」のイベントが取れるともう少し便利なんですが、できないっぽいですね。
ライブラリっぽく仕上げてるので、いろいろ応用が効くかもです。

*1:location.hash のアイデアは http://la.ma.la/blog/diary_200502270128.htm です。全体的に mala リスペクトでお送りしています。