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

@@ -3658,3 +3658,224 @@ body.itemid-132 table {
 		font-size: 0.875rem;
 		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

@@ -198,6 +198,7 @@ if ($this->params->get('logoFile')) {
     <link rel="stylesheet" href="/templates/protostar/css/print.css" media="print">
     <link rel="stylesheet" href="/templates/protostar/css/print.css" media="print">
     <script src="./js/jquery-1.12.4.min.js"></script>
     <script src="./js/jquery-1.12.4.min.js"></script>
     <script src="./js/slick.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="stylesheet" href="./js/slick.css" media="screen" />
 
 
     <link rel="apple-touch-icon" href="/apple-touch-icon.png">
     <link rel="apple-touch-icon" href="/apple-touch-icon.png">

+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