Повторно открыть SqueezeBox без двойной анимации
У меня есть открытый SqueezeBox на экране, и я хотел бы открыть его с другим URL-адресом в ответ на щелчок по ссылке внутри поля. Я пробую различные подходы, чтобы открыть новый URL в новом (другом) размере, чтобы анимация была плавной и запускалась только один раз. К сожалению, стандартный подход (open
метод), кажется, анимировать дважды (или запускает бессмысленные анимации, которые "сбивают").
В качестве альтернативы я пытаюсь setContent
, но это, кажется, не предлагает способ установки параметров, и из того, что я могу сказать в источнике, SqueezeBox.initialize
ничего не делает, когда параметры уже установлены.
// (Attempt 1)
// This animation is a bit glitchy, have tried resetting resizeFx
// and sizeLoading to reduce bounce. Ideally want it to morph from
// current size to size{} without shrinking to sizeLoading{} first.
if ( false ) {
SqueezeBox.open(
url,
{
size: { x: 500, y: 500 },
sizeLoading: { x: 500, y: 500 },
resizeFx: {
duration: 0
}
}
);
}
// (Attempt 2)
// Empty SqueezeBox then reset its contents
$( 'sbox-content' ).empty();
// Unfortunately here there appears no way to reset the size with
// the ajax method,
// and the call to initialize is ignored.
SqueezeBox.initialize(
{
size: { x: 100, y: 400 },
/* Set the loading size to the current size? */
sizeLoading: { x: 700, y: 700 }
}
);
// Load the new content in via ajax
SqueezeBox.setContent( 'ajax', url );
// So, I would need to call resize() here, causing a second animation
Здесь я вижу рекомендацию перейти на другой модальный плагин лайтбокса, но отойти от SB на самом деле не вариант, и я не хочу запускать оба одновременно.
1 ответ
Ага, вот решение - избегайте звонков SqueezeBox! Вместо этого я загружаю контент вручную, используя стандартный вызов MooTools AJAX. Это не включает обычный счетчик ожидания, но я ожидаю, что это можно исправить.
// Let's load page in AJAX manually; reopening with open() or
// setContents() appears to cause double or glitchy animations.
var myRequest = new Request.HTML(
{
url: url,
method: 'get',
evalScripts: true,
update: $( 'sbox-content' )
}
).send();
// @todo If no size change is needed don't run this
// to avoid glitchy animation
SqueezeBox.resize(
{ x: 500, y: 500 },
false
);
Обратите внимание, что я использую evalScripts: true
так что любой JavaScript в загружаемом фрагменте запускается так же, как если бы я использовал SqueezeBox.open()
,