CRT - Creative Technologies
Diploma of Creative Industries (WDCI)

Teacher Name - lisa.cianci@vu.edu.au
Class Website - http://lisacianci.vucreativeindustries.com/2012/CRT

 

Week 12 (2 classes) - jQuery Image Gallery


 

Class Exercise

Today we will continue working on the image gallery for Assessment Task 3 - jQuery Image Gallery

review the assessment task document here

Don't worry if you don't have 20 images yet - we can use dummy images and get the gallery working, then you can substitute your own images later.

You need to be working on the following elements this week:

1. website gallery skeleton
You need to have a functional "skeleton" image gallery by the end of this week so that you can work on the style and interactivity you want to have in your image gallery.

2. stylesheet - CSS for the gallery
You need to determine the colours, fonts, and layout of <DIV> elements for your gallery. Some styles are provided because they are essential to enable the image gallery tooltip and overlay functionality. Other styles you will need to create yourself to suit your layout and design.

3. images to populate the gallery
You should be starting to create the images you will need to populate your image gallery. Don't forget you need a large image and a thumbnail of it for the gallery functionality (see the sample files for naming protocols).

It's easier for layout purposes to have all of your images the same width/height. Remember to save your images at the correct width/height/dpi for the project. You need a dpi of 72 pixels, and the large images woudl probably work best at around 800 x 600 pixels, but you can work with a wider or narrower shape depending on your image content.

 

Use the sample files to start you off. I will help you individually with coding and functionality.

 

From last week...

the HTML file - HTML & jQuery code

  1. Create a folder for your project, make sure you set up "site" in Dreamweaver so you can access your files easily and upload your gallery to your web folder on vucreativeindustries.com

  2. In the folder create a HTML file titled index.html

  3. create a sub-folder called "js" for the jQuery library

  4. create a subfolder called "css" for your stylesheet

  5. create a subfolder called "images" for your images and thumbnails

  6. create a subfolder called "img" for the style images

  7. save this HTML file to your project folder: sample.txt and change the extension from "txt" to "html"

 

the JS file - link to the jQuery Library

  1. save this file to your "js" folder: jquery.tools.min.js

 

the CSS file - CSS code to style it & make it all work

  1. save this CSS file to your "css" folder: overlay_style.css

  2. note where the CSS, the jQuery code and the hidden DIV tags are in the HTML page code. find where the stylesheet sets the property that hides the DIV tags for tooltip and overlay.

  3. tweek the HTML, the jQuery and the CSS code to change parameters, size, content and placement of thumbnails, overlays and tooltips.

  4. you can use this code setup as the basis for your own image gallery, but I want to see considered design changes to this basic format - colour, font, header images, layout etc. All of this must be customised.


the images and thumbnails

  1. get 6 images of your own and make smaller thumbnails in Photoshop for this exercise, or grab mine from this folder: images - save them in the "images" folder for your own site.

  2. get the images for tooltips and overlays from here: img - save them in your "img" folder

  3. you will eventually need to produce a minimum of 20 of your own images to use in this image gallery

 

What your image gallery should look like when complete: sample.html

Use class time this week to work on your art project and develop the images you will be using in your image gallery. Also, spend time tweaking and playing with the code provided. Extra marks will be given for projects that push the boundaries and go beyond the basic code provided here.

 

Reference

jQuery

JQuery home

JQuery Tools

JQuery cheat sheet

JQuery Tutorial - getting started

 

HTML Elements

http://www.w3schools.com/html/html_quick.asp

HTML Quick List from W3Schools. Print it, fold it, and put it in your pocket.

 

Video Tutorials

Adobe TV has some of the best tutorials and videos so you can refresh your memory when you are out of class. We are using Adobe applications of the CS4 version (which are not the latest) so it is best to use the documentation and tutorials for CS4 because newer versions have different menus and functionality which might be confusing.

http://tv.adobe.com/show/learn-dreamweaver-cs4/

If you want to look at later Dreamweaver versions such as CS5.5 and CS6, there will be further instruction about using HTML5. CS4 doesn't automatically show code hints for HTML5, but you can use HTML5 in the code view.

 

Other Things to Do/Remember

Keep working on your blog content & commenting on colleagues' blogs.

The HTML CSS Poster was due before the break, some of you still have not submitted it.