15,6 → 15,7 |
|
<input type="hidden" name="wpsg_post_id" value="<?php echo get_the_ID(); ?>" /> |
<input type="hidden" name="titleDisplayed" value="<?php echo $this->titleDisplayed; ?>" /> |
<input type="hidden" name="wpsg[template]" value="standard3.phtml" /> |
|
<div class="col_wrap"> |
<div class="col image"> |
30,12 → 31,17 |
|
</div> |
<div class="view"> |
<?php foreach ($arAttachmentIDsAll as $k => $image_id) { ?> |
<a class="thickbox" id="<?php echo $this->getTemplateIndex(); ?>_<?php echo $k; ?>" rel="gallery-<?php echo $this->getTemplateIndex(); ?>" href="<?php echo \wp_get_attachment_image_src($image_id, 'full')[0]; ?>"></a> |
<?php } ?> |
<div class="wpsg_product_slider"> |
|
<?php foreach ($arAttachmentIDsAll as $k => $image_id) { ?> |
|
<div> |
<div class="ds_image_zoom"> |
<div class="ds_image_zoom" data-image-index="<?php echo $k; ?>" |
onclick="document.getElementById('<?php echo $this->getTemplateIndex(); ?>_<?php echo $k; ?>').click();" |
> |
<?php echo \wp_get_attachment_image($image_id, 'full', false, [ |
'data-index' => $k |
]); ?> |
405,6 → 411,8 |
|
<?php if ($this->getTemplateIndex() === 1) { ?> |
|
<link rel="stylesheet" href="<?php echo $this->getRessourceURL('css/tiny-slider.-2.9.4.min.css'); ?>"> |
|
<style> |
|
.wpsg_produkt_wrapper.layout3 .col_wrap { display:flex; width:100%; justify-content:stretch; gap:1rem; } |
419,7 → 427,10 |
|
</style> |
|
<link rel="stylesheet" href="<?php echo $this->getRessourceURL('css/tiny-slider.-2.9.4.min.css'); ?>"> |
<?php } ?> |
|
<?php if ($this->getTemplateIndex() === 1 && ($_REQUEST['action']??'') !== 'wpsg_productvariants_switch') { ?> |
|
<script src="<?php echo $this->getRessourceURL('js/tiny-slider-2.9.2.min.js'); ?>"></script> |
<script src="<?php echo $this->getRessourceURL('js/dsimagezoom.min.js'); ?>"></script> |
|
427,47 → 438,76 |
|
<script> |
|
const slider = tns({ |
container: '.wpsg_product_slider', |
items: 1, |
slideBy: 1, |
controls: false, |
autoplayButton: false, |
nav: false, |
arrowKeys: false, |
autoplayButtonOutput: false, |
autoplay: false, |
autoHeight: true |
}); |
if (!wpsg_standard3_slider) { var wpsg_standard3_slider = {}; } |
|
for (const el_tn of document.querySelectorAll('.wpsg_produkt_wrapper.layout3 .thumbnails img')) { |
if (!wpsg_standard3_load) { |
|
el_tn.addEventListener('click', (event) => { |
function wpsg_standard3_load(templateIndex) { |
|
slider.goTo(el_tn.getAttribute('data-index')); |
if (wpsg_standard3_slider[templateIndex]) { |
|
}); |
wpsg_standard3_slider[templateIndex] = wpsg_standard3_slider[templateIndex].rebuild(); |
|
} |
} else { |
|
window.addEventListener('load', () => { |
wpsg_standard3_slider[templateIndex] = tns({ |
container: '#wpsg_produktform_' + templateIndex + ' .wpsg_product_slider', |
items: 1, |
slideBy: 1, |
controls: false, |
autoplayButton: false, |
nav: false, |
arrowKeys: false, |
autoplayButtonOutput: false, |
autoplay: false, |
autoHeight: true, |
onInit: () => { |
|
slider.goTo(0); |
} |
}); |
|
}); |
} |
|
slider.events.on('transitionEnd', (event) => { |
wpsg_standard3_slider[templateIndex].events.on('transitionEnd', (event) => { |
|
DsImageZoom.init(document.querySelectorAll('.tns-slide-active .ds_image_zoom')); |
DsImageZoom.init(document.querySelectorAll('#wpsg_produktform_' + templateIndex + ' .tns-slide-active .ds_image_zoom')); |
|
}); |
}); |
|
slider.events.on('transitionStart', (event) => { |
wpsg_standard3_slider[templateIndex].events.on('transitionStart', (event) => { |
|
DsImageZoom.destroy(document.querySelectorAll('.tns-item .ds_image_zoom')); |
DsImageZoom.destroy(document.querySelectorAll('#wpsg_produktform_' + templateIndex + ' .tns-item .ds_image_zoom')); |
|
}); |
}); |
|
for (const el_tn of document.querySelectorAll('#wpsg_produktform_' + templateIndex + ' .wpsg_produkt_wrapper.layout3 .thumbnails img')) { |
|
el_tn.addEventListener('click', (event) => { |
|
wpsg_standard3_slider[templateIndex].goTo(el_tn.getAttribute('data-index')); |
|
}); |
|
} |
|
wpsg_standard3_slider[templateIndex].goTo(0); |
|
}; |
|
}; |
|
window.addEventListener('load', () => { wpsg_standard3_load(<?php echo $this->getTemplateIndex(); ?>); }); |
|
<?php if (($_REQUEST['action']??'') === 'wpsg_productvariants_switch') { ?> |
|
window.setTimeout(() => { |
|
wpsg_standard3_load(<?php echo $this->getTemplateIndex(); ?>); |
|
}, 100); |
|
<?php } ?> |
|
</script> |
|
</div> |