Learn Cycle2 for jQuery From Top to Bottom

2.5 Using Overlays

Overlays are elements quite similar to captions and in fact they can be adapted so they do the exact same thing. So what are the differences? Let's find out. First of all, let's have a look at how an overlay looks like. And the easiest method to define it is, with an element with a class of cycle-overlay. Again, you do not set any kind of content on it. Now, this one currently looks like this. And that's because in addition to declaring the overlay element here, you need to set a title and a description on each slide. So you would do data-cycle-title. Let's say Title 1 for example, and just data-cycle-desk for description. For example, Slide 1 description. And you would do this for the other images, like this. So now that overlay will show the title and the description. And the markup is very simple. It just puts those two elements into this. The nice thing is you can also create your own template. So if we're gonna create another slideshow here and then in here. We're gonna say data cycle-overly-template, equals. And instead of those divs, let's use something else. Let's use, for example, a paragraph. And let's use cycleTitle here. So this refers to this attribute value right here. Now we are gonna close that paragraph. And let's define yet another paragraph, or we're gonna put the cycle description, yeah. Now our overlay will look something like this. Now let's do a quick customization on these overlays. We're gonna say cycle-overlay. Simply set position absolute, on the bottom, with some padding, background-color, make it 100%. And just in case we're not using the default template, we're targeting the first item and we're making it bold. So now it looks something like this. Yeah. Very nice. You can also define your very own container for the overlay. So back here instead of cycle overlay maybe you want a class of my overlay. Well in that case you need to go here and you can say cycle, data-cycle-overlay equals do a selector again, ,my overlay, okay? Save and maybe style that. So a very similar styling to the default overlay. But we change the background color and the text color right here. So now we have two different overlay styles. In addition to these attributes here, you can also add, any kind of data attribute and then the use it, in the template here. So for example if I were to add data theme here, and let's say trees. Let's add it on the outer images as well. All right, then inside here, inside a template we can target it. So we'll do another paragraph and let's do like and small and we're gonna do double brackets again. And we're gonna say theme. Now so no data, just this part here. Save, and now on the second one we have our normal contents, plus the other attribute. And that's it for overlays. Now I'm sure you've seen sliders before and those sliders usually have tiny circles or squares somewhere on them that you can click on. And they will take you to their corresponding slide. So in Cycle those are called Pagers. And you'll learn all about them in the next lesson.