<%@LANGUAGE="VBSCRIPT" %> <% Response.CacheControl = "no-cache" %>
Assignment 6

Materials to turn in on the server

  • In your Assign06 folder:
    • zoom.html
    • js folder
      • jquery files
    • zoomImages folder
      • img1, img2, img3 jpg images
      • thumbs folder
        • img1, img2, img3 jpg thumb images

Expand/Collapse Section ImageMore jQuery

Description: In this assignment, you will use jQuery to zoom in on an image.

Expand/Collapse Section ImageExercise Specifications

  1. Image Zoom
    • Here is an image of the finished solution
    • You will need 4 <div> elements on the page
      • one with id="smallImage"
      • one with id="thumb1"
      • one with id="thumb2"
      • one with id="largeImage"
    • Add the CSS to place and position elements on the page - 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
    • Add the jQuery to finish out the file - found in the code
      • Notice how <!-- html comments --> are used around the JavaScript, just inside the <script> elements.
    • Validate your HTML5 code, you should have zero errors.
    • 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.
      • zoom page code

Grading

Total 10 pts