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 {
bottom: 47px;
}
}
/* -------------------------------------------------------------------------
　ビデオライブラリページ
------------------------------------------------------------------------- */
.videos-custom h5 {
padding-left: 0;
font-size: 1.125rem;
background: none;
}
.videos-custom-item-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.videos-custom-item-wrapper:before {
content: "";
display: block;
min-width: 190px;
width: 30%;
height: 0px;
order: 1;
}
.videos-custom-item-wrapper:after {
content: "";
display: block;
min-width: 190px;
width: 30%;
height: 0px;
}
.videos-custom-item {
min-width: 190px;
width: 30%;
margin-bottom: 16px;
}
.videos-custom-item-title {
font-size: 1.125rem;
}
.videos-custom-item-explanation {
font-size: 1rem;
}
/* ビデオライブラリページ レスポンシブ*/
@media (max-width: 900px) {
.videos-custom-item {
width: 45%;
}
.videos-custom-item-wrapper:before {
width: 45%;
}
.videos-custom-item-wrapper:after {
width: 45%;
}
}
@media (max-width: 550px) {
.videos-custom-item-wrapper {
display: block;
}
.videos-custom-item {
height: auto;
width: 100%;
padding-bottom: 8px;
border-bottom: #003894 4px solid;
margin-bottom: 24px;
}
.videos-custom-item-title {
font-size: 1rem;
}
.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: 0 auto 16px 0;
}
/* 記事本文が表示されないように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: -56px;
right: 0;
margin: 0;
padding: 0;
}
/* 記事一覧に必要な要素をdisplay: block; */
.blog.photos-custom .items-leading > div .item-image {
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 .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 0.5s;
}
.item-page.photos-custom > div p:hover img {
transform: translate(-50%, -50%) scale3d(1.1, 1.1, 1.1);
}
@media (max-width: 500px) {
.item-page.photos-custom > div p {
width: calc(228/470*100%);
padding-bottom: calc(171/470*100%);
}
}
/* -------------------------------------------------------------------------
フォトライブラリポップアップ
------------------------------------------------------------------------- */
.item-page.photos-custom #photo-popup-wrapper {
display: none;
}
.item-page.photos-custom #photo-popup {
display: block;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 220;
max-width: 1260px;
max-height: 90%;
overflow: auto;
}
.item-page.photos-custom #photo-popup.Vertical {
width: 60%;
}
.item-page.photos-custom #photo-popup.horizontal {
width: 90%;
}
.item-page.photos-custom #photo-popup #photo-popup-img {
width: 100%;
transition: all 0.5s;
}
.item-page.photos-custom #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 .popup-button {
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;
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 #photo-popup-close {
position: fixed;
top: 5%;
right: 5%;
}
.item-page.photos-custom #photo-popup-pre {
position: fixed;
top: 50%;
left: 5%;
transform: translate(0, -50%);
}
.item-page.photos-custom #photo-popup-next {
position: fixed;
top: 50%;
right: 5%;
transform: translate(0, -50%);
}
@media (max-width: 800px) {
.item-page.photos-custom #photo-popup-close {
right: 0;
}
.item-page.photos-custom #photo-popup-pre {
left: 0;
}
.item-page.photos-custom #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-wrapper">';
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>';
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();
}
}
});
/**
* 画面サイズが4:3より縦長の場合は、写真を画面幅いっぱいに表示する。
*/
function setPopup() {
const winW = $(window).innerWidth();
const winH = $(window).innerHeight();
// 画面表示領域のアスペクト比を取得
const asp = winH / winW;
if (asp < 0.75) {
$('#photo-popup').removeClass('horizontal');
$('#photo-popup').addClass('Vertical');
} else {
$('#photo-popup').removeClass('Vertical');
$('#photo-popup').addClass('horizontal');
}
}
/**
* 画像のクリックをトリガーにして、ポップアップで表示する画像URLの取得と、
* popupの制御を行う関数の実行。
*/
$('.item-page.photos-custom > div p').on('click', function() {
// クリックされた画像のインデックス番号を取得
let index = $('.item-page.photos-custom > div p').index(this);
// 画像の数を取得
const imagesLength = $('.item-page.photos-custom > div p').length;
changePopup(index, imagesLength);
// popupで表示させる画像URLを取得
const src = $(this).children('img').attr('src');
const $img = $('#photo-popup-img');
// popupに画像URLをセット
$img.attr('src', src);
setPopup();
$(window).resize(function () {
setPopup();
});
setTimeout(function () {
// popupの表示
$('#photo-popup-wrapper').fadeIn();
// popupのみスクロール可とする。
$('body').css('overflow','hidden');
}, 50);
setTimeout(function () {
popupScrollSet($img);
}, 100);
});
/**
* ポップアップの状態の制御
* ･ 画像の切り替え
* ･ ポップアップの表示、非表示
*
* @param {*} index クリックされた画像の親要素の中での順番
* @param {*} imagesLength 画像のインデックス番号の最大値を取得
*/
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 = imagesLength - 1;
src = $('.item-page.photos-custom > div p').eq(imagesLength).children('img').attr('src');
} else {
index--;
src = $('.item-page.photos-custom > div p').eq(index).children('img').attr('src');
}
setTimeout(function () {
// transitionで透明になりきった時点で画像の差し替えを実行
$img.attr('src', src);
}, 400);
setTimeout(function () {
popupScrollSet($img);
}, 500);
setTimeout(function () {
$('#photo-popup').css('display','');
$img.css('opacity','');
}, 600);
});
$('#photo-popup-next').off('click').on('click', function() {
const $img = $('#photo-popup-img');
let src = '';
// 透明にする
$('#photo-popup-img').css('opacity',0);
if (index === imagesLength - 1) {
index = 0;
src = $('.item-page.photos-custom > div p').eq(index).children('img').attr('src');
} else {
index++;
src = $('.item-page.photos-custom > div p').eq(index).children('img').attr('src');
}
setTimeout(function () {
// transitionで透明になりきった時点で画像の差し替えを実行
$img.attr('src', src);
}, 400);
setTimeout(function () {
popupScrollSet($img);
}, 500);
setTimeout(function () {
$('#photo-popup').css('display','');
$img.css('opacity','');
}, 600);
});
$('#photo-popup-close').off('click').on('click', function() {
$('#photo-popup-wrapper').fadeOut();
$('body').css('overflow','');
});
$('#photo-popup-under').off('click').on('click', function() {
$('#photo-popup-wrapper').fadeOut();
$('body').css('overflow','');
});
}
/**
* 画像が縦長の場合、ポップアップ表示の際にスクロール値を画像の縦中央にセットする。
* @param {*} $img ポップアップに表示している画像
*/
function popupScrollSet($img) {
const imgHeight = $img[0].naturalHeight; // 画像の本来の高さ
const imgWidth = $img[0].naturalWidth; // 画像の本来の幅
if (imgHeight > imgWidth) {
const wrapperWidth = $('#photo-popup').width(); // 画像の包括要素の幅
const scaleW = wrapperWidth / imgWidth; // 画像の横幅の縮尺比率
const scrollTop = imgHeight * scaleW * 0.25; // スクロール位置(画像の縮尺後の高さ×25%)
$('#photo-popup').scrollTop(scrollTop);
console.log('test');
}
}
});
\ 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!