client side assignment

IT 3046 JQuery: Assignment 5 Fall 2015

Total: 40 points

All assignments should be individual work. Discussion with class mates is allowed but the final code has to be written individually. Use jQuery for solving all problems. Refer to WK10 & WK11 in-class exercises and examples.

The goals of this assignment are to practice how to use the following and develop a gallery of images

· Animate & CSS method

· Plugins

· Widgets

1. (14 points) Make a Plugin work:

a. (6 points) Use the bxSlider (carousel) plugin to display at least 5 images of your choice. Chosen pictures should be G-rated. Some example themes: travel, nature, famous people in technology, favorite cartoon characters etc.

b. (2 points) Use the Thumbnail pager to implement ImageSwap

http://bxslider.com/examples/thumbnail-pager-1

c. (6 points) When the mouse is over a specific thumbnail image (mouseenter event), use the CSS method to change the opacity of the selected image to 0.8. When the mouse leaves the thumbnail image (mouseout event), use the CSS method to change the opacity of the image to 1.0. This interaction will highlight the image that is being selected.

2. (4 points) Add two links to two different Web sites related to the images you chose. Make sure the links open in a new window. Unrelated links will get 0.

3. (6 points) Using the animate method, animate at least one text item in your page.

4. (10 points) Make a widget work:

Use the dialog widget. When you click on the enlarged image, open a dialog form that has a single textArea or a label. A Cancel button closes the dialog. A Show button displays more information about the selected image. The information is collected from a description attribute (which you will add) in the HTML of each image.

5. (6 points) Creativity- readable color choices, clear layout, meaningful topic. If you use the CSS style provided in previous assignments/in-class exercises without substantial changes, you will get 0. Make this page your own.

6. (Extra Credit: 5 points)

a. Figure out how to use the Fotorama plugin (http://fotorama.io/ ) for your image gallery. Customize at least one item in the basic plugin. Submit this as a separate JS/HTML file (fotogallery.js/fotogallery.html) and provide a link to this page from your main page.

7. (Extra Credit: 10 points)

a. The jQuery get function can read different types of file. The following code can read a text file called “t.txt” that is stored in the same folder as your JS file. $.get("t.txt", function(data){

alert(data);

}, 'text');

b. Instead of adding the description for the images in an attribute in the HTML, add the descriptions in a text file. Each image will have its own file. Then display the correct description for the clicked image in the dialog form you created in #4. You may need to use string functions.

Submission Upload all the files as a .zip file to Blackboard under Submit Assignments ->Assignment 4. Name your file as YourUsername_A4.zip e.g. If I were to upload it, it would be mutsuday_A4.zip