Получение 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.