<style>
.miniature .tn-atom{
cursor:pointer;
transition: all 0.2s ease-in-out;
}
.miniature .currentminiature{
box-shadow: 0 0 0px 2px #fdc359;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', () => {
function pastepic(imgsrc, bannerblk) {
const atomEl = bannerblk.querySelector('.banner .tn-atom');
if (!atomEl) return;
const imgEl = atomEl.querySelector('.tn-atom__img');
if (imgEl) {
imgEl.src = imgsrc;
} else {
atomEl.style.backgroundImage = `url(${imgsrc})`;
}
if (atomEl.hasAttribute('data-img-zoom-url')) {
atomEl.setAttribute('data-img-zoom-url', imgsrc);
}
}
document.querySelectorAll('.banner').forEach(banner => {
const rec = banner.closest('.t-rec');
if (rec) {
const firstMini = rec.querySelector('.miniature .tn-atom');
if (firstMini) {
firstMini.classList.add('currentminiature', 't-cover__arrow-wrapper_animated');
}
}
});
document.querySelectorAll('.miniature .tn-atom').forEach(atom => {
atom.addEventListener('click', function () {
const bannerblk = this.closest('.t-rec');
if (!bannerblk) return;
bannerblk.querySelectorAll('.miniature .tn-atom').forEach(el => {
el.classList.remove('currentminiature', 't-cover__arrow-wrapper_animated');
});
this.classList.add('currentminiature', 't-cover__arrow-wrapper_animated');
let imgsrc = '';
const imgInAtom = this.querySelector('.tn-atom__img');
if (imgInAtom) {
imgsrc = imgInAtom.getAttribute('data-original') || imgInAtom.getAttribute('src');
} else {
imgsrc = this.getAttribute('data-original');
if (!imgsrc) {
const bgStyle = window.getComputedStyle(this).backgroundImage;
if (bgStyle && bgStyle !== 'none') {
imgsrc = bgStyle.replace('url(', '').replace(')', '').replace(/"/g, '').replace(/'/g, '').trim();
}
}
}
if (imgsrc) {
pastepic(imgsrc, bannerblk);
}
});
});
});
</script>