Получение supersized.js и цикла jquery для анимации одновременно

Я использую два плагина "supersized.js" и "цикл jquery" на этом сайте здесь.

http://countrypleasin.com/new/

Я ищу синхронизацию фоновой анимации большого размера с циклом заголовка изображения. (документ). Готовое и желаемое за действительное не сокращает его до сих пор. Мой заголовок начнет анимироваться немного раньше, чем вращение BG из-за времени загрузки.

Спасибо

$

        $(document).ready(function(){
            $.supersized({

                //Functionality
                slideshow               :   1,      //Slideshow on/off
                autoplay                :   1,      //Slideshow starts playing automatically
                start_slide             :   1,      //Start slide (0 is random)
                random                  :   0,      //Randomize slide order (Ignores start slide)
                slide_interval          :   5000,   //Length between transitions
                transition              :   1,      //0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
                transition_speed        :   400,    //Speed of transition
                new_window              :   1,      //Image links open in new window/tab
                pause_hover             :   0,      //Pause slideshow on hover
                keyboard_nav            :   1,      //Keyboard navigation on/off
                performance             :   1,      //0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
                image_protect           :   1,      //Disables image dragging and right click with Javascript
                image_path              :   'images/', //Default image path

                //Size & Position
                min_width               :   0,      //Min width allowed (in pixels)
                min_height              :   0,      //Min height allowed (in pixels)
                vertical_center         :   0,      //Vertically center background
                horizontal_center       :   1,      //Horizontally center background
                fit_portrait            :   1,      //Portrait images will not exceed browser height
                fit_landscape           :   0,      //Landscape images will not exceed browser width

                //Components
                navigation              :   0,      //Slideshow controls on/off
                thumbnail_navigation    :   0,      //Thumbnail navigation
                slide_counter           :   0,      //Display slide numbers
                slide_captions          :   0,      //Slide caption (Pull from "title" in slides array)
                slides                  :   [       //Slideshow Images
                                                    {image : 'images/bg3.jpg'},  
                                                    {image : 'images/bg2.jpg'},
                                                    {image : 'images/bg1.jpg'}


                                            ]

            }); 
        });

        $(document).ready(function() {
$('h1.home_headline').cycle({
    fx: 'scrollRight', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
    speed:   400,
    timeout: 5000,
    delay:    1000,
    autostop:      true,     // true to end slideshow after X transitions (where X == slide count) 
    autostopCount: 25,

});

});

1 ответ

Решение

У меня была точно такая же проблема, и я смог заставить ее работать, добавив некоторые условия загрузки перед запуском анимации. Возможно, есть более элегантный способ сделать это, но это по крайней мере работает!

Сначала запустите две анимации в $(window).load() вместо $(document).ready, чтобы убедиться, что все ваши изображения загружаются первыми, устанавливая состояние паузы для суперразмера с помощью следующего вызова API:

$(function(){
//pause supersized slideshow
api.playToggle();
});

Настройте функцию, которую мы можем вызвать, чтобы продвигать увеличенное слайд-шоу до того, как jQuery Cycle меняет слайды. Для правильного зацикливания необходимо знать общее количество слайдов. (может быть способ подсчитать это, не вводя его вручную)

var $i = 1;
var $slideTotal = 3;

function slideAdvance()
{
    api.goTo($i);
    $i++;
    if ($i > $slideTotal)
    {
        $i = 1;
    }
}

Затем вы можете настроить цикл jquery для запуска вашей функции перед сменой слайдов следующим образом:

//Start animated banner
$('#banner').cycle({
    fx: 'scrollRight', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
    speed:   400,
    timeout: 5000,
    delay:    1000,
    autostop:      true,     // true to end slideshow after X transitions (where X == slide count) 
    autostopCount: 25,
    before: slideAdvance
});

И вуаля, у вас есть ваши синхронизированные баннеры. Это также имеет дополнительный бонус, который суперразмер будет автоматически останавливаться с помощью jquery.

Другие вопросы по тегам