It’s really easy to manage a slideshow powered by Cycle2. This tutorial will show you how to set everything up so you can use the Photo Gallery Editor to add, remove, and reorder slides.
First, download jQuery and Cycle2
and add the files to your site. Then include them in the <head>
section of your page:
<script src="path/to/jquery-1.x.x.min.js"></script> <script src="path/to/jquery.cycle2.js"></script>
Don’t forget to update the paths so they point to the right location on your server. You’ll also need to update the jQuery version depending on the one you download.
Surreal generates simple, semantic markup for its photo galleries that works great with Cycle2. All you need to do is make sure links are disabled in your gallery. Your markup should look something like this:
<div id="my-gallery" class="editable-gallery" data-links="false">
<img src="image.jpg" alt="Your Description">
...
</div>
Don’t use the cycle-slideshow class on your gallery to
auto-initialize Cycle2. This will make it so you can’t disable it from
running in the Live Editor. Seel below for more details.
To turn Cycle on, you just need a bit of JavaScript. Add the following script immediately after the two scripts you’ve already included:
<script>
$(document).ready( function() {
// Don't execute if we're in the Live Editor
if( !window.isCMS ) {
// Enable Cycle2
$('.editable-gallery').cycle();
}
});
</script>
Looking at the script above, you’ll notice that we’ve told Cycle2 not to run in the CMS. This prevents changes that the plugin makes to your HTML from being published, potentially breaking the slideshow.
As a result, you may see all your slides stacked on top of each other in the Live Editor. That’s easy to fix with some CSS:
/* Hide all slides in the CMS... */
.is-cms #my-gallery img {
display: none;
}
/* ...except for the first one */
.is-cms #my-gallery img:first-child {
display: block;
}
We’ve used the .is-cms selector described
here so the styles only get picked up in the Live Editor. Now you’re ready to
edit your slideshow!
Cycle2 comes with a lot of extra features. Now that you know how to make a slideshow editable, you can start customizing it by adding captions, previous/next links, transitions, and more!