The fourth and final assignment in this course consists of three exercises. In the first exercise you will use a jQuery plugin to create a slideshow. In the second exercise you will use jQuery UI and in the final exercise you will use jQuery plugins, jQuery UI and your own code.
After this lab assignment, you should have gained knowledge about the following:
- How to use jQuery UI
- How to use jQuery plugins
- How to use drag and drop using jQuery.
You should be familiar with how to download and set up jQuery. In addition you will need to download and set up jQuery UI. You can find instructions on how to do so here: http://learn.jquery.com/jquery-ui/getting-started/
The exercises in this assignment all have different difficulty levels: Basic and Advanced. Complete all basic level exercises to score 15 points on this assignment. To score 25 points, complete each exercise on the advanced difficulty level.
Exercise 1 - jQuery UI
Exercise: Create a set of web pages that demonstrate different jQuery UI widgets.
Details: In this exercise you task is to create a number of web pages that use jQuery UI widgets. You will have to learn how to use the different jQuery widgets and how to read and search for information in API documentation. Depending on the choosen difficulty level, you will be creating between three to four pages.
- A start page (Home)
- A page that demonstrates a content accordion component
- A page that demonstrates a tabbed content component
Start Page and menu: You are free to have any content you want on the home page. Create the menu using the jQuery UI menu widget. The sub menu containing the “Accordion” and “Tabs” items fold out. The menu should also contain a link to the slideshow page you will create in Exercise 2.
Accordion Page: The content of the accordion page is an accordion jQuery UI widget. The accordion widget in your page should have at least three sections with content.
Tabs Page: The content of the tabs page is a tabs jQuery UI widget. The tabs widget in your page should have at least three tabs with content.
Add two additional pages that demonstrate the following jQuery UI widgets:
Exercise 2 - Slideshow using jQuery plugin
Exercise: Create a web page that uses a jQuery plugin to create a slideshow. You can use the same images as in Assignment 2.
Details: In this exercise, your task is to select a jQuery plugin for making slideshows and create a slideshow page using that plugin. You will have to read the documentation for the different plugins and decide which to use. Different plugins have different setup requirements such as CSS-files, JS-files and compatible versions of jQuery. In order for you to succeed in using the plugin, you must make sure you follow these setup instructions.
Requirements: The slideshow should either have thumbnails, or some kind of position markers/dots. You should also be able to the previous slide or the next slide in the slideshow, either by clicking on a button, or using the keyboard.
Select a plugin: You can use one of the following plugins, or another if you find one that is more attractive to you. Do not use a solution that you have used in a previous assignment.
Exercise 3 - Combining jQuery plugins, jQuery UI and your own code
Exercise: Create a web page that according to the wireframe below. The webpage should
- use the tablesorter plugin to make the table sortable
- use the Draggable and Droppable jQuery interactions to drag an image thumbnail to one of the three main images
- use a lightbox jQuery plugin to implement lightbox functionality for the images on the page.
Details: The page should contain a three images placed beside each other, above a table with five columns. The last column should contain images that can be dragged to one of the three main images above.
- When an image is dragged and then dropped ontop of one of the three top images, the image that recieved the dropped image should change so that it shows the dropped image. The images in the table should remain the same. See jQuery UI Draggable and jQuery UI Droppable
- Clicking on one of the three images above the table should bring up a larger lightboxed version of the image. Use e.g. jQuery Lighter or fancyBox
- The table should be sortable using the tablesorter-plugin
Links to plugin pages and github repositories
- Add a button that resets the top images.
- Do not allow the same image to be shown in more than one square.
Updated by: Jody Foo
Last updated: 2017-10-20