Skip to content

Yokihito Oki / kanoya-univercity-prod

Go to a project
Toggle navigation
Toggle navigation pinning
6e927f3c by TaishiTokudome
Options

フォトライブラリ機能の追加

1 parent 892c55b8
Inline Side-by-side
Showing 3 changed files with 320 additions and 0 deletions
templates/protostar/css/style_org.css
...@@ -3657,4 +3657,225 @@ body.itemid-132 table { ...@@ -3657,4 +3657,225 @@ body.itemid-132 table {
3657 .videos-custom-item-explanation { 3657 .videos-custom-item-explanation {
3658 font-size: 0.875rem; 3658 font-size: 0.875rem;
3659 } 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-bottom: 16px;
3677 margin-left: auto;
3678 margin-right: auto;
3679 }
3680
3681 /* 記事本文が表示されないようにdisplay: none; */
3682 .blog.photos-custom .items-leading > div > * {
3683 display: none;
3684 }
3685
3686 /* 記事一覧に必要な要素をdisplay: block; */
3687 .blog.photos-custom .items-leading > div .page-header {
3688 display: block;
3689 }
3690
3691 /* 記事一覧に必要な要素をdisplay: block; */
3692 .blog.photos-custom .items-leading > div .article-info {
3693 display: block;
3694 position: absolute;
3695 bottom: -49px;
3696 right: 0;
3697 margin: 0;
3698 padding: 0;
3699 font-size: 0.875rem;
3700 line-height: 0.875rem;
3701 }
3702
3703 /* 記事一覧に必要な要素をdisplay: block; */
3704 .blog.photos-custom .items-leading > div .item-image {
3705 display: block;
3706 float: none;
3707 margin: 0;
3708 }
3709
3710 .blog.photos-custom .items-leading > div .item-image a {
3711 transition: all 1s;
3712 }
3713
3714 /* レスポンシブ */
3715 @media (max-width: 500px) {
3716 .blog.photos-custom .foto-custom-wrapper {
3717 display: none;
3718 }
3719
3720 .blog.photos-custom .items-leading {
3721 display: block;
3722 }
3723
3724 .blog.photos-custom .items-leading > div {
3725 width: 100%;
3726 margin-bottom: 24px;
3727 }
3728
3729 .blog.photos-custom .items-leading > div .article-info {
3730 right: 6px;
3731 }
3732 }
3733
3734 /* -------------------------------------------------------------------------
3735 　フォトライブラリ (記事)
3736 ------------------------------------------------------------------------- */
3737 .item-page.photos-custom .page-header {
3738 display: block;
3739 }
3740
3741 .item-page.photos-custom > div {
3742 display: flex;
3743 align-items: center;
3744 justify-content: space-between;
3745 flex-wrap: wrap;
3746 }
3747
3748 .item-page.photos-custom > div p {
3749 position: relative;
3750 /* 親要素が最大の幅である840pxのときに幅268pxになる */
3751 width: calc(268/840*100%);
3752 height: 0;
3753 /* paddingで高さを用意する */
3754 /* 自分自身の幅が(840*100%)を基準にしているので、それに対して3:4のアスペクト比になるように高さを用意する */
3755 padding-bottom: calc(201/840*100%);
3756 box-sizing: border-box;
3757 margin-bottom: calc(16/840*100%);
3758 overflow: hidden;
3759 border: 2px solid #999999;
3760 background-color: #fff;
3761 }
3762
3763 .item-page.photos-custom > div p img {
3764 display: block;
3765 /* 親要素の真ん中に表示 */
3766 position: absolute;
3767 top: 50%;
3768 left: 50%;
3769 transform: translate(-50%, -50%);
3770 width: 100%;
3771 transition: all 1s;
3772 }
3773
3774 .item-page.photos-custom > div p:last-child {
3775 /* p:last-childはエディターによって自動生成される<p>&nbsp;</p>なのでdisplay: none;とする */
3776 display: none;
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 #photo-popup-wrapper {
3790 display: none;
3791 }
3792
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;
3807 position: fixed;
3808 top: 50%;
3809 left: 50%;
3810 transform: translate(-50%, -50%);
3811 overflow-y: scroll;
3812 background-color: #fff;
3813 z-index: 220;
3814 border: #222 solid 2px;
3815 max-width: 1440px;
3816 max-height: 1080px;
3817 }
3818
3819 .item-page.photos-custom.active-popup #photo-popup #photo-popup-img {
3820 position: absolute;
3821 top: 50%;
3822 left: 50%;
3823 transform: translate(-50%, -50%);
3824 width: 100%;
3825 }
3826
3827 .item-page.photos-custom.active-popup #photo-popup-under {
3828 display: block;
3829 position: fixed;
3830 top: 0;
3831 left: 0;
3832 z-index: 210;
3833 width: 100vw;
3834 height: 100vh;
3835 background-color: rgba(255, 255, 255, 0.8);
3836 }
3837
3838 .item-page.photos-custom.active-popup .popup-button {
3839 display: block;
3840 display: flex;
3841 align-items: center;
3842 justify-content: center;
3843 width: 40px;
3844 height: 40px;
3845 background-color: rgba(255, 255, 255, 0.6);
3846 color: #222;
3847 text-decoration: none;
3848 z-index: 230;
3849 border: 1px solid #999;
3850 }
3851
3852 .item-page.photos-custom.active-popup #photo-popup-close {
3853 position: fixed;
3854 top: 0;
3855 right: 0;
3856 transform: translate(0, 0);
3857 }
3858
3859 .item-page.photos-custom.active-popup #photo-popup-pre {
3860 position: fixed;
3861 top: 50%;
3862 left: calc(5% - 2px);
3863 transform: translate(0, -50%);
3864 }
3865
3866 .item-page.photos-custom.active-popup #photo-popup-next {
3867 position: fixed;
3868 top: 50%;
3869 right: calc(5% - 2px);
3870 transform: translate(0, -50%);
3871 }
3872
3873 @media (max-width: 500px) {
3874 .item-page.photos-custom.active-popup #photo-popup-pre {
3875 left: 0;
3876 }
3877
3878 .item-page.photos-custom.active-popup #photo-popup-next {
3879 right: 0;
3880 }
3660 } 3881 }
...\ 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">';
10 photosCustomHtml += '<img id="photo-popup-img" src="" alt="">';
11 photosCustomHtml += '</div>';
12 photosCustomHtml += '<a id="photo-popup-close" class="popup-button" href="#">×</a>';
13 photosCustomHtml += '<a id="photo-popup-pre" class="popup-button" href="#"><</a>';
14 photosCustomHtml += '<a id="photo-popup-next" class="popup-button" href="#">></a>';
15 photosCustomHtml += '<div id="photo-popup-under">';
16 photosCustomHtml += '</div>';
17 photosCustom.append(photosCustomHtml);
18 }
19 });
20
21 /**
22 * ポップアップで表示する画像URLの取得と、popupの制御を行う関数の実行。
23 */
24 $('.item-page.photos-custom > div p').on('click', function() {
25 $('.item-page.photos-custom').addClass('active-popup');
26 // popupで表示させる画像URL
27 const src = $(this).children('img').attr('src');
28 $('#photo-popup-img').attr('src', src);
29 // クリックされた画像の親要素の中での順番を取得
30 let index = $('.item-page.photos-custom > div p').index(this);
31 // 画像のインデックス番号の最大値を取得
32 const imagesNum = $('.item-page.photos-custom > div p img').length - 1;
33 changePopup(index, imagesNum);
34 setPopup();
35 $(window).resize(function () {
36 setPopup();
37 });
38 });
39
40 /**
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 * ポップアップの状態の制御
62 * ･ 画像の切り替え
63 * ･ ポップアップの表示、非表示
64 *
65 * @param {*} index クリックされた画像の親要素の中での順番
66 * @param {*} imagesNum 画像のインデックス番号の最大値を取得
67 */
68 function changePopup(index, imagesNum) {
69 $('#photo-popup-pre').off('click').on('click', function() {
70 if (index === 0) {
71 index = imagesNum;
72 const src = $('.item-page.photos-custom > div p').eq(imagesNum).children('img').attr('src');
73 $('#photo-popup-img').attr('src', src);
74 } else {
75 index--;
76 const src = $('.item-page.photos-custom > div p').eq(index).children('img').attr('src');
77 $('#photo-popup-img').attr('src', src);
78 }
79 });
80 $('#photo-popup-next').off('click').on('click', function() {
81 if (index === imagesNum) {
82 index = 0;
83 const src = $('.item-page.photos-custom > div p').eq(index).children('img').attr('src');
84 $('#photo-popup-img').attr('src', src);
85 } else {
86 index++;
87 const src = $('.item-page.photos-custom > div p').eq(index).children('img').attr('src');
88 $('#photo-popup-img').attr('src', src);
89 }
90 });
91 $('#photo-popup-close').off('click').on('click', function() {
92 $('.item-page.photos-custom').removeClass('active-popup');
93 });
94 $('#photo-popup-under').off('click').on('click', function() {
95 $('.item-page.photos-custom').removeClass('active-popup');
96 });
97 }
98 });
...\ 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!