Встроил в страницу сайта скрипт - конструктор товара (по комбинации нажатых кнопок показывает нужную карточку товара), но изображение прогружается только у первой карточки на странице, у остальных при переключении видны только миниатюры. Прогружается картинка если нажать на миниатюру или если изменить размеры окна
<style>
/*Время и вид анимации для вкладок*/
.baseCl{
transition:all 0.4s ease-in-out;
}
/*Стиль веделенной вкладки*/
.baseClactive{
box-shadow: 10px 5px 5px #000, 0 0 0px 1px #000;
}
/*Стиль при наведении на вкладку*/
.brandname:hover{
color:#000000 !important;
}
</style>
<script>
$( document ).ready(function() {
//ПРисваиваем класс вкладкам
$('[href="#shape"]').addClass('baseCl shape');
$('[href="#material"]').addClass('baseCl material');
//Делаем выделенные первые вкладки
$('.shape').first().addClass('baseClactive');
$('.material').first().addClass('baseClactive');
var shapeN=0, materialN=0;
//Создаём список блоков
var blkMass = { '00': '#rec453845111',
'01': '#rec453845114',
'02': '#rec453845130',
'10': '#rec453845145',
'11': '#rec453845150',
'12': '#rec453845163',
'20': '#rec453845167',
'21': '#rec453845169',
'22': '#rec453845170'
};
//Добавляем классы ко всем блокам продуктов
$.each(blkMass, function( key, value ) {$(blkMass[key]).addClass('blkProduct');});
$('.blkProduct').not('.blkProduct:eq(0)').hide();
function findProduct(){
var actionBlk = String(shapeN)+String(materialN);$('.blkProduct').hide();
$(blkMass[actionBlk]).show();$('.t744').trigger('displayChanged'); };
//При клике на модель
$('.shape').click(function(e) {e.preventDefault();
$('.shape').removeClass('baseClactive');$(this).addClass('baseClactive');
shapeN = $(".shape").index(this);findProduct(); });
//При клике на ротанг
$('.material').click(function(e) {e.preventDefault();
$('.material').removeClass('baseClactive');$(this).addClass('baseClactive');
materialN = $(".material").index(this);findProduct(); });
})
</script>