8d94c230 by TaishiTokudome

フォトライブラリページの修正

1 parent eb678b6a
...@@ -3801,7 +3801,6 @@ body.itemid-132 table { ...@@ -3801,7 +3801,6 @@ body.itemid-132 table {
3801 width: 100%; 3801 width: 100%;
3802 max-height: 90%; 3802 max-height: 90%;
3803 overflow: auto; 3803 overflow: auto;
3804
3805 } 3804 }
3806 3805
3807 .item-page.photos-custom #photo-popup #photo-popup-img { 3806 .item-page.photos-custom #photo-popup #photo-popup-img {
......
...@@ -33,19 +33,25 @@ jQuery(function($) { ...@@ -33,19 +33,25 @@ jQuery(function($) {
33 * popupの制御を行う関数の実行。 33 * popupの制御を行う関数の実行。
34 */ 34 */
35 $('.item-page.photos-custom > div p').on('click', function() { 35 $('.item-page.photos-custom > div p').on('click', function() {
36 // popupで表示させる画像URLを取得
37 const src = $(this).children('img').attr('src');
38 // popupに画像URLをセット
39 $('#photo-popup-img').attr('src', src);
40 // クリックされた画像のインデックス番号を取得 36 // クリックされた画像のインデックス番号を取得
41 let index = $('.item-page.photos-custom > div p').index(this); 37 let index = $('.item-page.photos-custom > div p').index(this);
42 // 画像の数を取得 38 // 画像の数を取得
43 const imagesLength = $('.item-page.photos-custom > div p').length; 39 const imagesLength = $('.item-page.photos-custom > div p').length;
44 changePopup(index, imagesLength); 40 changePopup(index, imagesLength);
45 // popupの表示 41 // popupで表示させる画像URLを取得
46 $('#photo-popup-wrapper').fadeIn(); 42 const src = $(this).children('img').attr('src');
47 // popupのみスクロール可とする。 43 const $img = $('#photo-popup-img');
48 $('body').css('overflow','hidden'); 44 // popupに画像URLをセット
45 $img.attr('src', src);
46 setTimeout(function () {
47 // popupの表示
48 $('#photo-popup-wrapper').fadeIn();
49 // popupのみスクロール可とする。
50 $('body').css('overflow','hidden');
51 }, 50);
52 setTimeout(function () {
53 popupScrollSet($img);
54 }, 100);
49 }); 55 });
50 56
51 /** 57 /**
...@@ -70,10 +76,14 @@ jQuery(function($) { ...@@ -70,10 +76,14 @@ jQuery(function($) {
70 src = $('.item-page.photos-custom > div p').eq(index).children('img').attr('src'); 76 src = $('.item-page.photos-custom > div p').eq(index).children('img').attr('src');
71 } 77 }
72 setTimeout(function () { 78 setTimeout(function () {
73 // transitionで透明になりきった時点で画像の差し替え 79 // transitionで透明になりきった時点で画像の差し替えを実行
74 $img.attr('src', src); 80 $img.attr('src', src);
81 }, 400);
82 setTimeout(function () {
83 popupScrollSet($img);
75 }, 500); 84 }, 500);
76 setTimeout(function () { 85 setTimeout(function () {
86 $('#photo-popup').css('display','');
77 $img.css('opacity',''); 87 $img.css('opacity','');
78 }, 600); 88 }, 600);
79 }); 89 });
...@@ -91,10 +101,14 @@ jQuery(function($) { ...@@ -91,10 +101,14 @@ jQuery(function($) {
91 src = $('.item-page.photos-custom > div p').eq(index).children('img').attr('src'); 101 src = $('.item-page.photos-custom > div p').eq(index).children('img').attr('src');
92 } 102 }
93 setTimeout(function () { 103 setTimeout(function () {
94 // transitionで透明になりきった時点で画像の差し替え 104 // transitionで透明になりきった時点で画像の差し替えを実行
95 $img.attr('src', src); 105 $img.attr('src', src);
106 }, 400);
107 setTimeout(function () {
108 popupScrollSet($img);
96 }, 500); 109 }, 500);
97 setTimeout(function () { 110 setTimeout(function () {
111 $('#photo-popup').css('display','');
98 $img.css('opacity',''); 112 $img.css('opacity','');
99 }, 600); 113 }, 600);
100 }); 114 });
...@@ -109,4 +123,20 @@ jQuery(function($) { ...@@ -109,4 +123,20 @@ jQuery(function($) {
109 $('body').css('overflow',''); 123 $('body').css('overflow','');
110 }); 124 });
111 } 125 }
126
127 /**
128 * 画像が縦長の場合、ポップアップ表示の際にスクロール値を画像の縦中央にセットする。
129 * @param {*} $img ポップアップに表示している画像
130 */
131 function popupScrollSet($img) {
132 const imgHeight = $img[0].naturalHeight; // 画像の本来の高さ
133 const imgWidth = $img[0].naturalWidth; // 画像の本来の幅
134 if (imgHeight > imgWidth) {
135 const wrapperWidth = $('#photo-popup').width(); // 画像の包括要素の幅
136 const scaleW = wrapperWidth / imgWidth; // 画像の横幅の縮尺比率
137 const scrollTop = imgHeight * scaleW * 0.25; // スクロール位置(画像の縮尺後の高さ×25%)
138 $('#photo-popup').scrollTop(scrollTop);
139 console.log('test');
140 }
141 }
112 }); 142 });
...\ No newline at end of file ...\ No newline at end of file
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!