Skip to content

Yokihito Oki / kanoya-univercity-prod

Go to a project
Toggle navigation
Toggle navigation pinning
eb678b6a by TaishiTokudome
Options

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

1 parent d5c7baee
Inline Side-by-side
Showing 2 changed files with 110 additions and 92 deletions
templates/protostar/css/style_org.css
......@@ -3673,9 +3673,7 @@ body.itemid-132 table {
position: relative;
width: calc(50% - 16px);
box-sizing: border-box;
margin-bottom: 16px;
margin-left: 0;
margin-right: auto;
margin: 0 auto 16px 0;
}
/* 記事本文が表示されないようにdisplay: none; */
......@@ -3692,12 +3690,10 @@ body.itemid-132 table {
.blog.photos-custom .items-leading > div .article-info {
display: block;
position: absolute;
bottom: -49px;
bottom: -56px;
right: 0;
margin: 0;
padding: 0;
font-size: 0.875rem;
line-height: 0.875rem;
}
/* 記事一覧に必要な要素をdisplay: block; */
......@@ -3705,18 +3701,23 @@ body.itemid-132 table {
display: block;
float: none;
margin: 0;
overflow: hidden;
}
.blog.photos-custom .items-leading > div .item-image a {
transition: all 1s;
}
.blog.photos-custom .items-leading > div .item-image a img {
transition: all 0.5s;
}
.blog.photos-custom .items-leading > div .item-image:hover a img {
transform: scale3d(1.1, 1.1, 1.1);
}
/* レスポンシブ */
@media (max-width: 500px) {
.blog.photos-custom .foto-custom-wrapper {
display: none;
}
.blog.photos-custom .items-leading {
display: block;
}
......@@ -3756,7 +3757,7 @@ body.itemid-132 table {
box-sizing: border-box;
margin-bottom: calc(16/840*100%);
overflow: hidden;
border: 2px solid #999999;
/* border: 2px solid #999999; */
background-color: #fff;
}
......@@ -3768,12 +3769,11 @@ body.itemid-132 table {
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
transition: all 1s;
transition: all 0.5s;
}
.item-page.photos-custom > div p:last-child {
/* p:last-childはエディターによって自動生成される<p>&nbsp;</p>なのでdisplay: none;とする */
display: none;
.item-page.photos-custom > div p:hover img {
transform: translate(-50%, -50%) scale3d(1.1, 1.1, 1.1);
}
@media (max-width: 500px) {
......@@ -3786,41 +3786,30 @@ body.itemid-132 table {
/* -------------------------------------------------------------------------
フォトライブラリポップアップ
------------------------------------------------------------------------- */
#photo-popup-wrapper {
.item-page.photos-custom #photo-popup-wrapper {
display: none;
}
.item-page.photos-custom #photo-popup {
display: none;
}
.item-page.photos-custom #photo-popup-under {
display: none;
}
.item-page.photos-custom .popup-button {
display: none;
}
.item-page.photos-custom.active-popup #photo-popup {
display: block;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
overflow-y: scroll;
background-color: #fff;
z-index: 220;
border: #222 solid 2px;
max-width: 1440px;
max-height: 1080px;
max-width: 90%;
width: 100%;
max-height: 90%;
overflow: auto;
}
.item-page.photos-custom.active-popup #photo-popup #photo-popup-img {
.item-page.photos-custom #photo-popup #photo-popup-img {
width: 100%;
transition: all 0.5s;
}
.item-page.photos-custom.active-popup #photo-popup-under {
.item-page.photos-custom #photo-popup-under {
display: block;
position: fixed;
top: 0;
......@@ -3831,8 +3820,7 @@ body.itemid-132 table {
background-color: rgba(255, 255, 255, 0.8);
}
.item-page.photos-custom.active-popup .popup-button {
display: block;
.item-page.photos-custom .popup-button {
display: flex;
align-items: center;
justify-content: center;
......@@ -3843,35 +3831,51 @@ body.itemid-132 table {
text-decoration: none;
z-index: 230;
border: 1px solid #999;
transition: all 0.2s;
}
.item-page.photos-custom .popup-button:hover {
box-shadow: #222 0px 0px 3px 1px;
margin-bottom: 1px;
font-weight: bold;
}
.item-page.photos-custom .popup-button:active {
box-shadow: #222 0px 0px 0px 0px;
margin: 0;
font-weight: normal;
}
.item-page.photos-custom.active-popup #photo-popup-close {
.item-page.photos-custom #photo-popup-close {
position: fixed;
top: 0;
right: 0;
transform: translate(0, 0);
top: 5%;
right: 5%;
}
.item-page.photos-custom.active-popup #photo-popup-pre {
.item-page.photos-custom #photo-popup-pre {
position: fixed;
top: 50%;
left: calc(5% - 2px);
left: 5%;
transform: translate(0, -50%);
}
.item-page.photos-custom.active-popup #photo-popup-next {
.item-page.photos-custom #photo-popup-next {
position: fixed;
top: 50%;
right: calc(5% - 2px);
right: 5%;
transform: translate(0, -50%);
}
@media (max-width: 500px) {
.item-page.photos-custom.active-popup #photo-popup-pre {
.item-page.photos-custom #photo-popup-close {
right: 0;
}
.item-page.photos-custom #photo-popup-pre {
left: 0;
}
.item-page.photos-custom.active-popup #photo-popup-next {
.item-page.photos-custom #photo-popup-next {
right: 0;
}
}
\ No newline at end of file
......
templates/protostar/js/photo_popup.js
......@@ -6,6 +6,7 @@ jQuery(function($) {
const photosCustom = $('.item-page.photos-custom');
if (photosCustom[0]) {
let photosCustomHtml = '';
photosCustomHtml += '<div id="photo-popup-wrapper">';
photosCustomHtml += '<div id="photo-popup">';
photosCustomHtml += '<img id="photo-popup-img" src="" alt="">';
photosCustomHtml += '</div>';
......@@ -14,85 +15,98 @@ jQuery(function($) {
photosCustomHtml += '<a id="photo-popup-next" class="popup-button" href="#">></a>';
photosCustomHtml += '<div id="photo-popup-under">';
photosCustomHtml += '</div>';
photosCustomHtml += '</div>';
photosCustom.append(photosCustomHtml);
}
// 自動生成されたp要素を削除
let $imgWrppers = $('.item-page.photos-custom > div p');
for (let i = 0; i < $imgWrppers.length; i++) {
// 子要素が空の場合削除(自動生成されたp要素は子要素が入っていない)
if ($imgWrppers[i]['children'].length === 0) {
$('.item-page.photos-custom > div p').eq(i).remove();
}
}
});
/**
* ポップアップで表示する画像URLの取得と、popupの制御を行う関数の実行。
* 画像のクリックをトリガーにして、ポップアップで表示する画像URLの取得と、
* popupの制御を行う関数の実行。
*/
$('.item-page.photos-custom > div p').on('click', function() {
$('.item-page.photos-custom').addClass('active-popup');
// popupで表示させる画像URL
// 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 imagesNum = $('.item-page.photos-custom > div p img').length - 1;
changePopup(index, imagesNum);
setPopup();
$(window).resize(function () {
setPopup();
});
// 画像の数を取得
const imagesLength = $('.item-page.photos-custom > div p').length;
changePopup(index, imagesLength);
// popupの表示
$('#photo-popup-wrapper').fadeIn();
// popupのみスクロール可とする。
$('body').css('overflow','hidden');
});
/**
* ポップアップの大きさの制御
*/
function setPopup() {
const winW = $(window).innerWidth();
const winH = $(window).innerHeight();
// 画面表示領域のアスペクト比を取得
const asp = winH / winW;
if (asp < 0.75) {
const newW = winH / 75 * 100;
const style = {'height':winH,'width':newW}
$('#photo-popup').css(style);
} else {
const newH = winW * 0.75 * 0.9;
const newW = winW * 0.9;
const style = {'height':newH,'width':newW}
$('#photo-popup').css(style);
}
}
/**
* ポップアップの状態の制御
* ･ 画像の切り替え
* ･ ポップアップの表示、非表示
*
* @param {*} index クリックされた画像の親要素の中での順番
* @param {*} imagesNum 画像のインデックス番号の最大値を取得
* @param {*} imagesLength 画像のインデックス番号の最大値を取得
*/
function changePopup(index, imagesNum) {
function changePopup(index, imagesLength) {
$('#photo-popup-pre').off('click').on('click', function() {
const $img = $('#photo-popup-img');
let src = '';
// 透明にする
$img.css('opacity',0);
if (index === 0) {
index = imagesNum;
const src = $('.item-page.photos-custom > div p').eq(imagesNum).children('img').attr('src');
$('#photo-popup-img').attr('src', src);
index = imagesLength - 1;
src = $('.item-page.photos-custom > div p').eq(imagesLength).children('img').attr('src');
} else {
index--;
const src = $('.item-page.photos-custom > div p').eq(index).children('img').attr('src');
$('#photo-popup-img').attr('src', src);
src = $('.item-page.photos-custom > div p').eq(index).children('img').attr('src');
}
setTimeout(function () {
// transitionで透明になりきった時点で画像の差し替え
$img.attr('src', src);
}, 500);
setTimeout(function () {
$img.css('opacity','');
}, 600);
});
$('#photo-popup-next').off('click').on('click', function() {
if (index === imagesNum) {
const $img = $('#photo-popup-img');
let src = '';
// 透明にする
$('#photo-popup-img').css('opacity',0);
if (index === imagesLength - 1) {
index = 0;
const src = $('.item-page.photos-custom > div p').eq(index).children('img').attr('src');
$('#photo-popup-img').attr('src', src);
src = $('.item-page.photos-custom > div p').eq(index).children('img').attr('src');
} else {
index++;
const src = $('.item-page.photos-custom > div p').eq(index).children('img').attr('src');
$('#photo-popup-img').attr('src', src);
src = $('.item-page.photos-custom > div p').eq(index).children('img').attr('src');
}
setTimeout(function () {
// transitionで透明になりきった時点で画像の差し替え
$img.attr('src', src);
}, 500);
setTimeout(function () {
$img.css('opacity','');
}, 600);
});
$('#photo-popup-close').off('click').on('click', function() {
$('.item-page.photos-custom').removeClass('active-popup');
$('#photo-popup-wrapper').fadeOut();
$('body').css('overflow','');
});
$('#photo-popup-under').off('click').on('click', function() {
$('.item-page.photos-custom').removeClass('active-popup');
$('#photo-popup-wrapper').fadeOut();
$('body').css('overflow','');
});
}
});
\ 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!