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

TaishiTokudome
Showing 2 changed files with 33 additions and 43 deletions
templates/protostar/css/style_org.css
templates/protostar/js/photo_popup.js
--- a/templates/protostar/css/style_org.css
View file @27445d6
+++ b/templates/protostar/css/style_org.css
View file @27445d6
@@ -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 {
+.item-page.photos-custom #photo-popup.vertical {
-	width: 60%;
+	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 {
--- a/templates/protostar/js/photo_popup.js
View file @27445d6
+++ b/templates/protostar/js/photo_popup.js
View file @27445d6
@@ -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();
+        // 画像URLのセットから時間をあけることで、表示がなめらかになる。
-        $(window).resize(function () {
-            setPopup();
-        });
        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 asp = imgHeight / imgWidth;
-            const wrapperWidth = $('#photo-popup').width(); // 画像の包括要素の幅
+        if (asp < 1) {
-            const scaleW = wrapperWidth / imgWidth; // 画像の横幅の縮尺比率
+            $('#photo-popup').removeClass('horizontal');
-            const scrollTop = imgHeight * scaleW * 0.25; // スクロール位置(画像の縮尺後の高さ×25%)
+            $('#photo-popup').addClass('vertical');
-            $('#photo-popup').scrollTop(scrollTop);
+        } else {
-            console.log('test');
+            $('#photo-popup').removeClass('vertical');
+            $('#photo-popup').addClass('horizontal');
        }
    }
 });
\ No newline at end of file