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 { ...@@ -3673,9 +3673,7 @@ body.itemid-132 table {
3673 position: relative; 3673 position: relative;
3674 width: calc(50% - 16px); 3674 width: calc(50% - 16px);
3675 box-sizing: border-box; 3675 box-sizing: border-box;
3676 margin-bottom: 16px; 3676 margin: 0 auto 16px 0;
3677 margin-left: 0;
3678 margin-right: auto;
3679 } 3677 }
3680 3678
3681 /* 記事本文が表示されないようにdisplay: none; */ 3679 /* 記事本文が表示されないようにdisplay: none; */
...@@ -3692,12 +3690,10 @@ body.itemid-132 table { ...@@ -3692,12 +3690,10 @@ body.itemid-132 table {
3692 .blog.photos-custom .items-leading > div .article-info { 3690 .blog.photos-custom .items-leading > div .article-info {
3693 display: block; 3691 display: block;
3694 position: absolute; 3692 position: absolute;
3695 bottom: -49px; 3693 bottom: -56px;
3696 right: 0; 3694 right: 0;
3697 margin: 0; 3695 margin: 0;
3698 padding: 0; 3696 padding: 0;
3699 font-size: 0.875rem;
3700 line-height: 0.875rem;
3701 } 3697 }
3702 3698
3703 /* 記事一覧に必要な要素をdisplay: block; */ 3699 /* 記事一覧に必要な要素をdisplay: block; */
...@@ -3705,18 +3701,23 @@ body.itemid-132 table { ...@@ -3705,18 +3701,23 @@ body.itemid-132 table {
3705 display: block; 3701 display: block;
3706 float: none; 3702 float: none;
3707 margin: 0; 3703 margin: 0;
3704 overflow: hidden;
3708 } 3705 }
3709 3706
3710 .blog.photos-custom .items-leading > div .item-image a { 3707 .blog.photos-custom .items-leading > div .item-image a {
3711 transition: all 1s; 3708 transition: all 1s;
3712 } 3709 }
3713 3710
3711 .blog.photos-custom .items-leading > div .item-image a img {
3712 transition: all 0.5s;
3713 }
3714
3715 .blog.photos-custom .items-leading > div .item-image:hover a img {
3716 transform: scale3d(1.1, 1.1, 1.1);
3717 }
3718
3714 /* レスポンシブ */ 3719 /* レスポンシブ */
3715 @media (max-width: 500px) { 3720 @media (max-width: 500px) {
3716 .blog.photos-custom .foto-custom-wrapper {
3717 display: none;
3718 }
3719
3720 .blog.photos-custom .items-leading { 3721 .blog.photos-custom .items-leading {
3721 display: block; 3722 display: block;
3722 } 3723 }
...@@ -3756,7 +3757,7 @@ body.itemid-132 table { ...@@ -3756,7 +3757,7 @@ body.itemid-132 table {
3756 box-sizing: border-box; 3757 box-sizing: border-box;
3757 margin-bottom: calc(16/840*100%); 3758 margin-bottom: calc(16/840*100%);
3758 overflow: hidden; 3759 overflow: hidden;
3759 border: 2px solid #999999; 3760 /* border: 2px solid #999999; */
3760 background-color: #fff; 3761 background-color: #fff;
3761 } 3762 }
3762 3763
...@@ -3768,12 +3769,11 @@ body.itemid-132 table { ...@@ -3768,12 +3769,11 @@ body.itemid-132 table {
3768 left: 50%; 3769 left: 50%;
3769 transform: translate(-50%, -50%); 3770 transform: translate(-50%, -50%);
3770 width: 100%; 3771 width: 100%;
3771 transition: all 1s; 3772 transition: all 0.5s;
3772 } 3773 }
3773 3774
3774 .item-page.photos-custom > div p:last-child { 3775 .item-page.photos-custom > div p:hover img {
3775 /* p:last-childはエディターによって自動生成される<p>&nbsp;</p>なのでdisplay: none;とする */ 3776 transform: translate(-50%, -50%) scale3d(1.1, 1.1, 1.1);
3776 display: none;
3777 } 3777 }
3778 3778
3779 @media (max-width: 500px) { 3779 @media (max-width: 500px) {
...@@ -3786,41 +3786,30 @@ body.itemid-132 table { ...@@ -3786,41 +3786,30 @@ body.itemid-132 table {
3786 /* ------------------------------------------------------------------------- 3786 /* -------------------------------------------------------------------------
3787 フォトライブラリポップアップ 3787 フォトライブラリポップアップ
3788 ------------------------------------------------------------------------- */ 3788 ------------------------------------------------------------------------- */
3789 #photo-popup-wrapper { 3789 .item-page.photos-custom #photo-popup-wrapper {
3790 display: none; 3790 display: none;
3791 } 3791 }
3792 3792
3793 .item-page.photos-custom #photo-popup { 3793 .item-page.photos-custom #photo-popup {
3794 display: none;
3795 }
3796
3797 .item-page.photos-custom #photo-popup-under {
3798 display: none;
3799 }
3800
3801 .item-page.photos-custom .popup-button {
3802 display: none;
3803 }
3804
3805 .item-page.photos-custom.active-popup #photo-popup {
3806 display: block; 3794 display: block;
3807 position: fixed; 3795 position: fixed;
3808 top: 50%; 3796 top: 50%;
3809 left: 50%; 3797 left: 50%;
3810 transform: translate(-50%, -50%); 3798 transform: translate(-50%, -50%);
3811 overflow-y: scroll;
3812 background-color: #fff;
3813 z-index: 220; 3799 z-index: 220;
3814 border: #222 solid 2px; 3800 max-width: 90%;
3815 max-width: 1440px; 3801 width: 100%;
3816 max-height: 1080px; 3802 max-height: 90%;
3803 overflow: auto;
3804
3817 } 3805 }
3818 3806
3819 .item-page.photos-custom.active-popup #photo-popup #photo-popup-img { 3807 .item-page.photos-custom #photo-popup #photo-popup-img {
3820 width: 100%; 3808 width: 100%;
3809 transition: all 0.5s;
3821 } 3810 }
3822 3811
3823 .item-page.photos-custom.active-popup #photo-popup-under { 3812 .item-page.photos-custom #photo-popup-under {
3824 display: block; 3813 display: block;
3825 position: fixed; 3814 position: fixed;
3826 top: 0; 3815 top: 0;
...@@ -3831,8 +3820,7 @@ body.itemid-132 table { ...@@ -3831,8 +3820,7 @@ body.itemid-132 table {
3831 background-color: rgba(255, 255, 255, 0.8); 3820 background-color: rgba(255, 255, 255, 0.8);
3832 } 3821 }
3833 3822
3834 .item-page.photos-custom.active-popup .popup-button { 3823 .item-page.photos-custom .popup-button {
3835 display: block;
3836 display: flex; 3824 display: flex;
3837 align-items: center; 3825 align-items: center;
3838 justify-content: center; 3826 justify-content: center;
...@@ -3843,35 +3831,51 @@ body.itemid-132 table { ...@@ -3843,35 +3831,51 @@ body.itemid-132 table {
3843 text-decoration: none; 3831 text-decoration: none;
3844 z-index: 230; 3832 z-index: 230;
3845 border: 1px solid #999; 3833 border: 1px solid #999;
3834 transition: all 0.2s;
3835 }
3836
3837 .item-page.photos-custom .popup-button:hover {
3838 box-shadow: #222 0px 0px 3px 1px;
3839 margin-bottom: 1px;
3840 font-weight: bold;
3841 }
3842
3843 .item-page.photos-custom .popup-button:active {
3844 box-shadow: #222 0px 0px 0px 0px;
3845 margin: 0;
3846 font-weight: normal;
3846 } 3847 }
3847 3848
3848 .item-page.photos-custom.active-popup #photo-popup-close { 3849 .item-page.photos-custom #photo-popup-close {
3849 position: fixed; 3850 position: fixed;
3850 top: 0; 3851 top: 5%;
3851 right: 0; 3852 right: 5%;
3852 transform: translate(0, 0);
3853 } 3853 }
3854 3854
3855 .item-page.photos-custom.active-popup #photo-popup-pre { 3855 .item-page.photos-custom #photo-popup-pre {
3856 position: fixed; 3856 position: fixed;
3857 top: 50%; 3857 top: 50%;
3858 left: calc(5% - 2px); 3858 left: 5%;
3859 transform: translate(0, -50%); 3859 transform: translate(0, -50%);
3860 } 3860 }
3861 3861
3862 .item-page.photos-custom.active-popup #photo-popup-next { 3862 .item-page.photos-custom #photo-popup-next {
3863 position: fixed; 3863 position: fixed;
3864 top: 50%; 3864 top: 50%;
3865 right: calc(5% - 2px); 3865 right: 5%;
3866 transform: translate(0, -50%); 3866 transform: translate(0, -50%);
3867 } 3867 }
3868 3868
3869 @media (max-width: 500px) { 3869 @media (max-width: 500px) {
3870 .item-page.photos-custom.active-popup #photo-popup-pre { 3870 .item-page.photos-custom #photo-popup-close {
3871 right: 0;
3872 }
3873
3874 .item-page.photos-custom #photo-popup-pre {
3871 left: 0; 3875 left: 0;
3872 } 3876 }
3873 3877
3874 .item-page.photos-custom.active-popup #photo-popup-next { 3878 .item-page.photos-custom #photo-popup-next {
3875 right: 0; 3879 right: 0;
3876 } 3880 }
3877 } 3881 }
...\ No newline at end of file ...\ No newline at end of file
......
templates/protostar/js/photo_popup.js
...@@ -6,6 +6,7 @@ jQuery(function($) { ...@@ -6,6 +6,7 @@ jQuery(function($) {
6 const photosCustom = $('.item-page.photos-custom'); 6 const photosCustom = $('.item-page.photos-custom');
7 if (photosCustom[0]) { 7 if (photosCustom[0]) {
8 let photosCustomHtml = ''; 8 let photosCustomHtml = '';
9 photosCustomHtml += '<div id="photo-popup-wrapper">';
9 photosCustomHtml += '<div id="photo-popup">'; 10 photosCustomHtml += '<div id="photo-popup">';
10 photosCustomHtml += '<img id="photo-popup-img" src="" alt="">'; 11 photosCustomHtml += '<img id="photo-popup-img" src="" alt="">';
11 photosCustomHtml += '</div>'; 12 photosCustomHtml += '</div>';
...@@ -14,85 +15,98 @@ jQuery(function($) { ...@@ -14,85 +15,98 @@ jQuery(function($) {
14 photosCustomHtml += '<a id="photo-popup-next" class="popup-button" href="#">></a>'; 15 photosCustomHtml += '<a id="photo-popup-next" class="popup-button" href="#">></a>';
15 photosCustomHtml += '<div id="photo-popup-under">'; 16 photosCustomHtml += '<div id="photo-popup-under">';
16 photosCustomHtml += '</div>'; 17 photosCustomHtml += '</div>';
18 photosCustomHtml += '</div>';
17 photosCustom.append(photosCustomHtml); 19 photosCustom.append(photosCustomHtml);
18 } 20 }
21 // 自動生成されたp要素を削除
22 let $imgWrppers = $('.item-page.photos-custom > div p');
23 for (let i = 0; i < $imgWrppers.length; i++) {
24 // 子要素が空の場合削除(自動生成されたp要素は子要素が入っていない)
25 if ($imgWrppers[i]['children'].length === 0) {
26 $('.item-page.photos-custom > div p').eq(i).remove();
27 }
28 }
19 }); 29 });
20 30
21 /** 31 /**
22 * ポップアップで表示する画像URLの取得と、popupの制御を行う関数の実行。 32 * 画像のクリックをトリガーにして、ポップアップで表示する画像URLの取得と、
33 * popupの制御を行う関数の実行。
23 */ 34 */
24 $('.item-page.photos-custom > div p').on('click', function() { 35 $('.item-page.photos-custom > div p').on('click', function() {
25 $('.item-page.photos-custom').addClass('active-popup'); 36 // popupで表示させる画像URLを取得
26 // popupで表示させる画像URL
27 const src = $(this).children('img').attr('src'); 37 const src = $(this).children('img').attr('src');
38 // popupに画像URLをセット
28 $('#photo-popup-img').attr('src', src); 39 $('#photo-popup-img').attr('src', src);
29 // クリックされた画像の親要素の中での順番を取得 40 // クリックされた画像のインデックス番号を取得
30 let index = $('.item-page.photos-custom > div p').index(this); 41 let index = $('.item-page.photos-custom > div p').index(this);
31 // 画像のインデックス番号の最大値を取得 42 // 画像の数を取得
32 const imagesNum = $('.item-page.photos-custom > div p img').length - 1; 43 const imagesLength = $('.item-page.photos-custom > div p').length;
33 changePopup(index, imagesNum); 44 changePopup(index, imagesLength);
34 setPopup(); 45 // popupの表示
35 $(window).resize(function () { 46 $('#photo-popup-wrapper').fadeIn();
36 setPopup(); 47 // popupのみスクロール可とする。
37 }); 48 $('body').css('overflow','hidden');
38 }); 49 });
39 50
40 /** 51 /**
41 * ポップアップの大きさの制御
42 */
43 function setPopup() {
44 const winW = $(window).innerWidth();
45 const winH = $(window).innerHeight();
46 // 画面表示領域のアスペクト比を取得
47 const asp = winH / winW;
48 if (asp < 0.75) {
49 const newW = winH / 75 * 100;
50 const style = {'height':winH,'width':newW}
51 $('#photo-popup').css(style);
52 } else {
53 const newH = winW * 0.75 * 0.9;
54 const newW = winW * 0.9;
55 const style = {'height':newH,'width':newW}
56 $('#photo-popup').css(style);
57 }
58 }
59
60 /**
61 * ポップアップの状態の制御 52 * ポップアップの状態の制御
62 * ･ 画像の切り替え 53 * ･ 画像の切り替え
63 * ･ ポップアップの表示、非表示 54 * ･ ポップアップの表示、非表示
64 * 55 *
65 * @param {*} index クリックされた画像の親要素の中での順番 56 * @param {*} index クリックされた画像の親要素の中での順番
66 * @param {*} imagesNum 画像のインデックス番号の最大値を取得 57 * @param {*} imagesLength 画像のインデックス番号の最大値を取得
67 */ 58 */
68 function changePopup(index, imagesNum) { 59 function changePopup(index, imagesLength) {
69 $('#photo-popup-pre').off('click').on('click', function() { 60 $('#photo-popup-pre').off('click').on('click', function() {
61 const $img = $('#photo-popup-img');
62 let src = '';
63 // 透明にする
64 $img.css('opacity',0);
70 if (index === 0) { 65 if (index === 0) {
71 index = imagesNum; 66 index = imagesLength - 1;
72 const src = $('.item-page.photos-custom > div p').eq(imagesNum).children('img').attr('src'); 67 src = $('.item-page.photos-custom > div p').eq(imagesLength).children('img').attr('src');
73 $('#photo-popup-img').attr('src', src);
74 } else { 68 } else {
75 index--; 69 index--;
76 const src = $('.item-page.photos-custom > div p').eq(index).children('img').attr('src'); 70 src = $('.item-page.photos-custom > div p').eq(index).children('img').attr('src');
77 $('#photo-popup-img').attr('src', src);
78 } 71 }
72 setTimeout(function () {
73 // transitionで透明になりきった時点で画像の差し替え
74 $img.attr('src', src);
75 }, 500);
76 setTimeout(function () {
77 $img.css('opacity','');
78 }, 600);
79 }); 79 });
80
80 $('#photo-popup-next').off('click').on('click', function() { 81 $('#photo-popup-next').off('click').on('click', function() {
81 if (index === imagesNum) { 82 const $img = $('#photo-popup-img');
83 let src = '';
84 // 透明にする
85 $('#photo-popup-img').css('opacity',0);
86 if (index === imagesLength - 1) {
82 index = 0; 87 index = 0;
83 const src = $('.item-page.photos-custom > div p').eq(index).children('img').attr('src'); 88 src = $('.item-page.photos-custom > div p').eq(index).children('img').attr('src');
84 $('#photo-popup-img').attr('src', src);
85 } else { 89 } else {
86 index++; 90 index++;
87 const src = $('.item-page.photos-custom > div p').eq(index).children('img').attr('src'); 91 src = $('.item-page.photos-custom > div p').eq(index).children('img').attr('src');
88 $('#photo-popup-img').attr('src', src);
89 } 92 }
93 setTimeout(function () {
94 // transitionで透明になりきった時点で画像の差し替え
95 $img.attr('src', src);
96 }, 500);
97 setTimeout(function () {
98 $img.css('opacity','');
99 }, 600);
90 }); 100 });
101
91 $('#photo-popup-close').off('click').on('click', function() { 102 $('#photo-popup-close').off('click').on('click', function() {
92 $('.item-page.photos-custom').removeClass('active-popup'); 103 $('#photo-popup-wrapper').fadeOut();
104 $('body').css('overflow','');
93 }); 105 });
106
94 $('#photo-popup-under').off('click').on('click', function() { 107 $('#photo-popup-under').off('click').on('click', function() {
95 $('.item-page.photos-custom').removeClass('active-popup'); 108 $('#photo-popup-wrapper').fadeOut();
109 $('body').css('overflow','');
96 }); 110 });
97 } 111 }
98 }); 112 });
...\ No newline at end of file ...\ 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!