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 {
.videos-custom-item-explanation {
font-size: 0.875rem;
}
}
/* -------------------------------------------------------------------------
　フォトライブラリ (メニュー(記事一覧))
------------------------------------------------------------------------- */
.blog.photos-custom .items-leading {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
justify-content: space-between;
}
.blog.photos-custom .items-leading > div {
position: relative;
width: calc(50% - 16px);
box-sizing: border-box;
margin-bottom: 16px;
margin-left: auto;
margin-right: auto;
}
/* 記事本文が表示されないようにdisplay: none; */
.blog.photos-custom .items-leading > div > * {
display: none;
}
/* 記事一覧に必要な要素をdisplay: block; */
.blog.photos-custom .items-leading > div .page-header {
display: block;
}
/* 記事一覧に必要な要素をdisplay: block; */
.blog.photos-custom .items-leading > div .article-info {
display: block;
position: absolute;
bottom: -49px;
right: 0;
margin: 0;
padding: 0;
font-size: 0.875rem;
line-height: 0.875rem;
}
/* 記事一覧に必要な要素をdisplay: block; */
.blog.photos-custom .items-leading > div .item-image {
display: block;
float: none;
margin: 0;
}
.blog.photos-custom .items-leading > div .item-image a {
transition: all 1s;
}
/* レスポンシブ */
@media (max-width: 500px) {
.blog.photos-custom .foto-custom-wrapper {
display: none;
}
.blog.photos-custom .items-leading {
display: block;
}
.blog.photos-custom .items-leading > div {
width: 100%;
margin-bottom: 24px;
}
.blog.photos-custom .items-leading > div .article-info {
right: 6px;
}
}
/* -------------------------------------------------------------------------
　フォトライブラリ (記事)
------------------------------------------------------------------------- */
.item-page.photos-custom .page-header {
display: block;
}
.item-page.photos-custom > div {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.item-page.photos-custom > div p {
position: relative;
/* 親要素が最大の幅である840pxのときに幅268pxになる */
width: calc(268/840*100%);
height: 0;
/* paddingで高さを用意する */
/* 自分自身の幅が(840*100%)を基準にしているので、それに対して3:4のアスペクト比になるように高さを用意する */
padding-bottom: calc(201/840*100%);
box-sizing: border-box;
margin-bottom: calc(16/840*100%);
overflow: hidden;
border: 2px solid #999999;
background-color: #fff;
}
.item-page.photos-custom > div p img {
display: block;
/* 親要素の真ん中に表示 */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
transition: all 1s;
}
.item-page.photos-custom > div p:last-child {
/* p:last-childはエディターによって自動生成される<p>&nbsp;</p>なのでdisplay: none;とする */
display: none;
}
@media (max-width: 500px) {
.item-page.photos-custom > div p {
width: calc(228/470*100%);
padding-bottom: calc(171/470*100%);
}
}
/* -------------------------------------------------------------------------
フォトライブラリポップアップ (記事)
------------------------------------------------------------------------- */
#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;
}
.item-page.photos-custom.active-popup #photo-popup #photo-popup-img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
.item-page.photos-custom.active-popup #photo-popup-under {
display: block;
position: fixed;
top: 0;
left: 0;
z-index: 210;
width: 100vw;
height: 100vh;
background-color: rgba(255, 255, 255, 0.8);
}
.item-page.photos-custom.active-popup .popup-button {
display: block;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background-color: rgba(255, 255, 255, 0.6);
color: #222;
text-decoration: none;
z-index: 230;
border: 1px solid #999;
}
.item-page.photos-custom.active-popup #photo-popup-close {
position: fixed;
top: 0;
right: 0;
transform: translate(0, 0);
}
.item-page.photos-custom.active-popup #photo-popup-pre {
position: fixed;
top: 50%;
left: calc(5% - 2px);
transform: translate(0, -50%);
}
.item-page.photos-custom.active-popup #photo-popup-next {
position: fixed;
top: 50%;
right: calc(5% - 2px);
transform: translate(0, -50%);
}
@media (max-width: 500px) {
.item-page.photos-custom.active-popup #photo-popup-pre {
left: 0;
}
.item-page.photos-custom.active-popup #photo-popup-next {
right: 0;
}
}
\ No newline at end of file
......
templates/protostar/index.php
......@@ -198,6 +198,7 @@ if ($this->params->get('logoFile')) {
<link rel="stylesheet" href="/templates/protostar/css/print.css" media="print">
<script src="./js/jquery-1.12.4.min.js"></script>
<script src="./js/slick.min.js"></script>
<script src="/templates/protostar/js/photo_popup.js"></script>
<link rel="stylesheet" href="./js/slick.css" media="screen" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
......
templates/protostar/js/photo_popup.js 0 → 100644
jQuery(function($) {
/**
* フォトライブラリ用のpopupのためのHTMLをセット
*/
$(document).ready(function() {
const photosCustom = $('.item-page.photos-custom');
if (photosCustom[0]) {
let photosCustomHtml = '';
photosCustomHtml += '<div id="photo-popup">';
photosCustomHtml += '<img id="photo-popup-img" src="" alt="">';
photosCustomHtml += '</div>';
photosCustomHtml += '<a id="photo-popup-close" class="popup-button" href="#">×</a>';
photosCustomHtml += '<a id="photo-popup-pre" class="popup-button" href="#"><</a>';
photosCustomHtml += '<a id="photo-popup-next" class="popup-button" href="#">></a>';
photosCustomHtml += '<div id="photo-popup-under">';
photosCustomHtml += '</div>';
photosCustom.append(photosCustomHtml);
}
});
/**
* ポップアップで表示する画像URLの取得と、popupの制御を行う関数の実行。
*/
$('.item-page.photos-custom > div p').on('click', function() {
$('.item-page.photos-custom').addClass('active-popup');
// popupで表示させる画像URL
const src = $(this).children('img').attr('src');
$('#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();
});
});
/**
* ポップアップの大きさの制御
*/
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 画像のインデックス番号の最大値を取得
*/
function changePopup(index, imagesNum) {
$('#photo-popup-pre').off('click').on('click', function() {
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);
} else {
index--;
const src = $('.item-page.photos-custom > div p').eq(index).children('img').attr('src');
$('#photo-popup-img').attr('src', src);
}
});
$('#photo-popup-next').off('click').on('click', function() {
if (index === imagesNum) {
index = 0;
const src = $('.item-page.photos-custom > div p').eq(index).children('img').attr('src');
$('#photo-popup-img').attr('src', src);
} else {
index++;
const src = $('.item-page.photos-custom > div p').eq(index).children('img').attr('src');
$('#photo-popup-img').attr('src', src);
}
});
$('#photo-popup-close').off('click').on('click', function() {
$('.item-page.photos-custom').removeClass('active-popup');
});
$('#photo-popup-under').off('click').on('click', function() {
$('.item-page.photos-custom').removeClass('active-popup');
});
}
});
\ 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!