php 170522フォトギャラリーで縦写真も高さをトリミングして合わるる

Posted 2021-05-05

/* -----------------------------------------------------------
    .con_gallery02
----------------------------------------------------------- */
.con_gallery02 {
	@extend %bw;
	@include cV(margin-bottom, 50px, 40px, 30px);
	padding-top: 10px;
	@include mq(max_w, 1280px) {
		width: 95%;
		margin: 0 auto;
	}
	.slick-track {
		width: 100% !important;
		.slick-slide {
			width: 100% !important;
			@extend %cf;
			.photo {
				width: 19%;
				margin-left: .5%;
				margin-right: .5%;
				float: left;
				margin-bottom: 10px;
				overflow: hidden;
				width: 243px;/* トリミングしたい枠の幅 */
				height: 182px;/* トリミングしたい枠の高さ */
				position: relative;
				@include mq(max_w, 1280px) {
					width: 24%;
				}
				@include mq(tab) {
					width: 32.3%;
					height: 145px;
				}
				a {
					text-decoration: none !important;
					color: #fff;
					width: 100%;
					img {
						position: absolute;
						top: 50%;
						left: 50%;
						-webkit-transform: translate(-50%, -50%);
						-ms-transform: translate(-50%, -50%);
						transform: translate(-50%, -50%);
						width: 100%;
						height: auto;
					}
					span {
						position: absolute;
						bottom: 0;
						left: 0;
						right: 0;
						display: block;
						text-align: center;
						background: rgba(000, 000, 000, .8);
					}
					&:hover {
						color: #fff !important;
						opacity: .8 !important;
						background: #fff !important;
					}
				}
			}
		}
	}
}

.mfp-content {
	.mfp-title {
		text-align: center;
		padding-right: 0;
		padding-top: 10px;
	}
}

<link href="../../css/magnific-popup.css" rel="stylesheet" type="text/css" media="all">
<link href="../../css/remodal.css" rel="stylesheet" type="text/css" media="all">
<link href="../../css/remodal-default-theme.css" rel="stylesheet" type="text/css" media="all">

<script src="../../js/jquery.magnific-popup.min.js"></script>
<script src="../../js/remodal.js"></script>

$(function(){
	$('.carousel').each(function() {
		$(this).slick({
			infinite: true,
			slidesToShow: 6,
			slidesToScroll: 1,
			autoplay: false,
			dots: false,
			responsive: [{
				breakpoint: 767,
				settings: {
					slidesToShow: 2
				}
			}]
		});
	});

	$('.gallery').each(function() {
		$(this).magnificPopup({
			delegate: 'a',
			type: 'image',
			gallery: { //ギャラリー表示にする
				enabled:true
			}
		});
	});
});

<div class="con_gallery02 view_pc-tab">
	<div class="box_gallery carousel gallery slick-slider">
		<div aria-live="polite" class="slick-list draggable">
			<div class="photo">
				<a href="images/dummy/img_gal_01.jpg" title="ギャラリー1">
					<img src="images/dummy/img_gal_01.jpg" alt="ギャラリー1">
					<span>ギャラリー1</span>
				</a>
			</div>
			<div class="photo">
				<a href="images/dummy/img_gal_02.jpg" title="ギャラリー2">
					<img src="images/dummy/img_gal_02.jpg" alt="ギャラリー2">
					<span>ギャラリー2</span>
				</a>
			</div>
			<div class="photo">
				<a href="images/dummy/img_gal_03.jpg" title="ギャラリー3">
					<img src="images/dummy/img_gal_03.jpg" alt="ギャラリー3">
					<span>ギャラリー3</span>
				</a>
			</div>
			<div class="photo">
				<a href="images/dummy/img_gal_04.jpg" title="ギャラリー4">
					<img src="images/dummy/img_gal_04.jpg" alt="ギャラリー4">
					<span>ギャラリー4</span>
				</a>
			</div>
		</div>
	</div>
</div>