当社の記事内画像実寸表示プラグイン「 Photoscope 」 御利用のお客様から御質問を頂きました。
「フレーム内にblogを表示させているが、Photoscope作動時は窓全体に表示させたい」 ・・との事。
Photoscope の動作原理から云ってそれはムリな事なんですが、その旨のお返事を書いている最中に ふとアイデアが浮かんで来ました。 そう、ヒントはお客様の御質問の言葉の中にあったのです。
Photoscope はシステムの吐く投稿用画像タグの元画像へのリンクを 頁内容全てを暗転し元画像の"壁紙"を表示するスクリプトに書き換えます。 それによって別窓を開く事無く（現在のページ内で）目的画像の実寸参照が可能となる訳ですが、その時 同時に行われる target の ”_self”への書き換え（そうしないと別窓が開いてしまう）を、 お客様は ”_top” に修正されたそうなのです。
確かに blogのあるFRAMEから見れば窓全体は”_top”になる訳ですから、リンク先が元画像のままだったら（センタリング・暗幕効果は得られないものの） 全枠に画像（写真）は表示されるん ・・ ん 、 ん？
久し振りに訪れた 脳ミソが急激に活性化するあの感覚 。 （ その手があったか～ ）
でも（オリジナルと比べると）あまりに簡単な方法なんで不安になって実験してみたりして。
・ ・ ・ はい、ＯＫでした。
【 方 法 】
下記ソースを適当な名前で HTMLファイルとしてsaveしアップロードします 例： xxx.htmｌ
（ 以下は記事発表時点でのもので プラグインで用いられているものとは異なります ）
<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"> loading . . . </span>');
document.write('<img src="'+U+'">');
window.onload=function(){
document.title=N;
document.getElementById("P").style.backgroundImage="url("+U+")";
document.getElementById("T").innerHTML=" 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>
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です）
Comment
|
★
-
-
Edit 06/30 01:12 |
管理人のみ閲覧できます このコメントは管理人のみ閲覧できます |
|
★
KUMI☆
KUMI☆
Edit 06/30 10:54 |
お久しぶりです♪
|
|
★
daniel
daniel
Edit 06/30 12:04 |
あ クミフォトさんおひさしぶり。
|
