「Lightbox」から「EX拡大」「スクロール拡大」に入ると、スクロールバーが表示される事が普通になります。 この拡大状態での閲覧は、
◎ 縦方向のスクロールは「通常のホイール操作」
◎ 横方向スクロールは「Shift＋ホイール操作」
を使うのがお勧めの操作方法です。 これはポインターをスクロールバーに移動する必要がなく、「EX拡大」や「スクロール拡大」には最適の操作でしょう。 しかし、これと同時に「Ctrl＋ホイール」を誤って操作してしまう事が増えます。
この誤操作は、「Lightbox」を表示したページの「ブラウザ拡大率」の設定を変えてしまうので、元のページ表示に戻った際に、再修正が必要になります。
◎「Ctrl+0（ゼロ）」でブラウザ拡大率をリセット
これは少々扱い難いので、「Lightbox」表示の間は「Ctrl+Scroll」のショートカットを無効にしました。 これは「Lightbox」表示時のみ抑止され、通常のページ表示になると、このショートカットによるブラウザ拡大のコントロールが有効に戻ります。
この対策によって、誤操作を恐れず「Ctrl」「Shift」キーが押せます。
「Ameblo Lightbox JS」の扱い方
「Ameblo Lightbox JS」の基本操作は、以下のページのマニュアルを参照ください。
「Ameblo Lightbox JS」を使用するには
「Ameblo Lightbox JS」は Chrome/Edge/Firefox の「Tampermonkey」上で動作します。
❶「Tampermonkey」を導入します
◎ 使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。
既に「Tampermonkey」を導入している場合は、この手順 ❶ は不要です。
拡張機能の導入については、以下のページに簡単な説明があるので参照ください。
❷「Tampermonkey」にスクリプトを登録します
◎「Tampermonkey」の「＋」マークの「新規スクリプト」タブを開きます。
◎「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠に 下のコードをコピー&ペーストします。
〔コピー方法〕 右サイドバーの「 」マークのボタンを1度押してください。
コード枠内の右クリック ➔ コード全体の選択 ➔ コピー操作 が可能になります。
◎ 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。
◎ 複数の「Ameblo Lightbox JS」のバージョンを「Tampermonkey」に登録する事は問題ありませんが、ONとするのは1つに限ります。 複数を同時にONとすると正常な動作が保証されません。
〔 Ameblo Lightbox EX 〕 ver. 2.5
// ==UserScript==
// @name Ameblo Lightbox JS
// @namespace http://tampermonkey.net/
// @version 2.5
// @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 comic_w; // スクロール拡大（縦）の拡大率
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=
'@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; } '+
'#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; }';
let style=document.createElement('style');
style.setAttribute('id', 'light_style');
style.textContent=css;
if(!document.querySelector('#light_style')){
body.appendChild(style); }
let box=document.createElement('div');
box.setAttribute('id', 'lightbox');
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>';
box.innerHTML=
'<div id="photo_sw">'+
'<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">';
if(!document.querySelector('#lightbox')){
body.appendChild(box); }
let copy_flag=document.createElement('div');
copy_flag.setAttribute('id', 'copy_flag');
copy_flag.innerHTML=
'<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';
if(!document.querySelector('#copy_flag')){
body.appendChild(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_cookie('Lightbox_back');
if(back_color!='black' && back_color!='white'){
back_color='black'; }
document.cookie=
'Lightbox_back='+back_color+'; Max-Age=2592000'; // Cookie更新
comic_w=get_cookie('Lightbox_comic_w');
if(isNaN(comic_w) || comic_w<20 || comic_w>90){
comic_w=90; }
document.cookie=
'Lightbox_comic_w='+comic_w+'; Max-Age=2592000'; // Cookie更新
graphic_w=get_localst('Lightbox_graphic_w');
if(!graphic_w || isNaN(graphic_w) || graphic_w<20 || graphic_w>200){
graphic_w=200; }
localStorage.setItem('Lightbox_graphic_w', graphic_w); // Storage更新
ctrl_act();
b_or_w();
icon_color();
disp_wpm(disp_mode);
} // 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();
document.cookie=
'Lightbox_back='+back_color+'; Max-Age=2592000'; // Cookie更新
}}}
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 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; }
else{
ws.textContent='Cz '+ comic_w; }
wp.onclick=function(event){
event.stopImmediatePropagation();
if(zstep==0){
if(graphic_w<191){
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); }}
else{
if(comic_w<81){
comic_w=Number(comic_w) +10;
let box_img=document.querySelector('#box_img');
if(box_img){
box_img.style.width=comic_w +'vw'; }
ws.textContent='Cz '+ comic_w;
document.cookie=
'Lightbox_comic_w='+comic_w+'; Max-Age=2592000'; }}} // Cookie更新
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更新
else{
if(comic_w>29){
comic_w=Number(comic_w) -10;
let box_img=document.querySelector('#box_img');
if(box_img){
box_img.style.width=comic_w +'vw'; }
ws.textContent='Cz '+ comic_w;
document.cookie=
'Lightbox_comic_w='+comic_w+'; Max-Age=2592000'; }}} // Cookie更新
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_cookie(name){
let cookie_req=document.cookie.split('; ').find(row=>row.startsWith(name));
if(cookie_req){
if(cookie_req.split('=')[1]==null){
return 0; }
else{
return cookie_req.split('=')[1]; }}
if(!cookie_req){
return 0; }}
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(); }
function ex_mode(){
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';
let view_w=w_width*graphic_w/100;
lightbox.scrollTo((view_w - w_width)/2,
((view_w*i_height)/i_width - w_height)/2);
zstep=1; }
else{
if(i_width*w_height/w_width/i_height>1.1){ // 画像：横長
disp_mode=0; // 拡張ディスプレイモード 横長
disp_wpm(disp_mode);
lightbox.style.overflowX='scroll';
lightbox.style.overflowY='hidden';
box_img.style.height='90vh';
box_img.style.width='auto';
box_img.style.padding='4vh 2vw';
let view_w=0.94*w_height*i_width/i_height;
lightbox.scrollTo((view_w - w_width)/2, 0); }
else { // 画像：縦長
disp_mode=1; // 拡張ディスプレイモード 縦長
disp_wpm(disp_mode);
lightbox.style.overflowX='hidden';
lightbox.style.overflowY='auto';
box_img.style.height='auto';
box_img.style.width=comic_w +'vw';
box_img.style.padding='2vh 5vw';
lightbox.scrollTo(0, 0); }
zstep=0; }
} // ex_mode
}}} // 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});