Я пытаюсь создать слайд-шоу с помощью плагина jQuery Cycle, который содержит еще один уровень вложенных слайд-шоу в некоторых слайдах верхнего уровня.
Основные слайды «контейнера» скользят горизонтально, а затем - для слайдов «контейнера», которые содержат более одного изображения с левой стороны - эти изображения скользят вверх вертикально.
Пример здесь, потому что я представляю, что это трудно визуализировать:
http://dl.dropbox.com/u/2890872/js-test/index.html
Вы попадете на второй слайд верхнего уровня только до того, как он остановится, даже при том, что есть шесть слайдов верхнего уровня (это моя проблема - второй слайд содержит только одно левое внутреннее изображение, которое останавливает сценарий ), но вы можете увидеть, что это за переходы, и проверить весь код.
Проблема заключается в том, что не во всех вторичных слайд-шоу имеется более одного изображения, и цикл jQuery завершается, если в слайд-шоу есть одно или несколько изображений. Это завершение также завершает слайд-шоу верхнего уровня, так как оно останавливается и запускается в зависимости от того, когда заканчивается вторичное слайд-шоу. Поскольку вторичное слайд-шоу заканчивается только из-за одного «слайда», то следующий внешний слайд верхнего уровня никогда не вызывается. Я не уверен, как адаптировать код, чтобы обойти это.
JS:
<script type="text/javascript">
$(function(){
// init and stop the inner slideshows
var inners = $('.slide-up').cycle().cycle('stop');
var slideshow = $('#home-slides').cycle({
fx: 'scrollHorz',
speed: 300,
timeout: 0,
before: function() {
// stop all inner slideshows
inners.cycle('stop');
// start the new slide's slideshow
$(this).children().cycle({
fx: 'scrollUp',
timeout: 2000,
autostop: true,
end: function() {
// when inner slideshow ends, advance the outer slideshow
slideshow.cycle('next');
}
});
}
});
});
</script>
Образец HTML:
<div id="home-slides">
<div>
<div class="slide-up">
<img src="i/home/slideshow/1l-1.jpg" alt="" width="284" height="420" />
<img src="i/home/slideshow/1l-2.jpg" alt="" width="284" height="420" />
<img src="i/home/slideshow/1l-3.jpg" alt="" width="284" height="420" />
</div>
<img src="i/home/slideshow/1r.png" alt="" width="291" height="420" />
</div>
<div>
<div>
<img src="i/home/slideshow/2l-1.jpg" alt="" width="284" height="420" />
</div>
<img src="i/home/slideshow/2r.jpg" alt="" width="291" height="420" />
</div>
<div>
<div class="slide-up">
<img src="i/home/slideshow/3l-1.jpg" alt="" width="284" height="420" />
<img src="i/home/slideshow/3l-2.jpg" alt="" width="284" height="420" />
</div>
<img src="i/home/slideshow/3r.png" alt="" width="291" height="420" />
</div>
<div>
…additional slides…
</div>
</div>
Слайд-шоу заканчивается на втором # home-slides> div, потому что есть только одно изображение.
Я попытался удалить вложенность и класс «слайд-ап» из слайдов без внутреннего слайд-шоу, но это не помогает.
Опять же, полную рабочую версию со всем соответствующим кодом можно найти здесь: http://dl.dropbox.com/u/2890872/js-test/index.html
----------- ИЗД. 4/10 - Незначительные обновления и, возможно, лидерство ----------
Я отредактировал код здесь и в примере ссылки, чтобы добавить некоторые детали, которые устраняют первые мысли для устранения неполадок. Теперь только слайды со вторичными слайд-шоу используют класс «слайд-ап».
- Я попытался указать класс «.slide-up» в функции для обратного вызова «end» («$(this).children('.slide-up').cycle…»), что не позволяет завершить цикл для слишком небольшого количества слайдов, но это только приводит к его завершению для непревзойденные элементы!
Самое близкое, что я получил, это добавление условной проверки к функции в конце обратного вызова:
(Я использую длину, чтобы проверить наличие скользящего элемента div. Если есть лучший способ, дайте мне знать)
before: function() {
if ( $(this).children('.slide-up').length != 0 ) {
// stop all inner slideshows
inners.cycle('stop');
// start the new slide's slideshow
$(this).children('.slide-up').cycle({
fx: 'scrollUp',
timeout: 2000,
autostop: true,
end: function() {
// when inner slideshow ends, advance the outer slideshow
slideshow.cycle('next');
}
});
} else alert('NO INNER SLIDESHOW!');
Это исключает все ошибки и завершения непосредственно из цикла jQuery, но основное слайд-шоу по-прежнему останавливается на слайде без дополнительного слайд-шоу. Я думаю, что нужно вставить что-то в выражение "else", относящееся к запуску "slideshow.cycle ('next');", но я не нашел правильный синтаксис, чтобы заставить это работать.
----------- РЕДАКТИРОВАТЬ # 2 4/10 - ----------
самый последний рабочий пример: http://dl.dropbox.com/u/2890872/js-test/index2.html
Перемещение функции before в собственную именованную функцию для обеспечения большей чистоты.
function onBefore(currSlideElement, nextSlideElement, options, forwardFlag) {
if ( $(this).children('.slide-up').length != 0 ) {
// stop all inner slideshows
//inners.cycle('stop');
// start the new slide's slideshow
$(this).children('.slide-up').cycle({
fx: 'scrollUp',
timeout: 2000,
autostop: true,
end: function() {
// when inner slideshow ends, advance the outer slideshow
slideshow.cycle('next');
}
});
}
// else null;
else $(this).parent().cycle({
end: function() { slideshow.cycle('next'); }
});
}
Этот (оператор else) позволяет слайд-шоу прогрессировать, но он не сохраняет первоначальные параметры «слайд-шоу», а просто начинает проигрывать слайды верхнего уровня со стандартными опциями «из коробки» (исчезает из одного переход к следующему, вместо скольжения, останавливает воспроизведение дополнительных слайдов).
Я не понимаю:
1) Как сохранить настройки. (Я думал, именно поэтому вар "слайд-шоу" был создан в первую очередь)
2) Почему еще нужен оператор else - я не понимаю, почему внешние слайды вообще останавливаются, когда условный оператор «.slide-up» не выполняется - я думаю, что внешнее слайд-шоу просто продолжится как обычно.