Javascript-форум - Fancy box Ajax и Reel плагины

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Fancy box Ajax и Reel плагины (https://javascript.ru/forum/jquery/73035-fancy-box-ajax-i-reel-plaginy.html)

Fancy box Ajax и Reel плагины

Здравствуйте. Сразу прошу прощения за возможную тупость. Помогите пожалуйста, знаний своих совсем не хватает.
Столкнулся с проблемой, есть jqery плагин reel называется, там есть возможность маштабировать анимацию под размер экрана, я активировал данный пункт, но работает это мягко говоря непонятно для меня, возможно можно сделать "загрузку для пользователя" чтоб не было видно этих мерцаний при кэшировании. Вот описание функции от разработчика Reel -Responsiveness, а вот мой код при запуске через Ajax:

Код:

<div>
<script src="catalog/view/javascript/jquery/jquery.reel.min.js"></script>
<style>
.reelsize {
	margin: 0 auto
}
</style>

<?php foreach ($tt360images as $result) { ?>
	<div>
	<img src="/image/magic360/<?php echo $result['product_id']; ?>/01.jpg"
		width="1280"
		height="960"
		class="reel reelsize"
		id="image"
		data-responsive="true"
		data-speed="0.3"
		data-images="/image/magic360/<?php echo $result['product_id']; ?>/##.jpg|01..<?php echo $result['columns']; ?>">
	</div>
<?php } ?>
</div>

А вот этим запросом я вызываю модальное окно и ajax запрос:

Код:

<a data-fancybox data-type="ajax" data-src="index.php?route=product/product/getPhoto360img&product_id=<?php echo $product_id; ?> " href="javascript:;" class="js-fancy-popup">3D Просмотр</a>

Проблем несколько:
1. Мерцание при открытии (масштабирование работает но это мерцание пока не прокэшируется, возможно ли добавить какую то подгруздку)
2. При повторном открытии модального окна с ajax запросом, скрипт reel не срабатывает, тут вообще не представляю что делать, если обновить страницу то первый раз сработает а потом опять болт. Разработчик плагина предлагает использовать Эвент teardown, но я не знаю как это и где использовать.

Выгрузил проект на временный хост, чтоб визуальнее объяснить проблему. При нажатии на ссылку "3D Просмотр".

2. Либо сделайте модальное окно ифреймом - тогда каждое открытие будет первым, либо $.reel.scan(); после открытия и готовности попапа.

1. $('#image').reel('opening',2); перед сканом вроде помогает частично.

Цитата:

Сообщение от Белый шум (Сообщение 480731)

Спасибо, решил отказаться от ajax, нашел в плагине опцию shy которая подгружает картинки при клике на блок, то-есть нет сразу загрузки кучи картинок. Но мерцания мне кажутся из за модального окна и опции Responsiveness, но всеже больше из за модалки, сейчас пробую более протой вариант модалки на чистом jqery.

$.reel.scan(); - куда именно добавить попробовать?

$('#image').reel('opening',2); - простите но и тут не понимаю перед сканом это куда вставить это?

$.reel.scan(); - в конец загружаемой страницы попапа.

$('#image').reel('opening',2); перед $.reel.scan(); (ну или параметром картинки вместе с остальными опциями reel: data-opening="2").

Сделал пока так, вроде все работает но не знаю как сделать закрытие окна по затемненной области, подскажите пожалуйста? И анимация почему-то не работает.

Вот пример как получилось.

Сделал отдельным модальным окном на javascript, теперь все работает, спасибо!