Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
We can further enhance that by using Spry widgets and effects to add increased interactivity. Before we get into exercises, let's take a look at the finished file to see exactly what we will be doing. So here we are in the browser and we are previewing the CHEEK CHASTAIN CURRENT SHOW page. Now, I am going to scroll down just a little bit so that we can actually see the finished version of this. This file is available in your Exercise Files, if you are following along. They are in the Chapter 5, Spry Directory, and the name of the file is current_final.
Well, on the left hand side of the page, we have a table that says Painting and Price. So these are the paintings under the Current Show and their prices. Notice that if I click on Price, we actually change the sorting order of the table. If I click on Painting, we change the sorting order of the painting by the painting's name. As I hover over, I get a Hover Effect over each of these. If I click on them, then I get a Selected Effect. Now, what is that Selected Effect actually doing? Well, more on that in just a moment. Now, below that, we have a list of Past Shows, and this is the Past Shows for our current author. Now, that doesn't look all that impressive, but it's coming from an XML file, so we are not actually using a database for that or we are not having to hand-code it, we are letting Spry take care of that for us by just bringing this data in from an XML source.
Now, to the right of that we have what's known as a Spry widget. This is the Accordion widget. So it starts off with a Note from the Artist, but if I click the tab for Image, notice that it animates down to reveal a painting. Well, each of the paintings that are listed over here on the table, when I click on them, they will refresh and change the view and display another painting and any resulting information. If I click on Painting Info, it displays the info about that particular painting, and of course clicking on Note from the Artist will reveal that again. We have a nice animation effect between each of these, and each of the panes features a different height.
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.
Your file was successfully uploaded.