フォトライブラリ 画像表示の修正

@@ -3804,28 +3804,38 @@ body.itemid-132 table {
 }
 
 .item-page.photos-custom #photo-popup {
-	display: block;
+	/* display: block; */
 	position: fixed;
 	top: 50%;
 	left: 50%;
 	transform: translate(-50%, -50%);
 	z-index: 220;
+	width: 90%;
+	height: 90%;
 	max-width: 1260px;
-	max-height: 90%;
-	overflow: auto;
 }
 
-.item-page.photos-custom #photo-popup.Vertical {
-	width: 60%;
+.item-page.photos-custom #photo-popup.vertical {
+	display: flex;
+	align-items: center;
+	justify-content: center;
 }
 
 .item-page.photos-custom #photo-popup.horizontal {
-	width: 90%;
+	overflow: auto;
 }
 
 .item-page.photos-custom #photo-popup #photo-popup-img {
+	transition: opacity 0.5s;
+}
+
+
+.item-page.photos-custom #photo-popup.vertical #photo-popup-img {
+	max-height: 100%;
+}
+
+.item-page.photos-custom #photo-popup.horizontal #photo-popup-img {
 	width: 100%;
-	transition: all 0.5s;
 }
 
 .item-page.photos-custom #photo-popup-under {

@@ -23,29 +23,12 @@ jQuery(function($) {
         for (let i = 0; i < $imgWrppers.length; i++) {
             // 子要素が空の場合削除(自動生成されたp要素は子要素が入っていない)
             if ($imgWrppers[i]['children'].length === 0) {
-                $('.item-page.photos-custom > div p').eq(i).remove();
+                $imgWrppers[i].remove();
             }
         }
     });
 
     /**
-     * 画面サイズが4:3より縦長の場合は、写真を画面幅いっぱいに表示する。
-     */
-    function setPopup() {
-        const winW = $(window).innerWidth();
-        const winH = $(window).innerHeight();
-        // 画面表示領域のアスペクト比を取得
-        const asp = winH / winW;
-        if (asp < 0.75) {
-            $('#photo-popup').removeClass('horizontal');
-            $('#photo-popup').addClass('Vertical');
-        } else {
-            $('#photo-popup').removeClass('Vertical');
-            $('#photo-popup').addClass('horizontal');
-        }
-    }
-
-    /**
      * 画像のクリックをトリガーにして、ポップアップで表示する画像URLの取得と、
      * popupの制御を行う関数の実行。
      */
@@ -60,19 +43,14 @@ jQuery(function($) {
         const $img = $('#photo-popup-img');
         // popupに画像URLをセット
         $img.attr('src', src);
-        setPopup();
-        $(window).resize(function () {
-            setPopup();
-        });
+        // 画像URLのセットから時間をあけることで、表示がなめらかになる。
         setTimeout(function () {
             // popupの表示
             $('#photo-popup-wrapper').fadeIn();
             // popupのみスクロール可とする。
             $('body').css('overflow','hidden');
+            addClassToImage($img);
         }, 50);
-        setTimeout(function () {
-            popupScrollSet($img);
-        }, 100);
     });
 
     /**
@@ -97,11 +75,12 @@ 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);
+                // 画像URLのセットからすこし待つことで関数で正しい数値を取得できる。
+                addClassToImage($img);
             }, 500);
             setTimeout(function () {
                 $('#photo-popup').css('display','');
@@ -126,7 +105,7 @@ jQuery(function($) {
                 $img.attr('src', src);
             }, 400);
             setTimeout(function () {
-                popupScrollSet($img);
+                addClassToImage($img);
             }, 500);
             setTimeout(function () {
                 $('#photo-popup').css('display','');
@@ -146,18 +125,19 @@ jQuery(function($) {
     }
 
     /**
-     * 画像が縦長の場合、ポップアップ表示の際にスクロール値を画像の縦中央にセットする。
+     * 表示する画像のアスペクト比に応じたクラスを付与する。
      * @param {*} $img ポップアップに表示している画像
      */
-    function popupScrollSet($img) {
+    function addClassToImage($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');
+        const asp = imgHeight / imgWidth;
+        if (asp < 1) {
+            $('#photo-popup').removeClass('horizontal');
+            $('#photo-popup').addClass('vertical');
+        } else {
+            $('#photo-popup').removeClass('vertical');
+            $('#photo-popup').addClass('horizontal');
         }
     }
 });
\ No newline at end of file