FCafe  画像単独で実寸表示

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

 Photoscope をはじめ今までのスクリプトは"Aタグに挟まれた" imgタグに反応するものでした。  しかし、システムが参照リンク付きでタグを吐いてくれるFC2とは異なり、JUGEMなどでは画像タグ単独でしか出力されません。 imgタグの前後にアンカータグを手打ちするのは結構面倒なものです。  Aタグ無し、素の画像タグだけで同じ機能(頁内原寸表示)を実現する事はできないものでしょうか?
 スクリプトoffの場合の実寸参照が難しくなりますが、ページソースが若干簡潔になるのは利点であると解釈できるかもしれません。
・・・という訳で挑戦してみました

 

SAMPLE


【 設置法 】 以下のスクリプトをソース末尾( </body> 手前 ) に貼ります。
<script type="text/javascript"><!--
if(document.getElementsByTagName){
var Pict=new Array();
function GC(){
var A=document.getElementsByTagName('IMG');
var k=0;  for(i=0;i<A.length;i++){
 var H=A[i].src; if(H.search(/\/file\/.*\.jpg/)>0){
  Pict[i]=new Image(); Pict[i].src=H;  k=i;
} } if(k!=-1) {Pict[k].onload=RS}
}

function RS(){
Org=new Array();
Org[0]=document.getElementsByTagName('HTML')[0].style.overflow;
Org[1]=document.getElementsByTagName('BODY')[0].width;
Org[2]=document.getElementsByTagName('BODY')[0].height;
Org[3]=document.getElementsByTagName('BODY')[0].overflow;
var A=document.getElementsByTagName('IMG');
for(i=0;i<A.length;i++){
 if(A[i].src.search(/\/file\/.*\.jpg/)>0){
  if(Pict[i].width>A[i].width) {
   A[i].onclick=function(){ LB(this)}
   A[i].title=" Show in Full-Size ";
   A[i].style.cursor="pointer";
} } } }

function LB(G){
document.getElementsByTagName('HTML')[0].style.overflow="hidden";
var B=document.getElementsByTagName('BODY')[0];
B.style.width="100%";
B.style.height="100%";
B.style.overflow="hidden";
var D=document.getElementsByTagName('DIV');
for(i=0;i<D.length;i++){ D[i].style.display="none"}
var P=document.createElement('div');
B.appendChild(P);
P.innerHTML =" Click to Return";
P.style.margin='0';    P.style.position='absolute';
P.style.top='0';    P.style.left='0';
P.style.width='100%';    P.style.height='100%';
P.style.color='white';    P.onclick=function(){RMV(this)}
P.style.background='black url("'+G.src+'") center no-repeat';
}
function RMV(k){
if(Org[0]!="") {
 document.getElementsByTagName('HTML')[0].style.overflow=Org[0]
} else {
 document.getElementsByTagName('HTML')[0].style.overflow="auto"
}
var B=document.getElementsByTagName('BODY')[0];
if(Org[1]!=undefined){B.style.width=Org[1] }
else{ B.style.width="auto" }
if(Org[2]!=undefined){ B.style.height=Org[2] }
else { B.style.height="auto" }
if(Org[3]!=undefined){B.style.overflow=Org[3] }
else { B.style.overflow="auto" }
var D=document.getElementsByTagName('DIV');
for(i=0;i<D.length;i++){ D[i].style.display="block"}
B.removeChild(k);
}
GC();
}
//--></script>
 
【 使用法 】

 

【 解 説 】  スクリプトはページ( bodyタグ)内の imgタグを調べ、 1)自ブログにアップロードされた 2)JPG画像の内 3)実寸より縮小表示されているものに『頁内実寸表示SW』を貼り付けます。  ( 原寸以上の大きさで表示されている画像には何もしません )
 高精細画像をCSS等で記事領域に収まるようスケーリングして表示するスキルのある管理人さんには使途があるかもしれませんが、 画像自体をカラム適応幅にリサイズしてから投稿しているようなblogではあまり意味がないかもしれません。
また、前述した通り参照リンクの無い素のimgタグですから、スクリプト無効環境では実寸参照が難しくなります。( 恣意的にスクリプトを切っているような閲覧者は Firefox のコンテクストメニューで原画表示させる という手を使うでしょうが )
 まあ 何かの参考になれば。

Comment


.  
HN Title URL PW secret

TrackBack http://pcafe.blog3.fc2.com/tb.php/443-be04b89d

Shown after Admisson
.

≫ Aタグでサムネイル Plugin Photoscope ≪

2007 / 02 / 28  Wed
Entry   
Comment 0 / TB 0 / Edit
Designed by Daniel Corporation . all rights renounced
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。