WD-3 - Class 04 - 2011

Subject WD-3 - Web Design 3
Competencies

CUFDIG505A.1 - Design Information Architecture (part 1)

Course Title ADVANCED DIPLOMA of SCREEN AND MEDIA (CUF60107)
Teacher Lisa Cianci - email: lisa.cianci@vu.edu.au
Class Website: http://lisacianci.vucreativeindustries.com/2011/WD3
                         (username & password = student)

 

More JQuery

 

Today we will be covering the following topics:

 

Scrollables

Scrollable elements are great for image gallery thumbnails - you can make a large number of images available in a small space by allowing the user to scroll through the selection.

this jQuery Tools Scrollable function allows you to easily create the scrollable, change buttons and style, and direction of the scroll from horizontal to vertical. You can also use an additional plugin called 'circular()' to make your scrollable continuous in both directions. You can enable a clickable script so that the image you select moves to the centre of the scroll area. it's pretty simple to use.

Today's examples show one file with a scrollable area only. The second one incorporates the scrollable with an apple overlay - so a virtually complete version of an image gallery:

scrollable only

scrollable with overlay

Note in the scrollable with overlay, I have written a looping script for the overlay trigger so I only have to write it once and it works for each of the 35 images I have in this gallery.

jQuery has the each() function which is a really easy way of doing loops through a selection of elements or attributes. It's similar to doing a for loop in Flash but you don't need the same parameters. Note the use of $(this) to define the current iteration of the element or attribute used for the each() loop. $(this) is similar in usage to the way 'this' is used in ActionScript to denote an instance.

Here's an example of my jQuery code:

<script>
// execute your scripts when the DOM is ready. this is a good habit
$(document).ready(function() {
// initialize scrollable
$("#infinite").scrollable({
size: 7,
keyboardSteps: 3,
clickable: false
}).circular(); //this bit makes the scroll continuous
//do a loop script to make the thumbnail images load the bigger ones into overlay
$(".items img").each(function() {
var $this = $(this);
var myTarget = "#d" + $this.attr("id");
$(this).overlay({
expose: '#000',
effect: 'apple',
target: myTarget
});
});
});
</script>

Not much code for a scrollable and overlay for 35 thumbnails and 35 large images!

Here's another example I'm putting together for a little project presentation of my own. No scrollable, but it uses tooltips and overlay with thumbnails, and I wrote both the tooltip and the overlay into the looping script to minimise the code:

<script>
$(document).ready(function() {
$(".items img").each(function() {
var $this = $(this);
var myTarget = "#d" + $this.attr("id");
$(this).overlay({
expose: '#000',
effect: 'apple',
target: myTarget
});
var myTooltip = "#t" + $this.attr("id");
$(this).tooltip({
tip: myTooltip,
effect: 'fade',
fadeOutSpeed: 400,
predelay: 400,
position: "center right",
offset: [60, -20]
});

});
});
</script>

Of course you also need the CSS and the <img> and <div> tags to make it all work.

 

Class Exercise:

Today's challenge - to implement some kind of scrollable area into a web page. Try some of the additional plugins such as circular(), autoscroll() an navigator() or try some of the other demos such as vertical scroll, scroll with images and text in the <div>, etc.

Get this updated jQuerytools JS file - I think the one from last week wasn't using the circular() function properly.

 

extra reading & useful links

jQuery Tools

jQuery Tools Scrollable Documentation

jQuery Tools Users Guide

jQuery cheat sheet (your jQuery BFF)

 

use the rest of the class to work on your assessment tasks. next week I will be reviewing your progress on the project you are doing, so make sure you have everything in class to show me.