Description: In this lab, you will write an HTML page that uses jQuery to slide images back and forth.

 

1. Images of the finished product:
• At rest, no mouse image
• Mouse over one item image
• Mouse moving quickly over several items image
2. Download jQuery: http://docs.jquery.com/Downloading_jQuery
• Place the jQuery .js file into the js folder
3. Use Google images (or your own) and find 8 pictures that you like
• Resize and crop them to 150px wide by 200px tall
• Save the images to your images2 folder (1.jpg, 2.jpg, 3.jpg, etc)
4. Add a <div> with id=wrapper
• Inside that <div>, add 8 more <div> elements with id's th1, th2, th3, etc.
5. Add the <script> element that points to your jQuery library
• <script src="js/jquery-1.7.1.js"></script>
6. Add the CSS to format the document - found in the code.
• If you add a little at a time and refresh, you get a better sense of how the CSS elements are working - giving yourself a better understanding of CSS as a whole.
• Notice how <!-- html comments --> are used around the CSS
7. Add the jQuery to handle the rounded corners and hover effect - found in code
• Notice how <!-- html comments --> are used around the JavaScript, just inside the <script> elements.
8. Validate your HTML5 code, you should have zero errors.
9. Code
• Here is the code for this entire exercise. Proper use would be: look at the code to make sure you are approaching the assignment the correct way. Then try to do it on your own. Then use the code to make sure you've done it correctly. Improper use would be: copying without interpreting, which would result in not really learning what you're doing. The code is provided to help you be successful and so that you don't have to ask as many questions about the assignment.
• hover page code

 

1. Download jQuery: http://docs.jquery.com/Downloading_jQuery
• Place the jQuery .js file into the js folder
2. Use Google images and find 7 pictures that you like
• Resize and crop them to 630px wide by 330px tall
• Save that image to your images folder (1.jpg, 2.jpg, 3.jpg, etc)
• Resize and crop again to 75px by 75px
• Save that image to images/thumbs/ folder (1.jpg, 2.jpg, 3.jpg, etc)
3. Here are the other images to use
4. Images of the finished product:
• At rest, notice the left/right arrows and dots below image
• Mouse over one of the dots shows preview of that image
5. Write the HTML5 first (see code)
6. Write the CSS second (see code)
• After writing the CSS, without errors, yours should look like the 'at rest' image above
7. Write the jQuery/JavaScript third (see code)
8. Code

• Here is the code for this entire exercise. Proper use would be: look at the code to make sure you are approaching the assignment the correct way. Then try to do it on your own. Then use the code to make sure you've done it correctly. Improper use would be: copying without interpreting, which would result in not really learning what you're doing. The code is provided to help you be successful and so that you don't have to ask as many questions about the assignment.
• index page code
• css code