派生バージョン「P」
「Ameblo Lightbox JS」の「ver. 2.7」のアップデートは 2022年3月でした。 もう半年以上経ちました。
さて、この間「PHOTOHITO VIEWER」の制作で、クリックしたポイントを拡大する機能を作り、使い勝手が良いので「Ameblo Lightbox」に還元することにしました。 ただ、「EX拡大」⇄「スクロール拡大」を往復する「Lightbox」の仕様に、「ポイント拡大」の機能を追加する事は不可能ではありませんが、インターフェイスが複雑になります。 ここは、思い切って「EX拡大(ポイント指定)」だけの仕様にした方が、扱い易くなると判断しました。
「スクロール拡大」は、縦長の4コマ漫画などを表示するのに最適な機能です。 これを省きたくないのですが、今回の亜種バージョンの拡大率を「100%」以下に設定すれば「コミック」に使えます。「Ameblo Lightbox P」と本来の「JS」版の、使い易い方を選べる様に、並列の扱いにしようと思います。
「Ameblo Lightbox JS」と「Ameblo Lightbox P」を同時に「ON」にはできませんが、両方を「Tampermonkey」にインストールするのは問題ありません。 また、拡大率等を設定するローカルストレージは共用になります。
「Ameblo Lightbox P」は判り易い
出来上がってみると、「Lightbox表示」⇄「クリックポイントの拡大」の操作は判り易く、このバージョンの方が標準版という気がして来ます。
● 画像を「Lightbox」に表示した後、拡大したい部分を「Ctrl+左Click」すると、指定の拡大率で、クリックした部分を中心の拡大表示になります。
下は、最初の「Lightbox」表示で、拡大部分を「Ctrl+左Click」するところです。
この操作で、「Lightbox」内の画像が、クリックしたポイントを中心に拡大表示されます。 拡大の中心は、実用上で問題のない精度です。
▪ 画像の周辺部をクリックした時は、クリック位置に近い画像端を超えてスクロールが出来ないので、端部からの拡大表示になります。
● 拡大画面の上部にマウスポインタを移動すると、拡大率の設定が出来ます。
▪「Ameblo Lightbox P」の拡大は「EX拡大」のみで、「20% ~ 400%」の範囲で拡大率を指定できます。
▪「100%」以下の場合は、画像は「Lightbox」の上部中央に表示されます。
この表示設定は「4コマ漫画」などの表示に適しています。
クリックポイントの拡大コード
クリックポイントを中心にした拡大表示をする際に、必要なスクロール量を計算するには、「Lightbox」のアスペクト比と、拡大対象の画像のアスペクト比の両方の兼ね合いで、2つの場合に分けた計算が必要です。
以下は、画像の横幅/縦幅がボックスの横幅/縦幅より大きい場合(ウインドウに対して横長の画像)の場合の計算です。
x軸方向のスクロール量
中央のグレー枠を伴った矩形が、ボックス内に表示された画像で、外側の大きな矩形は拡大表示後の画像のサイズを表しています。
ww:「Lightbox」の横幅(=ウインドウの横幅)
wh:「Lightbox」の縦幅(=ウインドウの縦幅)
計算の基本は以下です。
❷ 拡大後の画像のサイズが与えられれば、❶の比から左端・上端からの拡大像上のクリックポイントの位置が計算できます。 後は、その位置をウインドウ中央に表示するためのスクロール量を計算する。
上図で、先ず「横方向」(x軸方向)のスクロール量を求めます。
❶「t.left / t.ww」を必要な比ですが、画像の周囲に余白部(左右に2%ずつ)があります。 この余白部の誤差を無視しても実際上問題なく、「left / ww」の比で代用します。
left:ウインドウのクリックポイントの座標(x値)
❷ 画像の拡大率「Z」とすると、
拡大後の画像の横幅: ww × Z
拡大画像のクリックポイントの左端からの距離: s.left
とすると「s.left」と「ww × Z」の比は、❶ の「left / ww」と同じでなければならないので、「s.left」は下の様に求まります。
s.left =(ww × Z) × left / ww
s.left =left × Z
必要スクロール量「actal_x」は、ウインドウ横幅の1/2だけ少なくて良いので。
actal_x =(left × Z) - ww / 2
y軸方向のスクロール量
これは、x軸方向より複雑です。
❶ 「t.top / t.wh」を求めたいのですが、画像の周囲に余白部(上下に2%ずつ)があります。 この枠を無視して計算しても実際上問題ないので、「e.top / e.wh」で代用します。
top:ウインドウのクリックポイントの座標(y値)
R(アスペクト比): 画像の 横幅/縦幅
e.wh: ww / R
e: Lightbox の余白部
e = (wh - e.wh)/2
e.top = top - e = top - (wh - e.wh) / 2
以上から、必要な「e.top / e.wh」が求まります
e.top / e.wh = ( top - (wh - e.wh) / 2 ) / e.wh
= ( top - (wh - ww / R ) / 2 ) R / ww
❷ 画像の拡大率「Z」とすると、
拡大後の画像の横幅: ww × Z
拡大後の画像の縦幅: ww × Z / R
拡大画像のクリックポイントの上端からの距離: s.top
s.top = (ww × Z / R) × (top - (wh - ww / R) / 2) R / ww
= (top - (wh - ww / R) / 2) × Z
必要スクロール量「actal_y」は、ウインドウ縦幅の1/2だけ少なくて良いので
actal_y = (top - (wh - ww / R) / 2) × Z - wh / 2
= (2×top - wh + ww / R) × Z / 2 - wh / 2
クリックポイントにスクロールする関数
以上の計算コードは半分で、縦長の画像の場合の計算コードが必要です。 計算方法は同様で、ここでは省略します。 この計算に色々な値(変数)が出て来ますが、計算の元になる値は JavaScriptで比較的簡単に取得できます。
以下は、「Ameblo Lightbox JS P」に実装したこの計算をコード化したものです。
「graphic_w」は、前項の「Z×100」に相当します。
「ratio」は、前項の「R」に相当します。
「Ameblo Lightbox P」の扱い方
「Ameblo Lightbox P」の基本操作は、以下のページのマニュアルを参照ください。
「Ameblo Lightbox P」を使用するには
「Ameblo Lightbox P」は Chrome/Edge/Firefox の拡張機能「Tampermonkey」上で動作します。
❶「Tampermonkey」を導入します
◎ 使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。
既に「Tampermonkey」を導入している場合は、この手順 ❶ は不要です。
拡張機能の導入については、以下のページに簡単な説明があるので参照ください。
❷「Tampermonkey」にスクリプトを登録します
◎「Tampermonkey」の「+」マークの「新規スクリプト」タブを開きます。
◎「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠に 下のコードをコピー&ペーストします。
〔コピー方法〕 軽量シンプルなツール「PreBox Button 」を使うと
コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」
の操作で、掲載コードのコピーが可能になります。
◎ 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。
◎ 複数の「Ameblo Lightbox」のバージョンを「Tampermonkey」に登録する事は問題ありませんが、ONとするのは1つに限ります。 複数を同時にONとすると正常な動作が保証されません。
〔 Ameblo Lightbox P 〕 ver. 2.7
// ==UserScript== // @name Ameblo Lightbox P // @namespace http://tampermonkey.net/ // @version 2.7 // @description ブログ掲載画像の高精細な暗転拡大表示 // @author Ameba Blog User // @match https://ameblo.jp/* // @match https://secret.ameba.jp/* // @match https://news.ameba.jp/* // @match https://blogger.ameba.jp/* // @match https://blogtag.ameba.jp/* // @noframes // @grant none // ==/UserScript== let disp_mode=0; // 拡張ディスプレイモードの判別 let back_color; // Lightbox背景色 let graphic_w; // EX拡大の拡大率 let zstep=0; // スクロール拡大モード選択 Comic・Graphic let with_cact; // ブログ画面でのLightboxの起動方法 let e_free=0; // ドラッグコピーの許可・不許可 let step=0; // 動作の段階 let c_press=false; // Ctrlキー押下フラグ let html_=document.querySelector('html'); let target=document.querySelector('body'); let monitor=new MutationObserver(catch_photo); monitor.observe(target, { childList: true, subtree: true }); catch_photo(); function catch_photo(){ monitor.disconnect(); box_env0(); // Lightbox 基本のパーツ生成 box_env1(); // Lightbox 各種コントロール設定 let page_img=document.querySelectorAll('img'); for(let k=0; k<page_img.length; k++){ if(page_img[k].parentNode.tagName=='A'){ page_img[k].parentNode.style.opacity='1'; } // フォバーの薄化表示を無効化 let style=window.getComputedStyle(page_img[k]); if(style.getPropertyValue('pointer-events')=='none'){ page_img[k].style.pointerEvents='auto'; }} // クリック防止指定を無効化 monitor.observe(target, { childList: true, subtree: true }); let path=location.pathname; // 現在のパス名 let host=window.location.hostname; // 現在のホスト名(サブドメインを含む) if(path.split('/').slice(-1)[0].startsWith('image')){ // ⬜ 画像一覧画面 let page_img=document.querySelectorAll('img'); for(let k=0; k<page_img.length; k++){ page_img[k].addEventListener('mousedown', function(event){ event.stopImmediatePropagation(); light_box(event, 1, page_img[k]); }); }} else{ if(host=='ameblo.jp' || host=='secret.ameba.jp'){ // ⬜ ブログ・アメンバー let page_img; if(with_cact==0){ page_img=document.querySelectorAll('img'); } else{ if(host=='ameblo.jp'){ page_img=document.querySelectorAll('#entryBody img'); } if(host=='secret.ameba.jp'){ page_img=document.querySelectorAll('.skin-entryBody img'); }} for(let k=0; k<page_img.length; k++){ page_img[k].addEventListener('mousedown', function(event){ event.stopImmediatePropagation(); light_box(event, 0, page_img[k]); }); }} else if(host=='news.ameba.jp' || host=='blogger.ameba.jp' || host=='blogtag.ameba.jp'){ // ⬜ ニュース・ブログランキング・ハッシュタグ let page_img=document.querySelectorAll('img'); for(let k=0; k<page_img.length; k++){ page_img[k].addEventListener('mousedown', function(event){ event.stopImmediatePropagation(); light_box(event, 2, page_img[k]); }); }}} function light_box(event, type, img){ if(e_free==0){ event.preventDefault(); // 操作性に重要な影響有り 画像ドラッグも不可にする if(type==0){ // ブログページ用 if((event.ctrlKey==true && with_cact==0) || (event.shiftKey==false && event.ctrlKey==false && with_cact==1)){ step=1; box_env2(img, 1); ac_disp(1); set_img(img); close(); }} if(type==1){ // 画像一覧画面用 if(event.ctrlKey==true){ step=1; box_env2(img, 0); ac_disp(0); set_img(img); close(); }} if(type==2){ // その他の 一般ページ用 if(event.ctrlKey==true){ step=1; box_env2(img, 1); ac_disp(0); set_img(img); close(); }}}} let img_frame=document.querySelector('._3-g1Ourp ._2F4CsxZ2'); if(img_frame){ img_frame.onclick=function(event){ event.stopImmediatePropagation(); history.back(); } } // 画像一覧の画像表示枠のクリックで遷移元画面に path=location.pathname; // 現在のパス名 if(path.split('/').slice(-1)[0]=='imagelist.html'){ // 画像リストページでのみ setTimeout(()=>{ if(document.querySelector('._3EX8xkUG ._3tinH7Ew') && !document.querySelector('._2z3jgBXG')){ location.reload(); }}, 2000); } // 2sec待っても画像リストが取得できない時はリロード let copy_flag=document.querySelector('#copy_flag'); if(copy_flag){ copy_flag.onclick=function(event){ event.stopImmediatePropagation(); copy_flag_disp(0); }} } // catch_photo() function box_env0(){ let body=document.querySelector('body'); let css= '<style id="light_style">'+ '@keyframes fadeIn { 0% {opacity: 0} 100% {opacity: 1}} '+ '.fin { animation: fadeIn .5s ease 0s 1 normal; animation-fill-mode: both; } '+ '@keyframes fadeOut { 0% {opacity: 1} 100% {opacity: 0}} '+ '.fout { animation: fadeOut .2s ease 0s 1 normal; animation-fill-mode: both; } '+ '#lightbox { position: fixed; top: 0; left: 0; z-index: 3000; visibility: hidden; '+ 'background: black; width: 100vw; height: 100vh; text-align: center; } '+ '#photo_sw { position: fixed; width: 100%; height: 15%; } '+ '#photo_sw:hover #photo_link { opacity: 1; } '+ '#photo_link { position: absolute; top: 24px; left: 30px; height: 30px; '+ 'text-decoration: none; font: bold 21px Meiryo; padding: 3px 12px 0; '+ 'color: #000; background: #fff; border: 2px solid #000; border-radius: 6px; '+ 'cursor: pointer; opacity: 0; } '+ '#lbox_help { position: absolute; top: 24px; left: 32px; width: 24px; height: 24px; '+ 'font: bold 24px/29px Meiryo; color: #000; background: #fff; '+ 'border: 2px solid #000; border-radius: 30px; cursor: pointer; opacity: 0; } '+ '#photo_sw:hover #lbox_help { opacity: 1; } '+ '#photo_link svg, #copy_flag svg { width: 28px; fill: currentColor; } '+ '#photo_link svg.a { height: 24px; vertical-align: -4px; } '+ '#photo_link svg.b, #copy_flag svg.d { height: 22px; vertical-align: -3px; } '+ '#photo_link svg.b { fill: red; } '+ '#photo_link svg.c { height: 24px; vertical-align: -4px; fill: #bbb; } '+ '#photo_sw:hover .bc { opacity: 1; } '+ '.bc { position: absolute; top: 24px; right: 30px; height: 24px; overflow: hidden; '+ 'font: bold 22px/26px Meiryo; border-radius: 4px; cursor: pointer; opacity: 0; '+ 'margin: 0; box-sizing: content-box; } '+ '#ws { right: 230px; line-height: 28px; padding: 0 5px; } '+ '#wp { right: 195px; } '+ '#wm { right: 165px; } '+ '#ac { right: 75px; line-height: 28px; padding: 0 5px; } '+ '#box_img { width: 96vw; height: 96vh; padding: 2vh 2vw; object-fit: contain; } '+ '#copy_flag { position: fixed; top: 24px; left: 30px; height: 30px; width: 194px; '+ 'padding: 3px 12px 0; color: #fff; background: #2196f3; font: bold 21px Meiryo; '+ 'border: 2px solid #bbdefb; border-radius: 6px; z-index: 3001; display: none; }'+ '</style>'; if(!body.querySelector('#light_style')){ body.insertAdjacentHTML('beforeend', css); } let svg_bow= '<svg width="24" height="24" viewBox="0 0 512 512">'+ '<path style="fill:#fff" d="M0 0L0 510C34 485 63 448 92 419C100 411 109 '+ '403 117 394C120 392 123 386 127 385C131 384 136 390 138 392C147 400 '+ '157 407 168 414C199 429 233 436 268 433C379 423 453 305 414 200C406 '+ '178 393 152 374 138L468 44C481 31 502 16 511 0L0 0z"/>'+ '<path style="fill:#000" d="M511 0C499 17 481 30 466 45L374 137C397 168 '+ '417 195 423 234C437 330 365 426 266 433C232 435 199 428 169 413C158 '+ '407 148 400 139 392C136 390 132 384 127 385C124 385 120 391 118 '+ '393C110 400 102 408 95 415L30 480C20 490 6 500 0 512L512 512L512 '+ '153L512 47C512 33 516 13 511 0M128 382C158 360 184 327 210 301L373 '+ '138C361 121 337 108 318 100C256 75 184 87 134 132C62 197 60 314 128 '+ '382z"/></svg>'; let box= '<div id="lightbox">'+ '<div id="photo_sw">'+ '<p id="lbox_help">?</p>'+ '<a id="photo_link"></a>'+ '<p id="ac" class="bc"></p>'+ '<p id="ws" class="bc"></p>'+ '<p id="wp" class="bc">+</p>'+ '<p id="wm" class="bc">-</p>'+ '<p id="bow" class="bc">'+svg_bow+'</p></div>'+ '<img id="box_img"></div>'; if(!body.querySelector('#lightbox')){ body.insertAdjacentHTML('beforeend', box); } let copy_flag= '<div id="copy_flag">'+ '<svg class="d" viewBox="0 0 512 512">'+ '<path d="M464 0c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 '+ '48H176c-26.51 0-48-21.49-48-48V48c0-26.51 21.49-48 48-48h288M176 '+ '416c-44.112 0-80-35.888-80-80V128H48c-26.51 0-48 21.49-48 48v288c0 '+ '26.51 21.49 48 48 48h288c26.51 0 48-21.49 48-48v-48H176z">'+ '</path></svg> Copy Mode</div>'; if(!body.querySelector('#copy_flag')){ body.insertAdjacentHTML('beforeend', copy_flag); } } // box_env0() function box_env1(){ with_cact=get_localst('Lightbox_cact'); if(with_cact!=0 && with_cact!=1){ with_cact=0; } localStorage.setItem('Lightbox_cact', with_cact); // Storage更新 back_color=get_localst('Lightbox_back'); if(back_color!='black' && back_color!='white'){ back_color='black'; } localStorage.setItem('Lightbox_back', back_color); // Storage更新 graphic_w=get_localst('Lightbox_graphic_w'); if(!graphic_w || isNaN(graphic_w) || graphic_w<20 || graphic_w>400){ graphic_w=200; } localStorage.setItem('Lightbox_graphic_w', graphic_w); // Storage更新 ctrl_act(); b_or_w(); icon_color(); disp_wpm(disp_mode); help(); } // box_env1() function ctrl_act(){ let ac=document.querySelector('#ac'); if(ac){ if(with_cact==0){ ac.textContent='Ctrl+'; } else{ ac.textContent='Click'; } ac.onclick=function(event){ event.stopImmediatePropagation(); if(with_cact==0){ with_cact=1; ac.textContent='Click'; } else{ with_cact=0; ac.textContent='Ctrl+'; } localStorage.setItem('Lightbox_cact', with_cact); // Storage更新 location.reload(); }}} function b_or_w(){ let lightbox=document.querySelector('#lightbox'); lightbox.style.background=back_color; // 背景色をCookieから指定 let bow=document.querySelector('#bow'); if(bow){ bow.onclick=function(event){ event.stopImmediatePropagation(); if(lightbox.style.backgroundColor!='white'){ lightbox.style.backgroundColor='white'; back_color='white'; } else{ lightbox.style.backgroundColor='black'; back_color='black'; } icon_color(); localStorage.setItem('Lightbox_back', back_color); }}} // Storage更新 function icon_color(){ let bc=document.querySelectorAll('#photo_sw .bc'); for(let k=0; k<bc.length; k++){ if(back_color=='black'){ bc[k].style.color='white'; bc[k].style.background='#000'; bc[k].style.border='2px solid #fff'; } else{ bc[k].style.color='black'; bc[k].style.background='#fff'; bc[k].style.border='2px solid #000'; }}} function disp_wpm(n){ let wp=document.querySelector('#wp'); if(wp){ if(n==0){ wp.style.visibility='hidden'; } else{ wp.style.visibility='visible'; }} let wm=document.querySelector('#wm'); if(wm){ if(n==0){ wm.style.visibility='hidden'; } else{ wm.style.visibility='visible'; }} let ws=document.querySelector('#ws'); if(ws){ if(n==0){ ws.style.visibility='hidden'; } else{ ws.style.visibility='visible'; }}} function help(){ let lbox_help=document.querySelector('#lbox_help'); if(lbox_help){ lbox_help.onclick=function(event){ event.stopImmediatePropagation(); window.open('https://ameblo.jp/personwritep/entry-12701080409.html#manual', null, 'width=820,height=800'); }}} function zoom_set(zstep){ let ws=document.querySelector('#ws'); let wp=document.querySelector('#wp'); let wm=document.querySelector('#wm'); if(ws && wp && wm){ if(zstep==0){ ws.textContent='Gz '+ graphic_w; } wp.onclick=function(event){ event.stopImmediatePropagation(); if(zstep==0){ if(graphic_w<391){ graphic_w=Number(graphic_w) +10; let box_img=document.querySelector('#box_img'); if(box_img){ box_img.style.width=graphic_w +'vw'; trim(); } ws.textContent='Gz '+ graphic_w; localStorage.setItem('Lightbox_graphic_w', graphic_w); }} } // Storage更新 wm.onclick=function(event){ event.stopImmediatePropagation(); if(zstep==0){ if(graphic_w>29){ graphic_w=Number(graphic_w) -10; let box_img=document.querySelector('#box_img'); if(box_img){ box_img.style.width=graphic_w +'vw'; trim(); } ws.textContent='Gz '+ graphic_w; localStorage.setItem('Lightbox_graphic_w', graphic_w); }} // Storage更新 } // Storage更新 function trim(){ let lightbox=document.querySelector('#lightbox'); let box_img=document.querySelector('#box_img'); let i_width=box_img.naturalWidth; let i_height=box_img.naturalHeight; let w_width= window.innerWidth; let w_height= window.innerHeight; let view_w=w_width*graphic_w/100; lightbox.scrollTo((view_w - w_width)/2, ((view_w*i_height)/i_width - w_height)/2); } }} // zoom_set() function get_localst(name){ if(!localStorage.getItem(name)){ return 0; } else{ return localStorage.getItem(name); }} function box_env2(target_img, cont){ // リンクボタンの表示 let photo_link=document.querySelector('#photo_link'); if(photo_link){ let link=target_img.closest('A'); if(link && cont==1){ if(link.classList.contains('detailOn')){ photo_link.innerHTML= '<svg class="a" viewBox="0 0 512 512">'+ '<path d="M512 144v288c0 26.5-21.5 48-48 48H48c-26.5 '+ '0-48-21.5-48-48V144c0-26.5 21.5-48 48-48h88l12.3-32.9c7-18.7 '+ '24.9-31.1 44.9-31.1h125.5c20 0 37.9 12.4 44.9 31.1L376 96h88c26.5 '+ '0 48 21.5 48 48zM376 288c0-66.2-53.8-120-120-120s-120 53.8-120 '+ '120 53.8 120 120 120 120-53.8 120-120zm-32 0c0 48.5-39.5 88-88 '+ '88s-88-39.5-88-88 39.5-88 88-88 88 39.5 88 88z"></path></svg>'+ ' Photo Storage'; } else{ photo_link.innerHTML= '<svg class="b" viewBox="0 0 512 512">'+ '<path d="M327 185c60 60 59 156.7.36 215-.11.12-.24.25-.36.37l-67 '+ '67c-59 59-156 59-215 0-59-59-59-156 0-215l37-37c10-10 27-3 27 '+ '10.6.6 18 4 36 10 53 2 5.8.6 12-4 17l-13 13c-28 28-29 74-1 102 28 '+ '29 74 29 102.3.5l67-67c28-28 28-74 0-102-4-4-7-7-10-9a16 16 0 0 '+ '1-7-13c-0-11 3-21 12-30l21-21c6-6 14-6 21-2a152 152 0 0 1 21 '+ '17zM468 44c-59-59-156-59-215 0l-67 67c-.1.1-.3.3-.4.4-59 59-59 '+ '154.8.4 215a152 152 0 0 0 21 17c6 4 15 4 21-2l21-21c8-8 12-19 '+ '12-30a16 16 0 0 0-7-13c-3-2-7-5-10-9-28-28-28-74 0-101l67-67c28-28 '+ '74-28 102.3.5 28 28 27 74-1 102l-13 13c-4 4-6 11-4 17 6 17 9 35 10 '+ '52.7.5 14 17 20 27 11l37-37c59-59 59-155.7.0-215z"></path></svg>'+ ' Linked Page'; } photo_link.setAttribute('href', link.getAttribute('href')); // リンクのコピー photo_link.style.visibility='visible'; } else if(!link && cont==1){ // 画像ストレージのリンクが無いユーザー画像の場合 let image_src=target_img.getAttribute('src'); if(image_src.startsWith('https://stat.ameba.jp/user_images')){ let entry_id=target_img.getAttribute('data-entry-id'); let image_id=target_img.getAttribute('data-image-id'); let entry=document.querySelector('.js-entryWrapper'); if(entry){ let ameba_id=entry.getAttribute('data-unique-ameba-id'); let link_href='https://ameblo.jp/'+ ameba_id +'/image-'+entry_id +'-'+ image_id +'.html'; photo_link.innerHTML= '<svg class="c" viewBox="0 0 512 512">'+ '<path d="M512 144v288c0 26.5-21.5 48-48 48H48c-26.5 '+ '0-48-21.5-48-48V144c0-26.5 21.5-48 48-48h88l12.3-32.9c7-18.7 '+ '24.9-31.1 44.9-31.1h125.5c20 0 37.9 12.4 44.9 31.1L376 96h88c26.5 '+ '0 48 21.5 48 48zM376 288c0-66.2-53.8-120-120-120s-120 53.8-120 '+ '120 53.8 120 120 120 120-53.8 120-120zm-32 0c0 48.5-39.5 88-88 '+ '88s-88-39.5-88-88 39.5-88 88-88 88 39.5 88 88z"></path></svg>'+ ' Photo Storage Presumed'; photo_link.setAttribute('href', link_href); // 画像から得たリンクの設定 photo_link.style.visibility='visible'; }} else{ photo_link.style.visibility='hidden'; }} else{ photo_link.style.visibility='hidden'; } photo_link.onclick=function(event){ event.stopImmediatePropagation(); }}} function ac_disp(n){ let ac=document.querySelector('#ac'); let ws=document.querySelector('#ws'); let wp=document.querySelector('#wp'); let wm=document.querySelector('#wm'); if(ac){ if(n==0){ ac.style.visibility='hidden'; ws.style.right='135px'; wp.style.right='100px'; wm.style.right='70px'; } else{ ac.style.visibility='visible'; ws.style.right='230px'; wp.style.right='195px'; wm.style.right='165px'; }}} function set_img(target_img){ let lightbox=document.querySelector('#lightbox'); let box_img=lightbox.querySelector('#box_img'); let img_src=target_img.getAttribute('src'); let img_url; if(img_src.indexOf('?caw=')!==-1){ img_url=img_src.split('?caw=')[0]; } else if(img_src.indexOf('?cat=')!==-1){ img_url=img_src.split('?cat=')[0]; } else { img_url=img_src; } if(lightbox && img_url!=''){ html_.style.overflow='hidden'; box_img.src=img_url; lightbox.style.visibility='visible'; zoom_reset(lightbox); lightbox.classList.remove('fout'); lightbox.classList.add('fin'); }} function zoom_reset(l_box){ let body=document.querySelector('body'); let zoom_f=window.getComputedStyle(body).getPropertyValue('zoom'); if(zoom_f || zoom_f!=1){ // bodyで拡大ツールによるのzoom指定がある場合 l_box.style.zoom=1/zoom_f; }} function close(){ step=2; let html_=document.querySelector('html'); let lightbox=document.querySelector('#lightbox'); let box_img=lightbox.querySelector('#box_img'); if(lightbox){ lightbox.onclick=function(event){ // 拡張ディスプレイモード event.preventDefault(); hide_photo_link(); // 画像一覧へのリンクを無効化 let i_width=box_img.naturalWidth; let i_height=box_img.naturalHeight; let w_width= window.innerWidth; let w_height= window.innerHeight; if(!event.ctrlKey){ // 元の表示に戻る zstep=0; step=0; copy_flag_disp(0); html_.style.overflow='inherit'; lightbox.classList.remove('fin'); lightbox.classList.add('fout'); lightbox.style.overflow='hidden'; // overflowのリセット box_img.style.height='96vh'; box_img.style.width='96vw'; box_img.style.padding='2vh 2vw'; setTimeout(()=>{ lightbox.style.visibility='hidden'; box_img.src=''; }, 200); disp_mode=0; // 拡張ディスプレイモード リセット disp_wpm(disp_mode); } if(event.ctrlKey){ step=3; zoom_set(zstep); ex_mode(event); } function ex_mode(event){ if(zstep==0){ disp_mode=1; // 拡張ディスプレイモード disp_wpm(disp_mode); lightbox.style.overflow='auto'; box_img.style.height='auto'; box_img.style.width=graphic_w +'vw'; box_img.style.padding='1vh 1vw'; mag_point(event); zstep=1; } else{ disp_mode=0; // 拡張ディスプレイモード リセット disp_wpm(disp_mode); lightbox.style.overflow='hidden'; box_img.style.height='96vh'; box_img.style.width='96vw'; box_img.style.padding='2vh 2vw'; zstep=0; } } // ex_mode function mag_point(event){ let lightbox=document.querySelector('#lightbox'); let box_img=lightbox.querySelector('#box_img'); let actal_x; // Actual Pixels表示スクロールx値 let actal_y; // Actual Pixels表示スクロールy値 let nwidth=box_img.naturalWidth; let nhight=box_img.naturalHeight; let ratio=nwidth/nhight let top=event.offsetY; let left=event.offsetX; let ww=lightbox.clientWidth; let wh=lightbox.clientHeight; if(ww<wh*ratio){ actal_x=(left*graphic_w/100) - ww/2; actal_y=(2*top - wh + ww/ratio)*graphic_w/200 - wh/2; } else{ let zk=((2*left - ww)/wh/ratio + 1)/2; actal_x=(zk*graphic_w -50)*ww/100; actal_y=(top*ww*graphic_w)/(wh*ratio*100) - wh/2; } lightbox.scrollTo(actal_x, actal_y); } }}} // close() function hide_photo_link(){ let photo_link=document.querySelector('#photo_link'); if(photo_link){ photo_link.style.visibility='hidden'; }} window.addEventListener('keyup', function(event){ // キー入力を感知 if(event.keyCode=='44'){ if(step>0){ if(e_free==0){ // 画像ドラッグを可能にする copy_flag_disp(1); } else{ copy_flag_disp(0); }}} if(event.keyCode=='27'){ copy_flag_disp(0); }}); function copy_flag_disp(n){ let copy_flag=document.querySelector('#copy_flag'); if(copy_flag && n==0){ e_free=0; copy_flag.style.display='none'; } if(copy_flag && n==1){ e_free=1; copy_flag.style.display='block'; }} function key_press(event){ c_press=event.ctrlKey; } // Ctrlキー押下の true false を取得 document.addEventListener("keyup", key_press, {passive: false}); document.addEventListener("keydown", key_press, {passive: false}); function weel_idle(event){ if(c_press && step>0){ event.preventDefault(); }} window.addEventListener("mousewheel", weel_idle, {passive: false}); window.addEventListener("wheel", weel_idle, {passive: false});
「Ameblo Lightbox JS」最新版について
旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。
●「Ameblo Lightbox JS」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。