Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
So we have reached the point in the course now where we can take what we have learned about jQuery and put it all together into a real site. What we are going to do is take a site that we have built that was built without jQuery and we are going to update it with some new features to make it more Web 2.0, more interactive, a little bit more visually appealing. We are going to do a few things. First, drawing on our jQuery UI widget knowledge, we are going to go and add an Accordion control to our website and see how that works.
Then we will build an image rotator that has some nice smooth transition effects and we will do that just using jQuery in CSS. We will also build some mouse over tooltips and we will build a jQuery-based image selector. So you will click on some thumbnails and that changes a larger view into the current image and then we will use one of the jQuery UI interactions to make a form field resizable and constrained. So let's begin by taking a look at the current site the way that it is and then we will take a look at the site after it has been modified to work with jQuery.
Groundswell is a fictitious surfing shop site and it has got all kinds of stuff on it. So here you can see that there is a news section and we got different photos and you can buy some products and that kind of stuff. So let's see. That's the homepage and if we go to Gear section, you can see that they have got some stuff that's for sale. We click on the Boards and it looks like in this section we have got boards that are listed here and over here I have got the current board that I am looking at and if I click on the view larger link, you will see that that takes me to a separate page where I can see the larger graphic image. Then let me see.
Go to the Lifestyle page. There is a Photo array that's pretty standard. There is also a Register link where I can register for the site and you can see I can fill out a form. Pretty good. Let's take a look at the site however once it has been updated to work with jQuery. So let's go back to the folder and we will go to the Final version and we will bring this guy up in the browser. So this is pretty similar, but a couple of things right away you notice off the bat. Over here now, this image array is being animated and it has got a nice little fade effect going on and that's all done with jQuery and CSS.
There is no plug-in there. You can see that the News Section has been updated to use the Accordion control that we saw in the jQuery UI chapter. So I can now click on these various Accordions and read the news, and that looks a lot nicer. It's a lot more interactive. It's nice and smooth, scrolling and animated. So there are some changes to the Homepage that have been made. Let's go check out the Gear section. So here is the Gear section. Let's go look at the Boards. Now you can see that here in the Board section rather than having to click on the view larger link, I can just roll over it and you see the nice little tooltip fades in and fades out.
So that's a lot nicer than having to go to a separate page. What other changes have we made? So here in Lifestyle section, if you look at the Register, you can see that the Comments field is still there, but now you got a nice little resize handle down here. So I can resize this up and down based upon how much room I need to enter my comments. So all of this has been accomplished using jQuery and we are going to go look now at how each one of these features was implemented, so you can implement these features and others in your own sites.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 103120 Viewers
61 Video lessons · 89778 Viewers
71 Video lessons · 73407 Viewers
56 Video lessons · 104960 Viewers
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.