Session 1: Today we will continue looking at CSS3 transitions. In addition we will discuss the requirements for the next exercise: jQuery Gallery. jQuery is a JavaScript library or framework that makes complicated tasks easier to create. It is often used to enhance the UX of web applications by providing advanced user interface tools including accordions, tooltips, easing, menu systems, ajax, and more.
More on CSS3 Transitions:
Transitions and Animations
Easing Functions Cheat Sheet
jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML. Used by over 60% of the 10,000 most visited websites, jQuery is the most popular JavaScript library in use today. jQuery is free, open source software, licensed under the MIT License. –Wikipedia
Exercise 2: jQuery Gallery
Due: Session 2, Week 7 (5 points)
Description:
Use one of the many examples of jQuery images viewers to create a gallery of nine images. Build the application into a single page that includes a 3 x 3 grid of thumbnails used as interface items for exploring the gallery. Prepare the environment so that it will work with or without internet access. A zip file of the environment that includes all the necessary web files (images, JavaScript files, html files, etc.) must be uploaded by session 2 of week 7.
Requirements:
1. Build a single page with a 3 x 3 grid of thumbnail images.
2. Implement a jQuery image viewer so that each images enlarges on clicking the thumbnail.
3. Set up the images in a gallery so that navigation to the previous and next images is available.
4. Upload to your student webspace by session 2 of Week 7.
Points Breakdown:
3 points will be awarded for properly implementing a jQuery gallery plugin.
2 points will be awarded for creating an effective thumbnail interface.
Relevant Resources:
LightBox
Fancybox
Flexslider
An article with many jQuery Gallery Plugins
Session 2: Today we will be presenting the CSS3 Transitions Exercise. Following the presentations we will continue demonstrating how to implement jQuery gallery plugins.