Skip to content

Yokihito Oki / kanoya-univercity-prod

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

Merge branch 'video_liblary' into 'interview_dev' 

Video liblary

See merge request !31
2 parents e216879a 15efb870
Inline Side-by-side
Showing 3 changed files with 472 additions and 0 deletions
templates/protostar/css/style_org.css
...@@ -3577,3 +3577,311 @@ body.itemid-132 table { ...@@ -3577,3 +3577,311 @@ body.itemid-132 table {
3577 bottom: 47px; 3577 bottom: 47px;
3578 } 3578 }
3579 } 3579 }
3580
3581 /* -------------------------------------------------------------------------
3582 　ビデオライブラリページ
3583 ------------------------------------------------------------------------- */
3584 .videos-custom h5 {
3585 padding-left: 0;
3586 font-size: 1.125rem;
3587 background: none;
3588 }
3589
3590 .videos-custom-item-wrapper {
3591 display: flex;
3592 flex-wrap: wrap;
3593 justify-content: space-around;
3594 }
3595
3596 .videos-custom-item-wrapper:before {
3597 content: "";
3598 display: block;
3599 min-width: 190px;
3600 width: 30%;
3601 height: 0px;
3602 order: 1;
3603 }
3604 .videos-custom-item-wrapper:after {
3605 content: "";
3606 display: block;
3607 min-width: 190px;
3608 width: 30%;
3609 height: 0px;
3610 }
3611
3612 .videos-custom-item {
3613 min-width: 190px;
3614 width: 30%;
3615 margin-bottom: 16px;
3616 }
3617
3618 .videos-custom-item-title {
3619 font-size: 1.125rem;
3620 }
3621
3622 .videos-custom-item-explanation {
3623 font-size: 1rem;
3624 }
3625
3626 /* ビデオライブラリページ レスポンシブ*/
3627 @media (max-width: 900px) {
3628 .videos-custom-item {
3629 width: 45%;
3630 }
3631 .videos-custom-item-wrapper:before {
3632 width: 45%;
3633 }
3634 .videos-custom-item-wrapper:after {
3635 width: 45%;
3636 }
3637 }
3638
3639 @media (max-width: 550px) {
3640 .videos-custom-item-wrapper {
3641 display: block;
3642 }
3643
3644 .videos-custom-item {
3645 height: auto;
3646 width: 100%;
3647 padding-bottom: 8px;
3648 border-bottom: #003894 4px solid;
3649 margin-bottom: 24px;
3650 }
3651
3652
3653 .videos-custom-item-title {
3654 font-size: 1rem;
3655 }
3656
3657 .videos-custom-item-explanation {
3658 font-size: 0.875rem;
3659 }
3660 }
3661
3662 /* -------------------------------------------------------------------------
3663 　フォトライブラリ (メニュー(記事一覧))
3664 ------------------------------------------------------------------------- */
3665 .blog.photos-custom .items-leading {
3666 display: flex;
3667 align-items: flex-start;
3668 flex-wrap: wrap;
3669 justify-content: space-between;
3670 }
3671
3672 .blog.photos-custom .items-leading > div {
3673 position: relative;
3674 width: calc(50% - 16px);
3675 box-sizing: border-box;
3676 margin: 0 auto 16px 0;
3677 }
3678
3679 /* 記事本文が表示されないようにdisplay: none; */
3680 .blog.photos-custom .items-leading > div > * {
3681 display: none;
3682 }
3683
3684 /* 記事一覧に必要な要素をdisplay: block; */
3685 .blog.photos-custom .items-leading > div .page-header {
3686 display: block;
3687 }
3688
3689 /* 記事一覧に必要な要素をdisplay: block; */
3690 .blog.photos-custom .items-leading > div .article-info {
3691 display: block;
3692 position: absolute;
3693 bottom: -56px;
3694 right: 0;
3695 margin: 0;
3696 padding: 0;
3697 }
3698
3699 /* 記事一覧に必要な要素をdisplay: block; */
3700 .blog.photos-custom .items-leading > div .item-image {
3701 display: block;
3702 float: none;
3703 margin: 0;
3704 overflow: hidden;
3705 }
3706
3707 .blog.photos-custom .items-leading > div .item-image a {
3708 transition: all 1s;
3709 }
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
3719 /* レスポンシブ */
3720 @media (max-width: 500px) {
3721 .blog.photos-custom .items-leading {
3722 display: block;
3723 }
3724
3725 .blog.photos-custom .items-leading > div {
3726 width: 100%;
3727 margin-bottom: 24px;
3728 }
3729
3730 .blog.photos-custom .items-leading > div .article-info {
3731 right: 6px;
3732 }
3733 }
3734
3735 /* -------------------------------------------------------------------------
3736 　フォトライブラリ (記事)
3737 ------------------------------------------------------------------------- */
3738 .item-page.photos-custom .page-header {
3739 display: block;
3740 }
3741
3742 .item-page.photos-custom > div {
3743 display: flex;
3744 align-items: center;
3745 justify-content: space-between;
3746 flex-wrap: wrap;
3747 }
3748
3749 .item-page.photos-custom > div p {
3750 position: relative;
3751 /* 親要素が最大の幅である840pxのときに幅268pxになる */
3752 width: calc(268/840*100%);
3753 height: 0;
3754 /* paddingで高さを用意する */
3755 /* 自分自身の幅が(840*100%)を基準にしているので、それに対して3:4のアスペクト比になるように高さを用意する */
3756 padding-bottom: calc(201/840*100%);
3757 box-sizing: border-box;
3758 margin-bottom: calc(16/840*100%);
3759 overflow: hidden;
3760 /* border: 2px solid #999999; */
3761 background-color: #fff;
3762 }
3763
3764 .item-page.photos-custom > div p img {
3765 display: block;
3766 /* 親要素の真ん中に表示 */
3767 position: absolute;
3768 top: 50%;
3769 left: 50%;
3770 transform: translate(-50%, -50%);
3771 width: 100%;
3772 transition: all 0.5s;
3773 }
3774
3775 .item-page.photos-custom > div p:hover img {
3776 transform: translate(-50%, -50%) scale3d(1.1, 1.1, 1.1);
3777 }
3778
3779 @media (max-width: 500px) {
3780 .item-page.photos-custom > div p {
3781 width: calc(228/470*100%);
3782 padding-bottom: calc(171/470*100%);
3783 }
3784 }
3785
3786 /* -------------------------------------------------------------------------
3787 フォトライブラリポップアップ
3788 ------------------------------------------------------------------------- */
3789 .item-page.photos-custom #photo-popup-wrapper {
3790 display: none;
3791 }
3792
3793 .item-page.photos-custom #photo-popup {
3794 display: block;
3795 position: fixed;
3796 top: 50%;
3797 left: 50%;
3798 transform: translate(-50%, -50%);
3799 z-index: 220;
3800 max-width: 1260px;
3801 max-height: 90%;
3802 overflow: auto;
3803 }
3804
3805 .item-page.photos-custom #photo-popup.Vertical {
3806 width: 60%;
3807 }
3808
3809 .item-page.photos-custom #photo-popup.horizontal {
3810 width: 90%;
3811 }
3812
3813 .item-page.photos-custom #photo-popup #photo-popup-img {
3814 width: 100%;
3815 transition: all 0.5s;
3816 }
3817
3818 .item-page.photos-custom #photo-popup-under {
3819 display: block;
3820 position: fixed;
3821 top: 0;
3822 left: 0;
3823 z-index: 210;
3824 width: 100vw;
3825 height: 100vh;
3826 background-color: rgba(255, 255, 255, 0.8);
3827 }
3828
3829 .item-page.photos-custom .popup-button {
3830 display: flex;
3831 align-items: center;
3832 justify-content: center;
3833 width: 40px;
3834 height: 40px;
3835 background-color: rgba(255, 255, 255, 0.6);
3836 color: #222;
3837 text-decoration: none;
3838 z-index: 230;
3839 border: 1px solid #999;
3840 transition: all 0.2s;
3841 }
3842
3843 .item-page.photos-custom .popup-button:hover {
3844 box-shadow: #222 0px 0px 3px 1px;
3845 margin-bottom: 1px;
3846 font-weight: bold;
3847 }
3848
3849 .item-page.photos-custom .popup-button:active {
3850 box-shadow: #222 0px 0px 0px 0px;
3851 margin: 0;
3852 font-weight: normal;
3853 }
3854
3855 .item-page.photos-custom #photo-popup-close {
3856 position: fixed;
3857 top: 5%;
3858 right: 5%;
3859 }
3860
3861 .item-page.photos-custom #photo-popup-pre {
3862 position: fixed;
3863 top: 50%;
3864 left: 5%;
3865 transform: translate(0, -50%);
3866 }
3867
3868 .item-page.photos-custom #photo-popup-next {
3869 position: fixed;
3870 top: 50%;
3871 right: 5%;
3872 transform: translate(0, -50%);
3873 }
3874
3875 @media (max-width: 800px) {
3876 .item-page.photos-custom #photo-popup-close {
3877 right: 0;
3878 }
3879
3880 .item-page.photos-custom #photo-popup-pre {
3881 left: 0;
3882 }
3883
3884 .item-page.photos-custom #photo-popup-next {
3885 right: 0;
3886 }
3887 }
...\ No newline at end of file ...\ No newline at end of file
......
templates/protostar/index.php
...@@ -198,6 +198,7 @@ if ($this->params->get('logoFile')) { ...@@ -198,6 +198,7 @@ if ($this->params->get('logoFile')) {
198 <link rel="stylesheet" href="/templates/protostar/css/print.css" media="print"> 198 <link rel="stylesheet" href="/templates/protostar/css/print.css" media="print">
199 <script src="./js/jquery-1.12.4.min.js"></script> 199 <script src="./js/jquery-1.12.4.min.js"></script>
200 <script src="./js/slick.min.js"></script> 200 <script src="./js/slick.min.js"></script>
201 <script src="/templates/protostar/js/photo_popup.js"></script>
201 <link rel="stylesheet" href="./js/slick.css" media="screen" /> 202 <link rel="stylesheet" href="./js/slick.css" media="screen" />
202 203
203 <link rel="apple-touch-icon" href="/apple-touch-icon.png"> 204 <link rel="apple-touch-icon" href="/apple-touch-icon.png">
......
templates/protostar/js/photo_popup.js 0 → 100644
1 jQuery(function($) {
2 /**
3 * フォトライブラリ用のpopupのためのHTMLをセット
4 */
5 $(document).ready(function() {
6 const photosCustom = $('.item-page.photos-custom');
7 if (photosCustom[0]) {
8 let photosCustomHtml = '';
9 photosCustomHtml += '<div id="photo-popup-wrapper">';
10 photosCustomHtml += '<div id="photo-popup">';
11 photosCustomHtml += '<img id="photo-popup-img" src="" alt="">';
12 photosCustomHtml += '</div>';
13 photosCustomHtml += '<a id="photo-popup-close" class="popup-button" href="#">×</a>';
14 photosCustomHtml += '<a id="photo-popup-pre" class="popup-button" href="#"><</a>';
15 photosCustomHtml += '<a id="photo-popup-next" class="popup-button" href="#">></a>';
16 photosCustomHtml += '<div id="photo-popup-under">';
17 photosCustomHtml += '</div>';
18 photosCustomHtml += '</div>';
19 photosCustom.append(photosCustomHtml);
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 }
29 });
30
31 /**
32 * 画面サイズが4:3より縦長の場合は、写真を画面幅いっぱいに表示する。
33 */
34 function setPopup() {
35 const winW = $(window).innerWidth();
36 const winH = $(window).innerHeight();
37 // 画面表示領域のアスペクト比を取得
38 const asp = winH / winW;
39 if (asp < 0.75) {
40 $('#photo-popup').removeClass('horizontal');
41 $('#photo-popup').addClass('Vertical');
42 } else {
43 $('#photo-popup').removeClass('Vertical');
44 $('#photo-popup').addClass('horizontal');
45 }
46 }
47
48 /**
49 * 画像のクリックをトリガーにして、ポップアップで表示する画像URLの取得と、
50 * popupの制御を行う関数の実行。
51 */
52 $('.item-page.photos-custom > div p').on('click', function() {
53 // クリックされた画像のインデックス番号を取得
54 let index = $('.item-page.photos-custom > div p').index(this);
55 // 画像の数を取得
56 const imagesLength = $('.item-page.photos-custom > div p').length;
57 changePopup(index, imagesLength);
58 // popupで表示させる画像URLを取得
59 const src = $(this).children('img').attr('src');
60 const $img = $('#photo-popup-img');
61 // popupに画像URLをセット
62 $img.attr('src', src);
63 setPopup();
64 $(window).resize(function () {
65 setPopup();
66 });
67 setTimeout(function () {
68 // popupの表示
69 $('#photo-popup-wrapper').fadeIn();
70 // popupのみスクロール可とする。
71 $('body').css('overflow','hidden');
72 }, 50);
73 setTimeout(function () {
74 popupScrollSet($img);
75 }, 100);
76 });
77
78 /**
79 * ポップアップの状態の制御
80 * ･ 画像の切り替え
81 * ･ ポップアップの表示、非表示
82 *
83 * @param {*} index クリックされた画像の親要素の中での順番
84 * @param {*} imagesLength 画像のインデックス番号の最大値を取得
85 */
86 function changePopup(index, imagesLength) {
87 $('#photo-popup-pre').off('click').on('click', function() {
88 const $img = $('#photo-popup-img');
89 let src = '';
90 // 透明にする
91 $img.css('opacity',0);
92 if (index === 0) {
93 index = imagesLength - 1;
94 src = $('.item-page.photos-custom > div p').eq(imagesLength).children('img').attr('src');
95 } else {
96 index--;
97 src = $('.item-page.photos-custom > div p').eq(index).children('img').attr('src');
98 }
99 setTimeout(function () {
100 // transitionで透明になりきった時点で画像の差し替えを実行
101 $img.attr('src', src);
102 }, 400);
103 setTimeout(function () {
104 popupScrollSet($img);
105 }, 500);
106 setTimeout(function () {
107 $('#photo-popup').css('display','');
108 $img.css('opacity','');
109 }, 600);
110 });
111
112 $('#photo-popup-next').off('click').on('click', function() {
113 const $img = $('#photo-popup-img');
114 let src = '';
115 // 透明にする
116 $('#photo-popup-img').css('opacity',0);
117 if (index === imagesLength - 1) {
118 index = 0;
119 src = $('.item-page.photos-custom > div p').eq(index).children('img').attr('src');
120 } else {
121 index++;
122 src = $('.item-page.photos-custom > div p').eq(index).children('img').attr('src');
123 }
124 setTimeout(function () {
125 // transitionで透明になりきった時点で画像の差し替えを実行
126 $img.attr('src', src);
127 }, 400);
128 setTimeout(function () {
129 popupScrollSet($img);
130 }, 500);
131 setTimeout(function () {
132 $('#photo-popup').css('display','');
133 $img.css('opacity','');
134 }, 600);
135 });
136
137 $('#photo-popup-close').off('click').on('click', function() {
138 $('#photo-popup-wrapper').fadeOut();
139 $('body').css('overflow','');
140 });
141
142 $('#photo-popup-under').off('click').on('click', function() {
143 $('#photo-popup-wrapper').fadeOut();
144 $('body').css('overflow','');
145 });
146 }
147
148 /**
149 * 画像が縦長の場合、ポップアップ表示の際にスクロール値を画像の縦中央にセットする。
150 * @param {*} $img ポップアップに表示している画像
151 */
152 function popupScrollSet($img) {
153 const imgHeight = $img[0].naturalHeight; // 画像の本来の高さ
154 const imgWidth = $img[0].naturalWidth; // 画像の本来の幅
155 if (imgHeight > imgWidth) {
156 const wrapperWidth = $('#photo-popup').width(); // 画像の包括要素の幅
157 const scaleW = wrapperWidth / imgWidth; // 画像の横幅の縮尺比率
158 const scrollTop = imgHeight * scaleW * 0.25; // スクロール位置(画像の縮尺後の高さ×25%)
159 $('#photo-popup').scrollTop(scrollTop);
160 console.log('test');
161 }
162 }
163 });
...\ 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!