FCafe  画像実寸表示別法

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

 当社の記事内画像実寸表示プラグイン「 Photoscope 」 御利用のお客様から御質問を頂きました。

「フレーム内にblogを表示させているが、Photoscope作動時は窓全体に表示させたい」 ・・との事。
Photoscope の動作原理から云ってそれはムリな事なんですが、その旨のお返事を書いている最中に ふとアイデアが浮かんで来ました。  そう、ヒントはお客様の御質問の言葉の中にあったのです。
Photoscope はシステムの吐く投稿用画像タグの元画像へのリンクを 頁内容全てを暗転し元画像の"壁紙"を表示するスクリプトに書き換えます。  それによって別窓を開く事無く(現在のページ内で)目的画像の実寸参照が可能となる訳ですが、その時 同時に行われる target の ”_self”への書き換え(そうしないと別窓が開いてしまう)を、 お客様は ”_top” に修正されたそうなのです。
 確かに blogのあるFRAMEから見れば窓全体は”_top”になる訳ですから、リンク先が元画像のままだったら(センタリング・暗幕効果は得られないものの) 全枠に画像(写真)は表示されるん ・・ ん 、  ん?

 久し振りに訪れた 脳ミソが急激に活性化するあの感覚 。     ( その手があったか~ )
でも(オリジナルと比べると)あまりに簡単な方法なんで不安になって実験してみたりして。
・ ・ ・ はい、OKでした。

sample  


【 方 法 】   下記ソースを適当な名前で HTMLファイルとしてsaveしアップロードします  例: xxx.html
( 以下は記事発表時点でのもので プラグインで用いられているものとは異なります )

<html><head><title>Photoscope</title>
<style type="text/css">
html,body { margin:0; padding:0; color:#FFF; height:100%; overflow:hidden;
 background:#000 center no-repeat; }
img {width:1px; height:1px; }
</style>
</head>
<body id="P" onclick="history.back()">
<script type="text/javascript"><!--
if (location.href.indexOf("?p=")!=-1){
U= location.href.split("?p=")[1] ;
N=U.split("/")[U.split("/").length-1];
document.write('<span id="T">&nbsp; loading . . . </span>');
document.write('<img src="'+U+'">');
window.onload=function(){
 document.title=N;
 document.getElementById("P").style.backgroundImage="url("+U+")";
 document.getElementById("T").innerHTML="&nbsp; Click to Return";
} }
//--></script></body></html>
この色の部分は実寸表示画面の背景色 (この場合は”黒”) になります

以下▼のスクリプトをテンプレートHTMLソースの記事部分以後 ( </body> タグ手前でも可 ) に貼り付けます

<script type="text/javascript"><!--
function setLink(){
 var A=document.getElementsByTagName('A');
 var U="~xxx.html?p=";   var H;   var T;
 for(i=0;i<A.length;i++){
  H=A[i].href; if(H.search(/\.jpg/)>0){
   T=A[i].getElementsByTagName('IMG'); if(T.length>0){
    if(T[0].src.replace(/[s]?\.jpg/,".jpg")==H){
     A[i].title="View !"; A[i].target="_top"; A[i].href=U+A[i].href;
} } } } }
setLink();
//--></script>
この色の部分は前段階でアップしたファイルのURL (当店のファイル▼を使用しても可) です
http://blog-imgs-24.fc2.com/p/c/a/pcafe/photoscope.html
 

【 解 説 】 テンプレートに載せるスクリプトがオリジナルの Photoscope に比べてずっとシンプルになっているのがお分かりいただけますでしょうか。  今回お示しした別法では、オリジナル版のソースの大部分を占めていた画像表示切替の為のコードがすっぱりと欠落しています (存在しません)。     スクリプトが行うのは記事内の画像に付いた参照リンクの書き換え( URLを「画像表示専用ファイル」のURLへ、 targetを”_blank”から”_top”へ ) のみです。

デフォルトの投稿用画像タグは 「元画像(ファイル)そのものを別窓で開く」 ものであり、
オリジナルPhotoscope は頁を移動せず現在頁の内容を隠し 元画像(の壁紙)と切り替えるものでした。
今回の方法は、別窓は開かず 専用ファイルに遷移して元画像を参照し(済んだら)戻って来る。 ・・というものです。
「専用ファイル」 は参照画像のURLをサーチオプションで受け取り、 Photoscope と同様の形で表示し、   頁内の何処かがクリックされると履歴を撒き戻して元のブログページを再び表示します。

 ・・・正に(自分的には)”コロンブスの卵” ・ ”コペルニクス的転回” 。
現在頁要素の表示制御や、実寸参照終了時の「クリック位置復帰」 等の処理が不要になるのみならず、 参照ファイルは自窓 _top に展開されるので、親サイトのフレーム内にblogを表示させている場合も窓枠一杯に画像を実寸表示する事ができるのですから。
・・但し、実寸参照に外部ファイルを用いる為、スクリプトを貼り付けるだけでよいオリジナルPhotoscopeと比較して一手間多く掛かると言えるかもしれません。 (当店のファイルを御使用いただけばOKです)

現在 Photoscope とは別個に共有プラグイン登録済みです

Comment

- - Edit
06/30 01:12

管理人のみ閲覧できます このコメントは管理人のみ閲覧できます

KUMI☆ KUMI☆ Edit
06/30 10:54

お久しぶりです♪
以前のプラグインは廃止して、コチラを使わせていただきますe-460
ありがとうございました。

daniel daniel Edit
06/30 12:04

あ クミフォトさんおひさしぶり。
ま バージョンアップというより完全な「別物」ですので「別名」で登録したのですが
クリック迄・クリック後のレスポンスの差など両者其々特長が異なります。
結構オリジナルにも愛着がありまして。残す事にしました。

何かお気付きの点などありましたら御報せ下さいませ


.  
HN Title URL PW secret

TrackBack http://pcafe.blog3.fc2.com/tb.php/574-c1b04663

Shown after Admisson
Glim. *
どうも~この時間寝起きの有希之武ですw 今回はちょっとイラストじゃなくずっと欲しかったスクリプトの話。 以前から縮小画像をクリック...
.

≫ 画像実寸参照余談 拍手コメント ≪

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