php 可过滤的画廊
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了php 可过滤的画廊相关的知识，希望对你有一定的参考价值。
var $carousel = $('.gallery-slider').slick({
autoplay: false,
slidesToShow: 100,
slidesToScroll: 12,
infinite: false,
variableWidth: true,
arrows: false,
dots: false,
slidesToShow: 100,
});
$('.gallery-filter a').click(function(e) {
e.preventDefault();
if ($(this).hasClass('active')) {
} else {
$('.gallery-filter a.active').removeClass('active');
$(this).addClass('active');
var filterType = $(this).data('filter');
if (filterType == 'all') {
$carousel.slick('slickUnfilter');
} else {
$carousel.slick('slickUnfilter');
$carousel.slick('slickFilter', '.' + filterType);
}
}
});
$('.image-video-filter a.active').click(function(e) {
e.preventDefault();
});
$('.gallery-filter-trigger').click(function() {
$('.mobile-gallery-filter').toggleClass('open');
});
$('.mobile-gallery-filter a').click(function() {
$(this).parent().parent().parent().removeClass('open');
});[
{
"key": "group_5b958953190d3",
"title": "Gallery",
"fields": [
{
"key": "field_5b95896995b34",
"label": "Gallery",
"name": "",
"type": "tab",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"placement": "left",
"endpoint": 0
},
{
"key": "field_5b95896f95b35",
"label": "Add Gallery Images",
"name": "gallery_images",
"type": "repeater",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"collapsed": "",
"min": 0,
"max": 0,
"layout": "table",
"button_label": "",
"sub_fields": [
{
"key": "field_5b95896f95b36",
"label": "Image",
"name": "image",
"type": "image",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"return_format": "array",
"preview_size": "thumbnail",
"library": "all",
"min_width": "",
"min_height": "",
"min_size": "",
"max_width": "",
"max_height": "",
"max_size": "",
"mime_types": ""
},
{
"key": "field_5b95896f95b37",
"label": "Image Type",
"name": "image_type",
"type": "clone",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"clone": [
"field_5b8b55306b4fe"
],
"display": "seamless",
"layout": "block",
"prefix_label": 0,
"prefix_name": 0
}
]
}
],
"location": [
[
{
"param": "post_type",
"operator": "==",
"value": "post"
}
]
],
"menu_order": 0,
"position": "normal",
"style": "default",
"label_placement": "top",
"instruction_placement": "label",
"hide_on_screen": "",
"active": 1,
"description": ""
}
].gallery-section{
background: $primary;
padding-top: 8vw;
.symbol{
margin-left: auto;
margin-right: auto;
display: block;
@include md{
margin-left: 0;
margin-right: 0;
}
}
.section-title{
color: white;
margin-bottom: 0.5em;
text-align: center;
@include md{
margin-bottom: 0;
text-align: left;
}
}
.first-row{
align-items: flex-end;
}
}
.gallery-filter-bar{
color: white;
text-align: center;
@include md{
text-align: right;
}
a{
display: inline-block;
vertical-align: middle;
position: relative;
color: #9eaabd;
text-transform: uppercase;
transition: ease all 0.5s;
font-weight: 600;
margin-left: 1em;
margin-right: 1em;
font-size: 0.8125rem;
line-height: 1.25em;
box-shadow: 0 1px 0 0 transparent;
@include sm{
margin-right: 0;
margin-left: 2em;
font-size: 0.9275rem;
}
&:last-child{
&:after{
display: none;
}
}
&:after{
display: none;
vertical-align: middle;
content: '';
width: 2px;
height: 15px;
background: #9eaabd;
position: absolute;
right: -1em;
top: 50%;
transform: translatey(-50%);
@include sm{
display: block;
}
}
&:hover{
text-decoration: none;
color: white;
box-shadow: 0 1px 0 0 #ce1e1f;
}
&:active, &:focus{
text-decoration: none;
}
&.active{
box-shadow: 0 1px 0 0 #ce1e1f;
color: white;
}
}
span{
color: $primary;
text-transform: uppercase;
}
.filter-title{
margin-bottom: 0;
@include sm{
margin-bottom: 15px;
}
@include lg{
margin-bottom: 0;
}
}
}
.img-gallery{
padding: 1.5em 0 0% 0;
width: 100%;
@include md{
padding: 2% 0 0% 0;
}
.container{
padding: 0;
}
.row{
margin: 0;
}
.gallery-slider{
border-left: 1px solid white;
background: #f4f4f4;
.slick-track{
max-width: 100% !important;
width: 100% !important;
transform: none !important;
}
.slick-slide.single-img-box{
opacity: 0;
visibility: hidden;
transform: translateY(50px) scale(0.5);
transition: ease opacity 0.5s, ease visibility 0.5s, ease transform 0.5s;
}
.slick-slide.single-img-box.slick-active{
opacity: 1;
visibility: visible;
transform: translateY(0px) scale(1);
position: relative;
}
.slick-dots li button:before{
color: white;
font-size: 17px;
}
.slick-dots li.slick-active button:before{
color: #eee;
}
.slick-next{
right: -5%;
font-size: 30px;
width: auto;
height: auto;
}
.slick-prev{
left: -5%;
z-index: 9;
font-size: 30px;
width: auto;
height: auto;
}
.single-img-box{
width: 50%;
padding-bottom: 35%;
height: 0;
margin: 0;
position: relative;
overflow: hidden;
backface-visibility: hidden;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
border-top: 0px solid transparent;
@include sm{
width: 33.333%;
padding-bottom: 23%;
}
@include md{
width: 25%;
padding-bottom: 17%;
}
.image-bg{
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
transform: scale(1);
width: 100%;
height: 100%;
transition: ease all 1s;
backface-visibility: hidden;
&:before{
display: block;
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba($primary, .65);
opacity: 0;
visibility: hidden;
transition: ease opacity 0.5s, ease visibility 0.5s;
}
}
img{
opacity: 0;
visibility: hidden;
width: 2em;
height: 2em;
transition: ease all 0.5s;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
&:hover{
cursor: pointer;
img{
opacity: 1;
visibility: visible;
}
.image-bg{
transform: scale(1.2);
&:before{
opacity: 1;
visibility: visible;
}
}
}
}
}
.gallery-filter-trigger{
display: block;
text-align: right;
font-size: 30px;
}
.mobile-gallery-filter-container{
position: relative;
z-index: 99;
.mobile-gallery-filter{
position: absolute;
top: 0;
left: 0;
width: 100%;
max-height: 0px;
overflow: hidden;
background: $secondary;
text-align: left;
transition: ease max-height 0.8s;
&.open{
max-height: 500px;
}
.gallery-filter-inner{
padding: 15px;
a{
color: white;
display: block;
}
}
}
}
}
// Hide every active slide except the first 12
.img-gallery .gallery-slider .slick-slide.single-img-box.slick-active:nth-child(n+13){
display: none;
}
// Hide every active slide except the first 9
// @media(min-width: 768px) and (max-width: 1023px){
// .img-gallery .gallery-slider .slick-slide.single-img-box.slick-active:nth-child(n+10){
// display: none;
// }
// }
// Hide every active slide except the first 3
// @media(max-width: 767px){
// .img-gallery .gallery-slider .slick-slide.single-img-box.slick-active:nth-child(n+4){
// display: none;
// }
// }<?php $service_type = get_field('service_type'); ?>
<div class="gallery-section">
<div class="container">
<div class="row first-row">
<div class="col-lg-5">
<div class="section-title">Project Gallery</div>
</div>
<div class="col-lg-7 gallery-filter-bar">
<div class="gallery-filter hidden-xs">
<?php
if(have_rows('main_services', 'option')):
while(have_rows('main_services', 'option')): the_row();
$service_slug = get_sub_field('service_slug');
$service_name = get_sub_field('service_name');
if($service_slug == 'general'){
echo '<a href="#" data-filter="all" class="active">View All</a>';
}else{
echo '<a href="#" data-filter="' . $service_slug . '">' . $service_name . '</a>';
}
endwhile;
endif;
?>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="img-gallery">
<div class="container-fluid nopadding">
<div class="row">
<div class="col-md-12 nopadding text-center">
<?php $gallery_images = get_field('gallery_images', 'option'); ?>
<?php shuffle($gallery_images); ?>
<?php if( $gallery_images ): ?>
<?php $image_count = 1; ?>
<?php $lastElement = end($gallery_images); ?>
<div class="gallery-slider">
<?php foreach( $gallery_images as $image ): ?>
<?php if( $service_type == 'general' ): ?>
<a class="single-img-box inline-m <?php echo $image['service_type']; ?>" href="<?php echo $image['image']['sizes']['large']; ?>" data-fancybox="gallery">
<div class="image-bg lazyload" data-bg="<?php echo $image['image']['sizes']['large']; ?>"></div>
<img src="<?php echo get_template_directory_uri(); ?>/images/search_wht.svg" alt="" />
</a>
<?php elseif( $service_type == $image['service_type'] ): ?>
<a class="single-img-box inline-m <?php echo $image['service_type']; ?>" href="<?php echo $image['image']['sizes']['large']; ?>" data-fancybox="gallery">
<div class="image-bg lazyload" data-bg="<?php echo $image['image']['sizes']['medium']; ?>"></div>
<img src="<?php echo get_template_directory_uri(); ?>/images/search_wht.svg" alt="" />
</a>
<?php endif; ?>
<?php $image_count++; ?>
<?php endforeach; ?>
</div>
<?php endif; ?>
</div>
</div>
</div>
</div>
</div>
</div>
</div>以上是关于php 可过滤的画廊的主要内容，如果未能解决你的问题，请参考以下文章
❤️使用 HTMLCSS 和 JS 创建响应式可过滤的游戏+工具展示页面 ❤️
❤️使用 HTMLCSS 和 JS 创建响应式可过滤的游戏+工具展示页面 ❤️