Learn Cycle2 for jQuery From Top to Bottom

5.4 Cycle States and Hash

In previous lessons, you've learned about the cycle options. And these options are contained into an object that's called an option hash. Now this object, apart from the options, also contains some read-only data called state data. Let's see what that is. Let's actually begin with something called the hash. And do not mistake this for the option hash, which is the object with a bunch of properties. The hash is actually represented by an attribute called data cycle hash. And that can be applied to each slide in the slideshow. And if you assign a value to this attribute, then the location hash, or the address you see in the top of your browser, will be updated. Let's say for example that we're gonna add hashes to all of these slides. So we're gonna say, data-cycle-hash=, and let's do park, summer, leaves, and water. All right, so now notice that when the slides change, so does the hash or the page location. And the cool thing about this is, you can copy this link and share it with something else. And when they come back, they will open the slider at that exact slide, essentially creating bookmarkable slides. So with that out of the way let's learn a little bit more about this state data and the option hash. And for that, I'm actually going to tap into the cycle-update-view event, and do a couple of console logs here to show you what's going on. So state data is read-only. And there are six pieces of information you can get from this. You can get busy, so when a slide transition is active, then the busy state is active. You can get the current slide, the next slide. You can get the paused state. You can get the slide number and you can get the slide count. Let's do here a console log. We'll say current slide. And we'll tap into the option hash, the option hash, which is passed in as a parameter to this function. So optionHash dot, let's say, currentSlide. And then we're gonna say, The next slide is:, and we're gonna pass in optionHash.nextSlide + optionHash.slideCount. Let's see what's going on here. Gonna open up the console now. So see, update view event triggered. Let's actually pause the slideshow, yeah? So update view event triggered, current slide 0, the next slide is 1 out of 4. We go to the next slide, current slide 1 the next slide is 2 out of 4. So that's pretty cool. We can also show when the slide show is busy or when it is transitioning. console.log, we'll say Slideshow busy: + optionHash.busy. And this will return true or false depending on whether or not it's transitioning. And we can do the same with the paused state, so optionHash.paused. Let's have another look. So let's pause the slideshow. As you can see, Slideshow paused is triggered. And when I'm gonna go to the next slide, you can see that busy is true, pause is true. The slide has finished, the transition has finished. Busy is now set to false, slideshow is still set to true. And actually, if we do a console log, let's do this for a little bit of separation. If we do a console log to the entire option hash, that this is what we get. We get an object, [LAUGH] let's pause this again. We get an object, and you can see a whole bunch of properties here. Some you can change, some you can only read. And that's it for state data and bookmarkable slides. Now coming up, we'll have a brief look at the template customization that's available for Cycle. See you in the next lesson.