Today we will be starting to build 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.
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.