Question

I can utilise jq cycle2 fine with all required options inline within a div, as is now the preferred style. But I would like to instead use an initialisation script, just like the old method of operation. I just prefer to keep the gallery options stuff out of my markup and in an external .js file wherever possible.

I've made the script with all of the options that work perfectly with the 'inline' method and it is linking properly, but this silently fails and the slideshow reverts to default setting of fade whereas I specify scrollHorz.

Also I'm using previous/next buttons and animated cations - the captions work but without animation and the prev/next buttons are visible but fail completely.

My script is in a file named 'functionality.js' and I believe I've followed the instructions for 'custom initialisation script' as outlined in the API. I have all relevant plugins in a file called 'plugins.js' which link just fine and you'll see them referenced in a console screengrab below.

Please see the following markup/script (it's a straight copy of a cycle2 example for simplicity) and a link to the console screengrab:

<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>

The linked script:

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

And here's a link to a screengrab of the console error

If anyone could advise it would be much appreciated, I'm sure it's a simple error!

Thanks in advance

Was it helpful?

Solution

There's a few simple mistakes in your JavaScript that are causing the cycle to fail. When initalising a slideshow programmatically, the parameters need to be camelCase instead of using hyphens like when they're specified using data attributes. You also need to wrap string-based parameter values with quotes otherwise your script will think that they are variables. Here's an updated version of your example that works:

<!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>

I'd also probably use an id or a class other than cycle-slideshow when setting up the slideshow programmatically so that it isn't auto initialised by the cycle plugin.

OTHER TIPS

You should include a reference to the caption plugin from this page:

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

An example is located here:

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

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top