Ошибка скрипта инициализации jquery cycle2

Я могу использовать jq cycle2 fine со всеми необходимыми опциями inline внутри div, поскольку теперь это предпочтительный стиль. Но вместо этого я хотел бы использовать сценарий инициализации, как и старый метод работы. Я просто предпочитаю хранить параметры галереи вне разметки и по возможности во внешнем файле .js.

Я создал сценарий со всеми параметрами, которые отлично работают с «встроенным» методом, и он правильно связывает, но это не удается, и слайд-шоу возвращается к настройке по умолчанию для затухания, тогда как я указываю scrollHorz.

Также я использую кнопки «предыдущий / следующий» и анимированные катионы - подписи работают, но без анимации, а кнопки «предыдущий / следующий» видны, но полностью не работают.

Мой сценарий находится в файле с именем «function.js », и я считаю, что выполнил инструкции для« настраиваемого сценария инициализации », как указано в API. У меня есть все соответствующие плагины в файле с именем «plugins.js», ссылки на которые очень хороши, и вы увидите ссылки на них на снимке экрана консоли ниже.

См. Следующую разметку / сценарий (для простоты это прямая копия примера cycle2) и ссылку на снимок экрана консоли:

<a href="#"><span class="prevControl">Prev</span></a>
<a href="#"><span class="nextControl">Next</span></a>

<div class="cycle-slideshow">
<img src="http://malsup.github.com/images/p1.jpg" data-cycle-title="Spring" data-cycle-desc="Sonnenberg Gardens"/>
<img src="http://malsup.github.com/images/p2.jpg" data-cycle-title="Redwoods" data-cycle-desc="Muir Woods National Monument"/>
<img src="http://malsup.github.com/images/p3.jpg" data-cycle-title="Angel Island" data-cycle-desc="San Franscisco Bay"/>
<img src="http://malsup.github.com/images/p4.jpg" data-cycle-title="Raquette Lake" data-cycle-desc="Adirondack State Park"/>

<div class="cycle-caption"></div>
<div class="cycle-overlay"></div>

</div>

Связанный скрипт:

$('.cycle-slideshow').cycle({
fx: scrollHorz,
timeout: 2000,
speed: 700,
prev: ".prevControl",
next: ".nextControl",
caption-plugin: caption2,
overlay-fx-sel: "div"
});

А вот ссылка на снимок экрана с ошибкой консоли

Если бы кто-нибудь мог посоветовать это, я был бы очень признателен, я уверен, что это простая ошибка!

заранее спасибо


jquery cycle jquery-cycle
person redplanet    schedule 05.04.2013    source источник

Ответы (2)


arrow_upward
2
arrow_downward

В вашем JavaScript есть несколько простых ошибок, которые приводят к сбою цикла. При программной инициализации слайд-шоу параметры должны быть верблюжьими регистрами, а не дефисами, как при их указании с помощью атрибутов данных. Вам также необходимо заключить строковые значения параметров в кавычки, иначе ваш скрипт будет думать, что они являются переменными. Вот обновленная версия вашего примера, которая работает:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Cycle2 Example</title>
</head>
<body>
    <a href="#"><span class="prevControl">Prev</span></a>
    <a href="#"><span class="nextControl">Next</span></a>

    <div class="slides">
        <img src="http://malsup.github.com/images/p1.jpg" data-cycle-title="Spring" data-cycle-desc="Sonnenberg Gardens"/>
        <img src="http://malsup.github.com/images/p2.jpg" data-cycle-title="Redwoods" data-cycle-desc="Muir Woods National Monument"/>
        <img src="http://malsup.github.com/images/p3.jpg" data-cycle-title="Angel Island" data-cycle-desc="San Franscisco Bay"/>
        <img src="http://malsup.github.com/images/p4.jpg" data-cycle-title="Raquette Lake" data-cycle-desc="Adirondack State Park"/>

        <div class="cycle-caption"></div>
        <div class="cycle-overlay"></div>
    </div>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="http://malsup.github.io/jquery.cycle2.js"></script>
    <script>
        $('.slides').cycle({
            fx: "scrollHorz",
            timeout: 2000,
            speed: 700,
            prev: ".prevControl",
            next: ".nextControl",
            captionPlugin: "caption2",
            overlayFxSel: "div"
        });
    </script>
</body>
</html>

Я бы также, вероятно, использовал идентификатор или класс, отличный от cycle-slideshow, при программной настройке слайд-шоу, чтобы оно не инициализировалось автоматически плагином цикла.

person Dylan    schedule 10.07.2013
comment
Большое спасибо @Dylan, это отлично работает. Я понимаю, о чем вы говорили, очень признателен за вашу помощь. - person redplanet; 11.07.2013

arrow_upward
1
arrow_downward

Вы должны включить ссылку на плагин caption с этой страницы:

http://www.malsup.com/jquery/cycle2/download/

Пример находится здесь:

http://www.malsup.com/jquery/cycle2/demo/caption2.php

person lucuma    schedule 09.04.2013
comment
Привет, спасибо за ответ. Я уже ссылаюсь на это в моем файле plugins.js. Я могу заставить галерею нормально работать со встроенными параметрами подписей (и любыми другими параметрами), но не через внешний скрипт, как в старом методе цикла. - person redplanet; 10.04.2013