Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
I'm actually going to get rid of this grouping, we're going to just go for as basic as possible. But I have no idea if this selector is going to work right now, so let's look for the right one. I'm going split the view so I can see both of these at once. I'm going to scroll up a little bit to where the goods are. Okay, here's an example. So the way this is supposed to work is when I click this link instead of loading the picture in its own little browser window. I want it to load in the Colorbox. So I can see that the default implementation involves clicking a link. And that is what we want, but we don't want every link on the page and we don't want to use the gallery class because we don't actually have one.
We could add one, but the better way is to modify the selector to work on what we actually want. So, what I want is to use this flower items ID. So this selector will select all of the anchor tags, that is the links inside the flower items ID, and then get Colorbox going. Now, performance purposes, it's better to keep the ID by itself in the jQuery selector and then limit it afterwards with a filter. So that's what I'm going to do. I'm going to use the find filter to collect all the anchor tags inside that ID and then turn on Colorbox. So let's save this and switch back over and reload.
What this is doing is just marking these selected items as being part of a group, so that when you open the Colorbox on one of them, you'll be able to page through all of them. So, we'll save this, switch back over to the browser. Reload my page, if I click one of these now. I can page through them using the arrow keys, or these on screens arrows. Again, these styles are part of the Hansel and Petal installation that were made by its original designer. So, that's a look at how to do a basic implementation of Colorbox just by copying the examples. With any of the halfway decently written jquery plugins, you might be able to do nothing more than this and get everything you need.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.