画像サイト巡回が捗るiPadやiPhoneでも使える画像閲覧用のブックマークレットつくってみたよ
画像の一覧がずらーっと出てるページを、スライドショーっぽくするブックマークレット。普通のブラウザでも使用可。
使い方は最後の方に。
javascript:(function(){var array=Array.prototype.slice.call(document.querySelectorAll('a[href*=".png"],a[href*=".gif"],a[href*=".jpg"],a[href*=".jpeg"],a[href*=".bmp"],'+'a[href*=".PNG"],a[href*=".GIF"],a[href*=".JPG"],a[href*=".JPEG"],a[href*=".BMP"]'));if(array.length>0){while(document.body.attributes.length>0)document.body.removeAttributeNode(document.body.attributes[0]);var strInnerHtml='';document.head.innerHTML='';document.body.innerHTML='<img id=\"viewImg\" src=\"'+array[0].href+'\" style=\"position:absolute;\"><img id=\"viewImg2\" src=\"'+array[0].href+'\" style=\"position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;\">';var imgView=document.getElementById("viewImg");var divView=document.getElementById("viewDiv");var cnt=0;var cnt2=0;document.body.style.backgroundColor="#000000";document.body.onclick=function(event){if(!event)var event=window.event;if(event.x*2<window.innerWidth){cnt -=1;if(cnt<0)cnt=array.length-1;}else{cnt+=1;if(cnt>=array.length)cnt=0;}imgView.src=array[cnt].href;};imgView.onload=function(){imgView.removeAttribute("width");imgView.removeAttribute("height");var rate;if(window.innerWidth/window.innerHeight<imgView.width/imgView.height){rate=window.innerWidth/imgView.width;}else{rate=window.innerHeight/imgView.height;}imgView.width*=rate;document.body.width=window.innerWidth.toString()+"px";document.body.height=window.innerHeight.toString()+"px";imgView.style.left=((window.innerWidth-imgView.width)/2).toString()+"px";imgView.style.top=((window.innerHeight-imgView.height)/2).toString()+"px";};document.getElementById("viewImg2").onload=function(){cnt2+=1;if(cnt2<array.length){document.getElementById("viewImg2").src=array[cnt2].href;}}}else{var tmpArray=document.getElementsByTagName("img");array=new Array(0);for(i=0;i<tmpArray.length;i++){if(tmpArray[i].width* tmpArray[i].height>130000)array.push(tmpArray[i]);}if(array.length>0){while(document.body.attributes.length>0)document.body.removeAttributeNode(document.body.attributes[0]);document.head.innerHTML='';document.body.innerHTML='<img id=\"viewImg\" src=\"'+array[0].src+'\" style=\"position:absolute;\"><img id=\"viewImg2\" src=\"'+array[0].src+'\" style=\"position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;\">';var imgView=document.getElementById("viewImg");var divView=document.getElementById("viewDiv");var cnt=0;document.body.style.backgroundColor="#000000";document.body.onclick=function(event){if(!event)var event=window.event;if(event.x*2<window.innerWidth){cnt -=1;if(cnt<0)cnt=array.length-1;}else{cnt+=1;if(cnt>=array.length)cnt=0;}imgView.src=array[cnt].src;};imgView.onload=function(){imgView.removeAttribute("width");imgView.removeAttribute("height");var rate;if(window.innerWidth/window.innerHeight<imgView.width/imgView.height){rate=window.innerWidth/imgView.width;}else{rate=window.innerHeight/imgView.height;}imgView.width*=rate;document.body.width=window.innerWidth.toString()+"px";document.body.height=window.innerHeight.toString()+"px";imgView.style.left=((window.innerWidth-imgView.width)/2).toString()+"px";imgView.style.top=((window.innerHeight-imgView.height)/2).toString()+"px";};}else{alert("画像がみつからないよ");}}})();
iPadやiPhoneにブックマークレットを設定するには
1.スクリプトをコピーする
2.適当なページをそれっぽい名前でブックマークして、いったん保存する
3.アドレスを1.でコピーした内容に書き換える
以上で完了。
主な機能
・aタグから画像のリンクを探して表示。画像へのリンクがなければ、表示中のimgから取得。
・スライドショーっぽいもの。画面の左半分クリックOrタッチで前の画像、右半分クリックで次の画像。最後のを表示したら次へ。
・画面サイズに合わせたリサイズ（画像を切り替えたタイミングでその時のサイズにぴったり）
・aタグから取得したときは、裏で次の画像を先読み。ブラウザのキャッシュ頼みなのでブラウザによってうまく先読みできないかも。
