You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
452 lines
13 KiB
452 lines
13 KiB
<?php
|
|
/**
|
|
* 证书画廊区块模板
|
|
* 显示公司认证证书的画廊
|
|
*/
|
|
|
|
// 防止直接访问
|
|
if (!defined('ABSPATH')) {
|
|
exit;
|
|
}
|
|
|
|
// 获取短代码参数（如果通过短代码调用）
|
|
global $certification_shortcode_atts;
|
|
$shortcode_atts = isset($certification_shortcode_atts) ? $certification_shortcode_atts : array();
|
|
|
|
// 获取自定义器设置
|
|
$certification_gallery = get_theme_mod('certification_gallery_images', '');
|
|
$certification_columns = get_theme_mod('certification_gallery_columns', 5);
|
|
$certification_show_lightbox = get_theme_mod('certification_gallery_lightbox', true);
|
|
$certification_show_animation = get_theme_mod('certification_gallery_animation', true);
|
|
|
|
// 短代码参数覆盖自定义器设置
|
|
if (!empty($shortcode_atts['images'])) {
|
|
$certification_gallery = $shortcode_atts['images'];
|
|
}
|
|
if (!empty($shortcode_atts['columns'])) {
|
|
$certification_columns = intval($shortcode_atts['columns']);
|
|
}
|
|
if (isset($shortcode_atts['lightbox'])) {
|
|
$certification_show_lightbox = $shortcode_atts['lightbox'] === 'true';
|
|
}
|
|
if (isset($shortcode_atts['animation'])) {
|
|
$certification_show_animation = $shortcode_atts['animation'] === 'true';
|
|
}
|
|
|
|
// 处理画廊数据
|
|
$gallery_images = array();
|
|
if (!empty($certification_gallery)) {
|
|
$image_ids = explode(',', $certification_gallery);
|
|
foreach ($image_ids as $image_id) {
|
|
$image_id = intval(trim($image_id));
|
|
if ($image_id > 0) {
|
|
$image_url = wp_get_attachment_image_url($image_id, 'full');
|
|
$image_full_url = wp_get_attachment_image_url($image_id, 'full');
|
|
$image_alt = get_post_meta($image_id, '_wp_attachment_image_alt', true);
|
|
$image_title = get_the_title($image_id);
|
|
|
|
if ($image_url) {
|
|
$gallery_images[] = array(
|
|
'id' => $image_id,
|
|
'url' => $image_url,
|
|
'full_url' => $image_full_url,
|
|
'alt' => $image_alt ?: $image_title,
|
|
'title' => $image_title
|
|
);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// 设置容器ID和类
|
|
$container_id = !empty($shortcode_atts['id']) ? $shortcode_atts['id'] : 'nenghui-certification';
|
|
$container_class = 'nenghui-certification';
|
|
if (!empty($shortcode_atts['class'])) {
|
|
$container_class .= ' ' . $shortcode_atts['class'];
|
|
}
|
|
// 动画属性
|
|
$animation_attrs = '';
|
|
if ($certification_show_animation) {
|
|
$animation_attrs = 'data-aos="fade-up" data-aos-duration="800"';
|
|
}
|
|
// 如果没有图片，显示默认提示
|
|
if (empty($gallery_images)) {
|
|
$gallery_images = array(
|
|
array(
|
|
'id' => 0,
|
|
'url' => get_template_directory_uri() . '/assets/images/certification-placeholder.svg',
|
|
'full_url' => get_template_directory_uri() . '/assets/images/certification-placeholder.svg',
|
|
'alt' => '证书占位图',
|
|
'title' => '暂无证书'
|
|
)
|
|
);
|
|
}
|
|
?>
|
|
<section id="<?php echo esc_attr($container_id); ?>" class="certification-section <?php echo esc_attr($container_class); ?>" <?php echo $animation_attrs; ?>>
|
|
<div class="container">
|
|
<!-- 证书画廊 -->
|
|
<div class="certification-gallery" data-aos="fade-up" data-aos-delay="200">
|
|
<div class="certification-grid" style="--columns: <?php echo esc_attr($certification_columns); ?>">
|
|
<?php foreach ($gallery_images as $index => $image): ?>
|
|
<div class="certification-item" data-aos="zoom-in" data-aos-delay="<?php echo ($index * 100 + 300); ?>">
|
|
<?php if ($certification_show_lightbox && !empty($image['full_url'])): ?>
|
|
<a href="<?php echo esc_url($image['full_url']); ?>"
|
|
class="certification-link"
|
|
data-lightbox="certification-gallery"
|
|
data-title="<?php echo esc_attr($image['title']); ?>">
|
|
<?php endif; ?>
|
|
|
|
<div class="certification-image-wrapper">
|
|
<img src="<?php echo esc_url($image['url']); ?>"
|
|
alt="<?php echo esc_attr($image['alt']); ?>"
|
|
class="certification-image"
|
|
loading="lazy">
|
|
|
|
<?php if ($certification_show_lightbox): ?>
|
|
<div class="certification-overlay">
|
|
<div class="certification-overlay-content">
|
|
<svg class="certification-zoom-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M21 21L16.514 16.506L21 21ZM19 10.5C19 15.194 15.194 19 10.5 19C5.806 19 2 15.194 2 10.5C2 5.806 5.806 2 10.5 2C15.194 2 19 5.806 19 10.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path d="M13.5 10.5H7.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path d="M10.5 7.5V13.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
<p class="certification-overlay-text">View Certificate</p>
|
|
</div>
|
|
</div>
|
|
<?php endif; ?>
|
|
</div>
|
|
<?php if ($certification_show_lightbox && !empty($image['full_url'])): ?>
|
|
</a>
|
|
<?php endif; ?>
|
|
<?php if (!empty($image['title']) && $image['id'] > 0): ?>
|
|
<div class="certification-title-text"><?php echo esc_html($image['title']); ?></div>
|
|
<?php endif; ?>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<style>
|
|
.nenghui-certification {
|
|
padding: 80px 0;
|
|
background: #f8f9fa;
|
|
}
|
|
|
|
.nenghui-certification .container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 0 20px;
|
|
}
|
|
|
|
.certification-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(var(--columns, 5), 1fr);
|
|
gap: 30px;
|
|
}
|
|
|
|
.certification-item {
|
|
background: white;
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
}
|
|
|
|
.certification-item:hover {
|
|
transform: translateY(-8px);
|
|
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.certification-image-wrapper {
|
|
position: relative;
|
|
overflow: hidden;
|
|
aspect-ratio: 3/4;
|
|
}
|
|
|
|
.certification-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.certification-item:hover .certification-image {
|
|
transform: scale(1.05);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.certification-overlay {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0, 0, 0, 0.7);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.certification-item:hover .certification-overlay {
|
|
opacity: 1;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.certification-overlay-content {
|
|
text-align: center;
|
|
color: white;
|
|
}
|
|
|
|
.certification-zoom-icon {
|
|
width: 24px;
|
|
height: 24px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.certification-overlay-text {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.certification-title-text {
|
|
padding: 15px;
|
|
text-align: center;
|
|
font-weight: 500;
|
|
color: #333;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.certification-link {
|
|
text-decoration: none;
|
|
color: inherit;
|
|
display: block;
|
|
}
|
|
|
|
/* 响应式设计 */
|
|
@media (max-width: 1024px) {
|
|
.certification-grid {
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 25px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.certification-grid {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 20px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.certification-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 15px;
|
|
}
|
|
|
|
.nenghui-certification {
|
|
padding: 60px 0;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
// 简单的灯箱功能
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const lightboxLinks = document.querySelectorAll('[data-lightbox="certification-gallery"]');
|
|
|
|
if (lightboxLinks.length > 0) {
|
|
// 创建灯箱HTML
|
|
const lightboxHTML = `
|
|
<div id="certification-lightbox" class="certification-lightbox" style="display: none;">
|
|
<div class="lightbox-overlay"></div>
|
|
<div class="lightbox-content">
|
|
<button class="lightbox-close">×</button>
|
|
<img class="lightbox-image" src="" alt="">
|
|
<div class="lightbox-title"></div>
|
|
<button class="lightbox-prev">‹</button>
|
|
<button class="lightbox-next">›</button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
document.body.insertAdjacentHTML('beforeend', lightboxHTML);
|
|
|
|
const lightbox = document.getElementById('certification-lightbox');
|
|
const lightboxImage = lightbox.querySelector('.lightbox-image');
|
|
const lightboxTitle = lightbox.querySelector('.lightbox-title');
|
|
const closeBtn = lightbox.querySelector('.lightbox-close');
|
|
const prevBtn = lightbox.querySelector('.lightbox-prev');
|
|
const nextBtn = lightbox.querySelector('.lightbox-next');
|
|
|
|
let currentIndex = 0;
|
|
const images = Array.from(lightboxLinks);
|
|
|
|
function showImage(index) {
|
|
const link = images[index];
|
|
lightboxImage.src = link.href;
|
|
lightboxImage.alt = link.dataset.title || '';
|
|
lightboxTitle.textContent = link.dataset.title || '';
|
|
currentIndex = index;
|
|
}
|
|
|
|
function showLightbox(index) {
|
|
showImage(index);
|
|
lightbox.style.display = 'flex';
|
|
document.body.style.overflow = 'hidden';
|
|
}
|
|
|
|
function hideLightbox() {
|
|
lightbox.style.display = 'none';
|
|
document.body.style.overflow = '';
|
|
}
|
|
|
|
// 绑定事件
|
|
lightboxLinks.forEach((link, index) => {
|
|
link.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
showLightbox(index);
|
|
});
|
|
});
|
|
|
|
closeBtn.addEventListener('click', hideLightbox);
|
|
lightbox.querySelector('.lightbox-overlay').addEventListener('click', hideLightbox);
|
|
|
|
prevBtn.addEventListener('click', function() {
|
|
const newIndex = currentIndex > 0 ? currentIndex - 1 : images.length - 1;
|
|
showImage(newIndex);
|
|
});
|
|
|
|
nextBtn.addEventListener('click', function() {
|
|
const newIndex = currentIndex < images.length - 1 ? currentIndex + 1 : 0;
|
|
showImage(newIndex);
|
|
});
|
|
|
|
// 键盘导航
|
|
document.addEventListener('keydown', function(e) {
|
|
if (lightbox.style.display === 'flex') {
|
|
if (e.key === 'Escape') {
|
|
hideLightbox();
|
|
} else if (e.key === 'ArrowLeft') {
|
|
prevBtn.click();
|
|
} else if (e.key === 'ArrowRight') {
|
|
nextBtn.click();
|
|
}
|
|
}
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
/* 灯箱样式 */
|
|
.certification-lightbox {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 9999;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.lightbox-overlay {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0, 0, 0, 0.9);
|
|
}
|
|
|
|
.lightbox-content {
|
|
position: relative;
|
|
max-width: 90%;
|
|
max-height: 90%;
|
|
text-align: center;
|
|
}
|
|
|
|
.lightbox-image {
|
|
max-width: 100%;
|
|
max-height: 80vh;
|
|
object-fit: contain;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.lightbox-title {
|
|
color: white;
|
|
margin-top: 15px;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.lightbox-close {
|
|
position: absolute;
|
|
top: -40px;
|
|
right: 0;
|
|
background: none;
|
|
border: none;
|
|
color: white;
|
|
font-size: 30px;
|
|
cursor: pointer;
|
|
width: 40px;
|
|
height: 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.lightbox-prev,
|
|
.lightbox-next {
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
background: rgba(255, 255, 255, 0.2);
|
|
border: none;
|
|
color: white;
|
|
font-size: 24px;
|
|
cursor: pointer;
|
|
width: 50px;
|
|
height: 50px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: background 0.3s ease;
|
|
}
|
|
|
|
.lightbox-prev {
|
|
left: -70px;
|
|
}
|
|
|
|
.lightbox-next {
|
|
right: -70px;
|
|
}
|
|
|
|
.lightbox-prev:hover,
|
|
.lightbox-next:hover {
|
|
background: rgba(255, 255, 255, 0.3);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.lightbox-prev {
|
|
left: 10px;
|
|
}
|
|
|
|
.lightbox-next {
|
|
right: 10px;
|
|
}
|
|
|
|
.lightbox-close {
|
|
top: 10px;
|
|
right: 10px;
|
|
}
|
|
}
|
|
</style>
|