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

@@ -3801,7 +3801,6 @@ body.itemid-132 table {
 	width: 100%;
 	max-height: 90%;
 	overflow: auto;
-
 }
 
 .item-page.photos-custom #photo-popup #photo-popup-img {

@@ -33,19 +33,25 @@ jQuery(function($) {
      * popupの制御を行う関数の実行。
      */
     $('.item-page.photos-custom > div p').on('click', function() {
-        // popupで表示させる画像URLを取得
-        const src = $(this).children('img').attr('src');
-        // popupに画像URLをセット
-        $('#photo-popup-img').attr('src', src);
         // クリックされた画像のインデックス番号を取得
         let index = $('.item-page.photos-custom > div p').index(this);
         // 画像の数を取得
         const imagesLength = $('.item-page.photos-custom > div p').length;
         changePopup(index, imagesLength);
+        // popupで表示させる画像URLを取得
+        const src = $(this).children('img').attr('src');
+        const $img = $('#photo-popup-img');
+        // popupに画像URLをセット
+        $img.attr('src', src);
+        setTimeout(function () {
             // popupの表示
             $('#photo-popup-wrapper').fadeIn();
             // popupのみスクロール可とする。
             $('body').css('overflow','hidden');
+        }, 50);
+        setTimeout(function () {
+            popupScrollSet($img);
+        }, 100);
     });
 
     /**
@@ -70,10 +76,14 @@ jQuery(function($) {
                 src = $('.item-page.photos-custom > div p').eq(index).children('img').attr('src');
             }
             setTimeout(function () {
-                // transitionで透明になりきった時点で画像の差し替え
+                // transitionで透明になりきった時点で画像の差し替えを実行
                 $img.attr('src', src);
+            }, 400);
+            setTimeout(function () {
+                popupScrollSet($img);
             }, 500);
             setTimeout(function () {
+                $('#photo-popup').css('display','');
                 $img.css('opacity','');
             }, 600);
         });
@@ -91,10 +101,14 @@ jQuery(function($) {
                 src = $('.item-page.photos-custom > div p').eq(index).children('img').attr('src');
             }
             setTimeout(function () {
-                // transitionで透明になりきった時点で画像の差し替え
+                // transitionで透明になりきった時点で画像の差し替えを実行
                 $img.attr('src', src);
+            }, 400);
+            setTimeout(function () {
+                popupScrollSet($img);
             }, 500);
             setTimeout(function () {
+                $('#photo-popup').css('display','');
                 $img.css('opacity','');
             }, 600);
         });
@@ -109,4 +123,20 @@ jQuery(function($) {
             $('body').css('overflow','');
         });
     }
+
+    /**
+     * 画像が縦長の場合、ポップアップ表示の際にスクロール値を画像の縦中央にセットする。
+     * @param {*} $img ポップアップに表示している画像
+     */
+    function popupScrollSet($img) {
+        const imgHeight = $img[0].naturalHeight; // 画像の本来の高さ
+        const imgWidth = $img[0].naturalWidth; // 画像の本来の幅
+        if (imgHeight > imgWidth) {
+            const wrapperWidth = $('#photo-popup').width(); // 画像の包括要素の幅
+            const scaleW = wrapperWidth / imgWidth; // 画像の横幅の縮尺比率
+            const scrollTop = imgHeight * scaleW * 0.25; // スクロール位置(画像の縮尺後の高さ×25%)
+            $('#photo-popup').scrollTop(scrollTop);
+            console.log('test');
+        }
+    }
 });
\ No newline at end of file