FCafe  頁内で実寸表示

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

 リンク付きサムネイルを使用すれば、レイアウトの崩壊を懸念する事無く大サイズ画像の閲覧が可能となります。 其処(底)を押さえつつ スクリプトで記事中画像の閲覧性を可及的に高めてやろう。 ・・というのが今回の試みなのですが、サムネイルというものが存在しないblogでは残念ながら役に立ちません。
 元よりFC2blogプロパーな当店ではありますけれども、やはり 「より汎用性のある方法を追求すべきなのか?」 という考えも浮かんだりしている管理人であります。  元画像のタグのみを使用する方法などを試作してみたりもし始めている訳なのですが、でも、もう少し。  ・・あと一つだけ?お付き合いを。
 ファイル管理画面から画像投稿する時に表示されるタグをそのまま貼り付けますと、サムネイルclick時に元画像は『別窓』で表示されますが、これを(貼り付けるタグはそのままで)閲覧中のページに表示させる方法を考えてみました

「え? 元絵を原寸で表示できないからサムネ使うんでしょ?」
・・て、おカミさん。 (人示指を左右に振りつつ) いやいやそうだけどそうじゃないんで。
「火狐の『画像を表示』使えばイイじゃん。 イラネ」
とか仰るそちら様もちょいとお待ち下さいましな。  結構”楽”なんでがすよ、これが。
おまけにミバも中々と来たもんだ。 何か舶来モンにも似たのがあるっていうじゃありませんか。
まあ 騙されたと思って一つ、こいつ↓を御覧になってくださいよ 旦那~

 

SAMPLE


【 設置法 】  設置法・使用法(条件等)は前述したものと変わりません。
スクリプトのみを以下のものと差し替えるだけでOKです

<script type="text/javascript"><!--
var A=document.getElementById('xxx').getElementsByTagName('A');
var Pict=new Array();
var Q=new Array();

function GCon(){
var k=-1;
for(i=0;i<A.length;i++){
 var H=A[i].href; if(H.search(/\/file\/.*\.jpg/)>0){
  var T=A[i].getElementsByTagName('IMG'); if(T.length>0){
   if(T[0].src==H.replace(/\.jpg/,"s.jpg")){
    Pict[i]=new Image(); Pict[i].src=H; k=i;Q[i]=1
} } } }
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;
for(i=0;i<A.length;i++){
  if(Q[i]==1){
    var G=A[i].getElementsByTagName('IMG')[0];
    G.src=Pict[i].src;    A[i].target="_self";
    if(Pict[i].width>300) {
      A[i].href="javascript:LB('"+A[i].href+"')";
      G.style.width="300px";
      G.title=" Show in Full-Size ";
  } else {
      A[i].style.cursor="default";
      A[i].href="javascript:void(0)";
} } } }

function LB(G){;
scroll(0,0);
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 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.style.background='black url("'+G+'") center no-repeat';
P.onclick=function(){RMV(this)}
}

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" }
B.removeChild(k);
}

GCon();
//--></script>
 

【 解 説 】 元画像サイズにより実寸・リサイズ表示の何れかを判断する仕組みは前記事のスクリプトと同じですが、 今回のスクリプトは”大サイズ画像”の別窓リンクをスクリプト関数に書き換えます。  (リサイズされた画像の)リンクをクリックするとそのスクリプトが閲覧中のページを暗幕で隠し 其処に元画像を実寸で表示する、というもの。
画像は黒額縁に嵌められたように頁中央にセンタリング表示されます。
   * 壁紙として表示しますのでモニタサイズ以上の画像は周辺部がケラレます

 サンプル頁のタイトルにもある Lightbox JS は昨年アンチブログさんで知ったのですが、ソースとかは参考にしていません(ムリだし)。   スクリプトの動作原理も多分(かなり)異なるものだと思われます。 ( FLASH風のギミックはありませんが その分表示は早くなってるんじゃないかと )
へたれ管理人は当初、html に背景指定して body 表示を ON / OFF すれば簡単じゃないか? ( "表"に被せるんじゃなくて"裏"に敷く )と思って試してみたのですが、火狐と Opera ではOKだったものの、IE6では何故か表示されませんでした。 (7では試していません。機会があったら改めて挑戦してみるつもり )

・・・それにしても黒縁(背景)とセンタリングだけで写真(携帯ですけど)が映えること。
単なるアドレス参照とは別物のようです。 それでも今一つ(以上)眠たく感じるのは高級キャメラのジャスピン写真に目が慣らされて来てしまった為でしょうか・・・

Comment

けんぱ けんぱ Edit
02/26 20:20

これ、よく見るあれと違って表示が軽くて快適ですねー

daniel daniel Edit
02/26 20:35

けんぱさん こんばんは。 ありがとうございます。
はい。 へたれな私なりに工夫した所もあるんですよ。
( スクロールバーを消す とか )

サムネ・オリジナル両対応のRC版(FC2blog用)も完成済みです。
JUGEM対応バージョンはその次にリリースさせて戴く予定です。
勿論「貼り付けるだけ(個別設定無し)」で動くのが目標です
別窓リンク(Aタグ)のない画像でも何とかなりそう、かも?


.  
HN Title URL PW secret

TrackBack http://pcafe.blog3.fc2.com/tb.php/436-c3b79bb1

Shown after Admisson
.

≫ サムネイルをリサイズ 複数記事頁のみサムネイル ≪

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