php 20180402ギャラリー（マリオット）
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了php 20180402ギャラリー（マリオット）相关的知识，希望对你有一定的参考价值。
@charset "utf-8";
/* ===================================================================
CSS information
file name : copy.css
author : Ability Consultant
style info : コピー
=================================================================== */
@import "settings";
/* -----------------------------------------------------------
con_nav
----------------------------------------------------------- */
.con_nav {
position: relative;
@include cV(margin,100px auto,50px auto,30px auto);
&:before {
content: "";
height: 1px;
width: 200%;
background: #a89e9b;
position: absolute;
z-index: 0;
top: 82px;
left: -50%;
@include mq(tab_sp) {
display: none;
}
}
.box_page_tab {
@extend %bw;
max-width: 980px;
li {
width: 50%;
float: left;
border: 1px solid #a89e9b;
border-bottom: none;
background: #999;
color: #fff;
cursor: pointer;
a {
display: block;
padding: 10px 5px;
color: #fff;
text-align: center;
text-decoration: none;
.st_basic_en {
.en {
@include fsz-cha(30,24,18);
}
.jp {
@include fsz-cha(15,15,12);
}
}
}
&.select {
background: #000;
position: relative;
width: 50%;
float: left;
a {
cursor: default;
}
&:before {
content: "";
width: 100%;
height: 5px;
background: #a0072b;
position: absolute;
top: 0;
left: 0;
}
}
&.click {
transition: .2s;
&:hover {
background: #000;
position: relative;
width: 50%;
float: left;
&:before {
content: "";
width: 100%;
height: 5px;
background: #a0072b;
position: absolute;
top: 0;
left: 0;
}
}
}
}
}
}
/* -----------------------------------------------------------
con_photo
----------------------------------------------------------- */
.con_photo {
width: 95%;
margin: 0 auto;
@include cV(margin,220px auto 100px,150px auto 60px,120px auto 50px);
@include mq(min_max_w,500px,767px) {
margin: 180px auto 30px;
}
#wrapper {
position: relative;
margin: 0 auto;
max-height: 800px;
@include mq(tab) {
max-height: 600px;
}
@include mq(sp) {
max-height: 500px;
}
#container {
width: 100%;
margin: 0 auto;
position: relative;
}
.item {
width: 350px;
margin: 5px;
@include mq(tab) {
width: 220px;
}
@include mq(sp) {
width: 150px;
}
@include mq(min_max_w,500px,767px) {
width: 220px;
}
}
.item img {
width: 100%;
}
figcaption {
bottom: 0;
left: 0;
position: absolute;
transition: 500ms;
width: 100%;
background: rgba(0, 0, 0, 0.7);
color: white;
padding: .5rem 1rem;
font-size: .9em;
@include mq(sp) {
font-size: .7em;
padding: .3rem .6rem;
}
@include mq(min_max_w,500px,767px) {
font-size: .6em;
}
}
}
.btn_basic {
text-align: center;
max-width: 320px;
margin: 20px auto;
@include mq(sp) {
width: 100%;
max-width: 100%;
}
}
}
/* -----------------------------------------------------------
con_movie
----------------------------------------------------------- */
.con_movie {
@extend %bw;
max-width: 1700px;
@include mq(min_max_w,1025px,1700px) {
width: 95%;
}
@include cV(margin,220px auto 100px,150px auto 60px,120px auto 50px);
@include mq(min_max_w,530px,767px) {
margin: 160px auto 30px;
}
#wrapper {
#container {
display: flex;
flex-wrap: wrap;
.box {
@include cV(width,25%,33%,49%);
padding: .5%;
float: left;
a {
position: relative;
display: block;
text-decoration: none;
&:hover {
.img {
span {
background: #cc181e;
}
}
}
.img {
background-size: contain;
margin: 0 auto;
text-align: center;
position: relative;
img {
width: 100%;
}
span {
background: rgba(0, 0, 0, 0.5);
color: #fff;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 50px;
height: 30px;
font-size: 1.2em;
line-height: 30px;
text-align: center;
border-radius: 10px;
i {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
}
}
}
.title {
text-align: center;
margin: 0 auto;
bottom: 0;
left: 0;
position: absolute;
transition: 500ms;
width: 100%;
background: rgba(0, 0, 0, 0.7);
color: white;
padding: .5rem 1rem;
font-size: .9em;
@include mq(sp) {
font-size: .65em;
padding: .2rem .4rem;
}
@include mq(min_max_w,500px,767px) {
font-size: .6em;
}
}
}
}
}
}
}//movie
<?php $page = 'gallery'; $index = 'movie'; include "../../config/include.php"; ?>
<!-- *** stylesheet *** -->
<?php include "../../templates/common_css.php"; ?>
<link href="../../css/magnific-popup.css" rel="stylesheet" type="text/css" media="all">
<link href="../../css/<?php echo $page; ?>.css" rel="stylesheet" type="text/css" media="all">
<!-- *** javascript *** -->
<?php include "../../templates/common_js.php"; ?>
<script src="../../js/jquery.magnific-popup.min.js"></script>
<!-- <script src="../js/readmore.min.js"></script>
<script src="../js/imagesloaded.pkgd.min.js"></script> -->
<script>
$(function(){
var windowW = (window.innerWidth||document.documentElement.clientWidth||0);
if (windowW > 736) {
$('.popup-youtube').magnificPopup({
type: 'iframe',
mainClass: 'mfp-fade',
removalDelay: 160,
preloader: false,
fixedContentPos: false
});
}
});
</script>
</head>
<body id="<?php echo $page; ?>">
<?php include "../../templates/header.php"; ?>
<div id="contents">
<div class="con_pgtitle">
<div class="title">
<h1><span class="en">gallery</span><span class="jp">ムービーギャラリー</span></h1>
</div>
<p class="img"><img src="images/img_pgtitle.jpg" alt="ムービーギャラリー"></p>
</div><!-- /.con_pgtitle -->
<div class="con_nav">
<ul class="box_page_tab">
<li class="click">
<a href="../">
<h3 class="st_basic_en"><span class="en">PHOTO GALLERY</span><span class="jp">フォトギャラリー</span></h3>
</a>
</li>
<li class="select">
<a href="./">
<h3 class="st_basic_en"><span class="en">MOVIE GALLERY</span><span class="jp">ムービーギャラリー</span></h3>
</a>
</li>
</ul>
</div> <!-- /.con_nav -->
<div class="con_movie">
<div id="wrapper">
<div id="container">
<div class="box">
<a class="popup-youtube" href="https://www.youtube.com/watch?v=PC-nNITDma0">
<p class="img"><img src="http://img.youtube.com/vi/PC-nNITDma0/mqdefault.jpg" alt="オキナワ マリオット リゾート & スパ"><span><i class="fa fa-play"></i></span></p>
<p class="title">オキナワ マリオット リゾート & スパ</p>
</a>
</div>
<div class="box">
<a class="popup-youtube" href="https://www.youtube.com/watch?v=PC-nNITDma0">
<p class="img"><img src="http://img.youtube.com/vi/PC-nNITDma0/mqdefault.jpg" alt="オキナワ マリオット リゾート & スパ"><span><i class="fa fa-play"></i></span></p>
<p class="title">オキナワ マリオット リゾート & スパ</p>
</a>
</div>
<div class="box">
<a class="popup-youtube" href="https://www.youtube.com/watch?v=PC-nNITDma0">
<p class="img"><img src="http://img.youtube.com/vi/PC-nNITDma0/mqdefault.jpg" alt="オキナワ マリオット リゾート & スパ"><span><i class="fa fa-play"></i></span></p>
<p class="title">オキナワ マリオット リゾート & スパ</p>
</a>
</div>
<div class="box">
<a class="popup-youtube" href="https://www.youtube.com/watch?v=PC-nNITDma0">
<p class="img"><img src="http://img.youtube.com/vi/PC-nNITDma0/mqdefault.jpg" alt="オキナワ マリオット リゾート & スパ"><span><i class="fa fa-play"></i></span></p>
<p class="title">オキナワ マリオット リゾート & スパ</p>
</a>
</div>
<div class="box">
<a class="popup-youtube" href="https://www.youtube.com/watch?v=PC-nNITDma0">
<p class="img"><img src="http://img.youtube.com/vi/PC-nNITDma0/mqdefault.jpg" alt="オキナワ マリオット リゾート & スパ"><span><i class="fa fa-play"></i></span></p>
<p class="title">オキナワ マリオット リゾート & スパ</p>
</a>
</div>
<div class="box">
<a class="popup-youtube" href="https://www.youtube.com/watch?v=PC-nNITDma0">
<p class="img"><img src="http://img.youtube.com/vi/PC-nNITDma0/mqdefault.jpg" alt="オキナワ マリオット リゾート & スパ"><span><i class="fa fa-play"></i></span></p>
<p class="title">オキナワ マリオット リゾート & スパ</p>
</a>
</div>
<div class="box">
<a class="popup-youtube" href="https://www.youtube.com/watch?v=PC-nNITDma0">
<p class="img"><img src="http://img.youtube.com/vi/PC-nNITDma0/mqdefault.jpg" alt="オキナワ マリオット リゾート & スパ"><span><i class="fa fa-play"></i></span></p>
<p class="title">オキナワ マリオット リゾート & スパ</p>
</a>
</div>
<div class="box">
<a class="popup-youtube" href="https://www.youtube.com/watch?v=PC-nNITDma0">
<p class="img"><img src="http://img.youtube.com/vi/PC-nNITDma0/mqdefault.jpg" alt="オキナワ マリオット リゾート & スパ"><span><i class="fa fa-play"></i></span></p>
<p class="title">オキナワ マリオット リゾート & スパ</p>
</a>
</div>
<div class="box">
<a class="popup-youtube" href="https://www.youtube.com/watch?v=PC-nNITDma0">
<p class="img"><img src="http://img.youtube.com/vi/PC-nNITDma0/mqdefault.jpg" alt="オキナワ マリオット リゾート & スパ"><span><i class="fa fa-play"></i></span></p>
<p class="title">オキナワ マリオット リゾート & スパ</p>
</a>
</div>
<div class="box">
<a class="popup-youtube" href="https://www.youtube.com/watch?v=PC-nNITDma0">
<p class="img"><img src="http://img.youtube.com/vi/PC-nNITDma0/mqdefault.jpg" alt="オキナワ マリオット リゾート & スパ"><span><i class="fa fa-play"></i></span></p>
<p class="title">オキナワ マリオット リゾート & スパ</p>
</a>
</div>
<div class="box">
<a class="popup-youtube" href="https://www.youtube.com/watch?v=PC-nNITDma0">
<p class="img"><img src="http://img.youtube.com/vi/PC-nNITDma0/mqdefault.jpg" alt="オキナワ マリオット リゾート & スパ"><span><i class="fa fa-play"></i></span></p>
<p class="title">オキナワ マリオット リゾート & スパ</p>
</a>
</div>
</div>
</div>
</div>
<div class="con_topicpath">
<ul>
<li><a href="<?php echo LOCATION;?>">TOP</a></li>
<li><a href="../">フォトギャラリー</a></li>
<li>ムービーギャラリー</li>
</ul>
</div><!-- /.con_topicpath -->
</div><!-- /#contents -->
<?php include "../../templates/search.php"; ?>
<?php include "../../templates/footer.php"; ?>
<!-- <script>
$(function(){
$('#wrapper').readmore({
speed: 1000,
moreLink: '<a href="#" class="btn_basic">もっと見る</a>',
lessLink: '<a href="#" class="btn_basic">閉じる</a>'
});
});
</script> -->
</body>
</html>
//マリオットテスト
//http://west02.ab-ss.com/okinawa-marriott.com/html/gallery/
//JSは下記3つを使用
//imagesloaded.pkgd.min.js
//masonry.pkgd.min.js
//readmore.min.js
<?php $page = 'gallery'; include "../config/include.php"; ?>
<!-- *** stylesheet *** -->
<?php include "../templates/common_css.php"; ?>
<link href="../css/magnific-popup.css" rel="stylesheet" type="text/css" media="all">
<link href="../css/<?php echo $page; ?>.css" rel="stylesheet" type="text/css" media="all">
<!-- *** javascript *** -->
<?php include "../templates/common_js.php"; ?>
<script src="../js/jquery.magnific-popup.min.js"></script>
<script src="js/readmore.min.js"></script>
<script src="js/masonry.pkgd.min.js"></script>
<script src="js/imagesloaded.pkgd.min.js"></script>
<script>
$(function(){
$('#wrapper .item').magnificPopup({
removalDelay: 300,
delegate: 'a',
type: 'image',
gallery: {
enabled: true
}
});
var $container = $('#container');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector: '.item',
columnWidth: 10,
isFitWidth: true,
isAnimated: true
});
});
});
</script>
</head>
<body id="<?php echo $page; ?>">
<?php include "../templates/header.php"; ?>
<div id="contents">
<div class="con_pgtitle">
<div class="title">
<h1><span class="en">gallery</span><span class="jp">フォトギャラリー</span></h1>
</div>
<p class="img"><img src="images/img_pgtitle.jpg" alt="フォトギャラリー"></p>
</div><!-- /.con_pgtitle -->
<div class="con_nav">
<ul class="box_page_tab">
<li class="select">
<a href="./">
<h3 class="st_basic_en"><span class="en">PHOTO GALLERY</span><span class="jp">フォトギャラリー</span></h3>
</a>
</li>
<li class="click">
<a href="movie/">
<h3 class="st_basic_en"><span class="en">MOVIE GALLERY</span><span class="jp">ムービーギャラリー</span></h3>
</a>
</li>
</ul>
</div><!-- /.con_nav -->
<div class="con_photo">
<div id="wrapper">
<div id="container">
<div class="item">
<a href="http://via.placeholder.com/500x600">
<img src="http://via.placeholder.com/500x600" alt="">
<figcaption>
<div class="effeckt">
<p>タイトルタイトル</p>
</div>
</figcaption>
</a>
</div>
<div class="item">
<a href="http://via.placeholder.com/600x500">
<img src="http://via.placeholder.com/600x500" alt="">
<figcaption>
<div class="effeckt">
<p>タイトルタイトルタイトルタイトルタイトルタイトル</p>
</div>
</figcaption>
</a>
</div>
<div class="item">
<a href="http://via.placeholder.com/500x350">
<img src="http://via.placeholder.com/500x350" alt="">
<figcaption>
<div class="effeckt">
<p>タイトルタイトルタイトル</p>
</div>
</figcaption>
</a>
</div>
<div class="item">
<a href="http://via.placeholder.com/500x500">
<img src="http://via.placeholder.com/500x500" alt="">
<figcaption>
<div class="effeckt">
<p>タイトルタイトルタイトルタイトルタイトルタイトルタイトル</p>
</div>
</figcaption>
</a>
</div>
<div class="item">
<a href="http://via.placeholder.com/600x600">
<img src="http://via.placeholder.com/600x600" alt="">
<figcaption>
<div class="effeckt">
<p>タイトルタイトル</p>
</div>
</figcaption>
</a>
</div>
<div class="item">
<a href="http://via.placeholder.com/500x350">
<img src="http://via.placeholder.com/500x350" alt="">
<figcaption>
<div class="effeckt">
<p>タイトルタイトルタイトルタイトルタイトルタイトル</p>
</div>
</figcaption>
</a>
</div>
<div class="item">
<a href="http://via.placeholder.com/500x350">
<img src="http://via.placeholder.com/500x350" alt="">
<figcaption>
<div class="effeckt">
<p>タイトルタイトルタイトル</p>
</div>
</figcaption>
</a>
</div>
<div class="item">
<a href="http://via.placeholder.com/500x500">
<img src="http://via.placeholder.com/500x500" alt="">
<figcaption>
<div class="effeckt">
<p>タイトルタイトルタイトルタイトルタイトルタイトル</p>
</div>
</figcaption>
</a>
</div>
<div class="item">
<a href="http://via.placeholder.com/500x350">
<img src="http://via.placeholder.com/500x350" alt="">
<figcaption>
<div class="effeckt">
<p>タイトルタイトル</p>
</div>
</figcaption>
</a>
</div>
<div class="item">
<a href="http://via.placeholder.com/500x350">
<img src="http://via.placeholder.com/500x350" alt="">
<figcaption>
<div class="effeckt">
<p>タイトルタイトルタイトルタイトルタイトルタイトル</p>
</div>
</figcaption>
</a>
</div>
<div class="item">
<a href="http://via.placeholder.com/350x350">
<img src="http://via.placeholder.com/350x350" alt="">
<figcaption>
<div class="effeckt">
<p>タイトルタイトルタイトル</p>
</div>
</figcaption>
</a>
</div>
<div class="item">
<a href="http://via.placeholder.com/600x300">
<img src="http://via.placeholder.com/600x300" alt="">
<figcaption>
<div class="effeckt">
<p>タイトルタイトルタイトルタイトルタイトルタイトル</p>
</div>
</figcaption>
</a>
</div>
<div class="item">
<a href="http://via.placeholder.com/500x350">
<img src="http://via.placeholder.com/500x350" alt="">
<figcaption>
<div class="effeckt">
<p>タイトルタイトル</p>
</div>
</figcaption>
</a>
</div>
<div class="item">
<a href="http://via.placeholder.com/500x350">
<img src="http://via.placeholder.com/500x350" alt="">
<figcaption>
<div class="effeckt">
<p>タイトルタイトルタイトルタイトルタイトルタイトル</p>
</div>
</figcaption>
</a>
</div>
<div class="item">
<a href="http://via.placeholder.com/350x350">
<img src="http://via.placeholder.com/350x350" alt="">
<figcaption>
<div class="effeckt">
<p>タイトルタイトルタイトル</p>
</div>
</figcaption>
</a>
</div>
<div class="item">
<a href="http://via.placeholder.com/600x300">
<img src="http://via.placeholder.com/600x300" alt="">
<figcaption>
<div class="effeckt">
<p>タイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル</p>
</div>
</figcaption>
</a>
</div>
</div>
</div>
</div>
<div class="con_topicpath">
<ul>
<li><a href="<?php echo LOCATION;?>">TOP</a></li>
<li>フォトギャラリー</li>
</ul>
</div><!-- /.con_topicpath -->
</div><!-- /#contents -->
<?php include "../templates/search.php"; ?>
<?php include "../templates/footer.php"; ?>
<script>
$(function(){
$('#wrapper').readmore({
speed: 1000,
moreLink: '<a href="#" class="btn_basic">もっと見る</a>',
lessLink: '<a href="#" class="btn_basic">閉じる</a>'
});
});
</script>
</body>
</html>
以上是关于php 20180402ギャラリー（マリオット）的主要内容，如果未能解决你的问题，请参考以下文章
php 170522フォトギャラリーで縦写真も高さをトリミングして合わるる
json [php：ClassUploadPhp]画像アップロードライブラリClassUploadPhp note。 #PHP