1

Добрый день! Ситуация такая: на сайте есть окошко (div) в котором крутится слайдер. При нажатии на кнопочку окошко со слайдером разворачивается во весь экран. И все бы хорошо, только вот беда, после разворачивания во весь экран слайдер ведет себя странно, а именно, неправильно отображает картинки. Такое ощущение что "запутался в размерах". Но стоит нажать Ctrl+Scroll (немножко крутануть колесико при зажатом Ctrl) и все отображается как надо! Пожалуйста, подскажите если кто знает, как вылечить??? Замучился уже, второй день сижу. Ссылка ниже. Код выложу если надо. http://funbookforkids.com/admin/030-pagination.html

Таким образом разворачиваю:

$(document).ready(function() { 
	$('#modal_open').click( function(event){
		event.preventDefault();
		$('#overlay').fadeIn(200, 
		 	function(){ 
				$('.linsmob') 
					.css('display', 'block') 
					.animate({opacity: 1}, 200);
				$('.swiper-container').appendTo('.linsmob');
				$('#modal_open').css('display', 'none');
		});
	});
	

$('#modal_close').click( function(){ 
		$('.linsmob')
			.animate({opacity: 0}, 200, 
				function(){ 
					$(this).css('display', 'none'); 
					$('#overlay').fadeOut(200);
					$('.swiper-container').appendTo('.m_cnt');
					$('#modal_open').css('display', 'block');
				}
			);
	});

});

Исходное положение введите сюда описание изображения

Получается: введите сюда описание изображения

Должно быть: введите сюда описание изображения

1
  • 1
    Лучше приведите код, а также, если необходимо, скриншоты, демонстрирующие проблему. Здесь не очень любят ссылки на сторонние сайты. Да и вопрос без кода вряд ли будет чем-то полезен другим участникам сообщества. 3 фев 2018 в 15:31

1 ответ 1

0

Конечный вариант реализации - проверил,работает, таймаут в зависимости от того как долго у вас анимация проходит.

$('#modal_open').click(function(){
setTimeout(function(){
function resizeHandler(e) {
    console.log(e.type + ' triggered.');
}

window.addEventListener('resize', resizeHandler);

var resizeEvent = new Event('resize');
window.dispatchEvent(resizeEvent);
},300)
})

7
  • Спасибо ОГРОМНОЕ!!! Сейчас попробую. Просто мне тайм аут не нужен. Сразу, кликнул - развернулось!
    – zfiodor
    3 фев 2018 в 15:51
  • @zfiodor Таймаут всётаки нужен,ибо у вас ресайз может сработать раньше чем слайдер откроется в полном формате. Я бы оставил. Одобряйте вариант ответа если решено.
    – EVG
    3 фев 2018 в 15:57
  • У меня что то не получается... Может я что то не так вставляю?.. $(document).ready(function() { $('#modal_open').click(function(){ setTimeout(function(){ function resizeHandler(e) { console.log(e.type + ' triggered.'); } window.addEventListener('m_cnt', resizeHandler); var resizeEvent = new Event('m_cnt'); window.dispatchEvent(resizeEvent); }, 300) });
    – zfiodor
    3 фев 2018 в 15:59
  • При клике ничего не происходит а в консоли пишет ".m_cnt triggered" и все!
    – zfiodor
    3 фев 2018 в 16:09
  • @zfiodor я вам дал уже готовый код , ничего менять не надо,проверил в трёх браузерах , всё работает.
    – EVG
    3 фев 2018 в 16:17

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.