window.addEventListener('elementor/frontend/init', () => {
jQuery(documento).ready(función($){
var cabinaSwiper = new Swiper('.design-cabin', {
diapositivas por vista: 4,
diapositivas por columna: 2,
espacio entre: 0,
navegación: {
nextEl: '.design-box-cabin .design_next',
prevEl: '.design-box-cabin .design_prev',
},
puntos de interrupción: {
240: {
diapositivas por vista: 1,
},
320: {
diapositivas por vista: 2,
},
// cuando el ancho de la ventana es <= 480px
600: {
diapositivas por vista: 3,
},
// cuando el ancho de la ventana es <= 640px
1024: {
diapositivas por vista: 4,
}
},
});
var panelSwiper = nuevo Swiper('.design-panel', {
diapositivas por vista: 4,
diapositivas por columna: 2,
espacio entre: 0,
navegación: {
nextEl: '.design-box-panel .design_next',
prevEl: '.design-box-panel .design_prev',
},
puntos de interrupción: {
240: {
diapositivas por vista: 1,
},
320: {
diapositivas por vista: 2,
},
// cuando el ancho de la ventana es <= 480px
600: {
diapositivas por vista: 3,
},
// cuando el ancho de la ventana es <= 640px
1024: {
diapositivas por vista: 4,
}
},
});
var pisoSwiper = nuevo Swiper('.design-floor', {
diapositivas por vista: 4,
diapositivas por columna: 2,
espacio entre: 0,
navegación: {
nextEl: '.design-box-floor .design_next',
prevEl: '.design-box-floor .design_prev',
},
puntos de interrupción: {
240: {
diapositivas por vista: 1,
},
320: {
diapositivas por vista: 2,
},
// cuando el ancho de la ventana es <= 480px
600: {
diapositivas por vista: 3,
},
// cuando el ancho de la ventana es <= 640px
1024: {
diapositivas por vista: 4,
}
},
});
dejar código = `
`;
$('cuerpo').append(código);
$('#DESIGN_POPUP .close_hover_box').click(función() {
$('#DESIGN_POPUP').hide();
});
$('.design_box').hacer clic(función() {
let postId = $(this).data('id'),
imageUrl = $(this).find('.f_image')[0].src;
// 使用jQuery发送GET请求获取特定的"design"文章
$.ajax({
url: '/wp-json/wp/v2/design/' + postId, // 替换为您的WordPress网站的URL和要获取的"design"文章的ID
método: 'OBTENER',
éxito: función (respuesta) {
consola.log(respuesta)
// 获取自定义字段的值
$('#DESIGN_POPUP .design_title').html(response.title.rendered);
$('#DESIGN_POPUP .design_short_title').html(response.acf.description);
$('#DESIGN_POPUP .design_description').html(response.acf.table);
$("#DESIGN_IMAGE").attr("src", imageUrl);
$('#DESIGN_POPUP').show();
},
error: función (error) {
// 处理错误情况
console.log('Error:', error);
}
});
});
})
})
.swiper-slide {
altura: automático;
}
#DESIGN_POPUP {
posición: fija;
arriba: 0;
izquierda: 0;
ancho: 100vw;
altura: 100vh;
índice z: 99999999;
fondo: rgba(0,0,0,0.4);
pantalla: ninguna;
}
.design_popup_box {
ancho máximo: 1400px;
ancho: 80%;
izquierda: 50%;
arriba: 50%;
transformar: traducir (-50%, -50%);
posición: absoluta;
pantalla: flexible;
alinear elementos: centro;
justificar contenido: espacio entre;
relleno: 4rem;
fondo: #fff;
}
.close_hover_box {
posición: absoluta;
color: #fff;
derecha: 0;
arriba: 0;
fondo: var( --e-global-color-secundario );
relleno: 0,4rem 1rem;
cursor: puntero;
selección de usuario: ninguna;
}
.design_popup_box .design_content {
ancho: 75%;
}
.design_popup_box .design_image {
ancho: 25%;
relleno: 0,5%;
}
.design_popup_box .design_image img {
ancho: 100%;
}
.design_short_title {
peso de fuente: 400;
color: var( --e-global-color-secundario );
tamaño de fuente: 1,5rem;
margen inferior: 3rem;
}
.design_title {
tamaño de fuente: 2,25 rem;
margen inferior: 2rem;
}
.design_description {
tamaño de fuente: 1.125rem;
peso de fuente: 300;
}
.design_btn > div {
posición: absoluta;
izquierda: 0;
arriba: 50%;
transformar: traducir (-120%, -50%);
ancho: 3rem;
cursor: puntero;
}
.design_btn > div.disable {
cursor: predeterminado;
}
.design_btn > divsvg {
rellenar: #d5d5d5;
ancho: 100%;
}
.design_btn > div: desplazar el cursor {
color: var( --e-global-color-secundario );
}
.design_btn > div.design_next {
izquierda: desarmado;
derecha: 0;
transformar: traducir (120%, -50%);
}
.cabina-de-diseño,
.panel de diseño,
.piso-diseño {
borde superior: 1px sólido #dcdcdc;
borde izquierdo: 1px sólido #dcdcdc;
posición: relativa;
}
.caja_diseño {
relleno: 2rem;
borde derecho: 1px sólido #dcdcdc;
borde inferior: 1px sólido #dcdcdc;
posición: relativa;
alineación de texto: centro;
cursor: puntero;
altura: 100%;
}
.design_box .cover_box {
posición: absoluta;
izquierda: 0;
arriba: 0;
altura: 100%;
ancho: 100%;
opacidad: 0;
visibilidad: oculta;
transición: todos los .4;
fondo: rgba(0,0,0,0.4);
color: #fff;
pantalla: flexible;
alinear elementos: centro;
justificar-contenido: centro;
dirección flexible: columna;
}
.design_box .cover_box img {
ancho: 3,5 rem;
margen superior: 4rem;
}
.design_box h3 {
peso de fuente: 300;
tamaño de fuente: 1,5rem;
margen: 1rem;
}
.design_box: flotar .cover_box {
visibilidad: visible;
opacidad: 1;
}
.design_box: flotar .design_content {
opacidad: 0;
visibilidad: oculta;
}
.design_popup_box td {
relleno: 1rem 0;
borde inferior: 1px sólido #dcdcdc;
posición: relativa;
}
.design_popup_box tr > td:primer hijo {
relleno: 1rem 2rem 1rem 0;
}
.design_popup_box tr > td:primer hijo:después {
posición: absoluta;
contenido: '';
ancho: 1rem;
altura: 1px;
abajo: -1px;
derecha: 0;
fondo: #fff;
}
@pantalla multimedia y (ancho máximo: 767 px) {
.design_btn > div {
transformar: traducir (-80%, -50%);
}
.design_btn > div.design_next {
transformar: traducir (80%, -50%);
}
.design_popup_box {
dirección flexible: columna;
alinear elementos: inicio;
}
.design_content {
ancho: 100%;
}
.design_popup_box .design_image {
ancho: 50%;
margen derecho: 2rem;
}
}
