8d94c230 by TaishiTokudome

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

1 parent eb678b6a
......@@ -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
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!