15efb870 by TaishiTokudome

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

1 parent 8d94c230
......@@ -3797,12 +3797,19 @@ body.itemid-132 table {
left: 50%;
transform: translate(-50%, -50%);
z-index: 220;
max-width: 90%;
width: 100%;
max-width: 1260px;
max-height: 90%;
overflow: auto;
}
.item-page.photos-custom #photo-popup.Vertical {
width: 60%;
}
.item-page.photos-custom #photo-popup.horizontal {
width: 90%;
}
.item-page.photos-custom #photo-popup #photo-popup-img {
width: 100%;
transition: all 0.5s;
......@@ -3865,7 +3872,7 @@ body.itemid-132 table {
transform: translate(0, -50%);
}
@media (max-width: 500px) {
@media (max-width: 800px) {
.item-page.photos-custom #photo-popup-close {
right: 0;
}
......
......@@ -29,6 +29,23 @@ jQuery(function($) {
});
/**
* 画面サイズが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の制御を行う関数の実行。
*/
......@@ -43,6 +60,10 @@ jQuery(function($) {
const $img = $('#photo-popup-img');
// popupに画像URLをセット
$img.attr('src', src);
setPopup();
$(window).resize(function () {
setPopup();
});
setTimeout(function () {
// popupの表示
$('#photo-popup-wrapper').fadeIn();
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!