Немного видоизменил, теперь для 1-й карточки слайдер нормально работает, а вот для остальнх размер сменяющейся картинки (высота) вообще стала в 0.
Вот скриншот:
https://fotki.yandex.ru/next/users/t...2/view/1013187
Вот код index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Триколор ТВ Оренбург. Обменять, купить спутниковое оборудование в магазине компании Спутник, онлайн-заказ</title>
<meta name="keywords" content="Вы можете обменять, купить спутниковое оборудование Триколор в нашем магазине" />
<meta name="description" content="Фирменный магазин Триколор ТВ предлагает вам купить или обменять спутниковое оборудование." />
<link rel="stylesheet" href="assets/css/uikit.css" />
<link rel="stylesheet" type="text/css" href="assets/css/custom.css">
<link rel="stylesheet" type="text/css" href="assets/css/jquery.fancybox.css">
<link rel="stylesheet" type="text/css" href="assets/css/jquery.bxslider.css">
<script src='https://www.google.com/recaptcha/api.js' async defer></script>
<script src="assets/js/jquery.js"></script>
<script src="assets/js/uikit.min.js"></script>
<script src="assets/js/uikit-icons.js"></script>
<script src="assets/js/jquery.fancybox.js"></script>
<script src="assets/js/jquery.bxslider.js"></script>
<script src="assets/js/prod_desc_fancy.js"></script>
<script>
$(document).ready(function(){
slider = $('.bxslider').bxSlider({
pagerCustom: '#bx-pager'
});
//Вызов модального окна для детального просмотра товара
$('.trigger').fancybox({
'onComplete': function(){
slider = $('.bxslider').bxSlider({
pagerCustom: '#bx-pager'
});
}
});
//var $number;
$('.trigger').on('click',function(){
//slider.reloadSlider();
});
//Вызов формы обратного звонка
$('#modal').on('click','a.myButton',function(){
$('.fancybox-container').css({"display":"none"});
$('#modal1').fadeIn();
});
$('form').submit(function(e){
var $form = $(this);
$.ajax({
type: $form.attr('method'),
url: $form.attr('action'),
data: $form.serialize()
}).done(function(result){
alert('Сообщение успешно отправлено!' + result);
$('#modal1').fadeOut('slow', function(){
});
}).fail(function(result){
alert('Ошибка при отправке сообщения!' + result);
});
//отмена действия по умолчанию для кнопки submit
e.preventDefault();
});
//Делаем поле телефона обязательным для заполнения
$('input[name=phone]').on('input keyup',function(e){
if($(this).val()=='')
$('form input[type=submit]').prop('disabled',true);
else
$('form input[type=submit]').prop('disabled',false);
});
$('.buy').on('click', function(){
$('.cards').fadeIn();
});
$('.change').on('click', function(){
$('html, body').animate({
scrollTop: $("#exchange").offset().top - 100
}, 1000);
});
});
</script>
<style type="text/css">
<!--
.style1 {color: #FF0000}
-->
</style>
</head>
Попробовал использовать метод onComplete - сработало, но только для 1-й карточки товара. Походу и правда надо как то циклом делать.