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
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
- 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
- In the folder create a HTML file titled index.html
- create a sub-folder called "js" for the jQuery library
- create a subfolder called "css" for your stylesheet
- create a subfolder called "images" for your images and thumbnails
- create a subfolder called "img" for the style images
- 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
- save this file to your "js" folder: jquery.tools.min.js
the CSS file - CSS code to style it & make it all work
- save this CSS file to your "css" folder: overlay_style.css
- 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.
- tweek the HTML, the jQuery and the CSS code to change parameters, size, content and placement of thumbnails, overlays and tooltips.
- 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
- 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.
- get the images for tooltips and overlays from here: img - save them in your "img" folder
- 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.