| Read more about this book |
(For more resources on jQuery, see here.)
Time for action – adding a new skin
At the bottom of the animate-position.css file, add the following code:
a { outline:0 none; }
#slider {
border:1px solid #999; -moz-border-radius:8px;
-webkit-border-radius:8px; border-radius:8px;
background-color:#ededed; -moz-box-shadow:0px 2px 7px #aaa;
-webkit-box-shadow:0px 2px 7px #aaa; box-shadow:0px 2px 7px #aaa;
}
#title, #slider ul { margin-top:10px; margin-bottom:12px; }
#title {
font:normal 22px "Nimbus Sans L", "Helvetica Neue", "Franklin
Gothic Medium", Sans-serif;
color:#444;
}
#viewer { border:1px solid #999; background-color:#fff; }
#slider ul { width:120px; }
#slider ul li a {
display:block; width:10px; height:10px; text-indent:-5000px;
text-decoration:none; border:2px solid #666;
-moz-border-radius:17px; -webkit-border-radius:17px;
border-radius:17px; background-color:#fff; text-align:center;
}
#slider #prev, #slider #next { margin:0; text-align:center; }
#slider #prev { left:10px; }
#slider #prev a, #slider #next a {
display:block; height:28px; width:28px; line-height:22px;
text-indent:0; border:1px solid #666; -moz-border-radius:17px;
-webkit-border-radius:17px; border-radius:17px;
background-color:#fff;
}
#prev a, #next a { font:bold 40px "Trebuchet MS"; color:#666; }
#slider ul li a.active { background-color:#F93; }
What just happened?
With this code we style all of the visual aspects of the widget without interfering with anything that controls how it works. We give it some nice rounded corners and add a drop-shadow to the widget, turn the numeric links into little clickable icons, and style the previous and next links. Colors and fonts are also set in this section as they too are obviously highly dependent on the theme.
These styles add a basic, neutral theme to the widget, as shown in the following screenshot:
The styles we used to create the theme are purely arbitrary and simply for the purpose of the example. They can be changed to whatever we need in any given implementation to suit other elements on the page, or the overall theme of the site.
Have a go hero – making the image viewer more scalable
In our animated content viewer, we had a fixed number of images and a hardcoded navigation structure to access them. Extend the content viewer so that it will work with an indeterminate number of images. To do this, you will need to complete the following tasks:
- Determine the number of images in the content viewer at run time and set the width of the #slide wrapper element based on the number of images
- Build the navigation links dynamically based on the number of images
- Create the details object dynamically based on the number of images and set the correct left properties to show each image
Animating an element’s size
Almost any style property that contains a purely numeric value may be animated with the animate() method.
We looked at animating an element’s position by manipulating its left style property, so let’s move on to look at animating an element’s size by manipulating its height and width style properties.
In this example, we’ll create image wrappers that can be used to display larger versions of any images on the page by manipulating the element’s size.
Time for action – creating the underlying page and basic styling
First, we’ll create the underlying page on which the example will run.
- Add the following HTML to the <body> of our template file:
<article>
<h1>The Article Title</h1>
<p><img id="image1-thumb" class="expander" alt="An ASCII Zebra"
src="img/ascii.gif" width="150" height="100">Lorem ipsum
dolor...</p>
<p><img id="image2-thumb" class="expander" alt="An ASCII Zebra"
src="img/ascii2.gif" width="100" height="100">Lorem ipsum
dolor...</p>
</article> - Save the example page as animate-size.html. We’ll keep the styling light in this example; in a new file in your text editor, add the following code:
article {
display:block; width:800px; margin:auto; z-index:0;
font:normal 18px "Nimbus Sans L", "Helvetica Neue", "Franklin
Gothic Medium", sans-serif;
}
article p {
margin:0 0 20px; width:800px; font:15px Verdana, sans-serif;
line-height:20px;
}
article p #image2-thumb { float:right; margin:6px 0 0 30px; }
img.expander { margin:6px 30px 1px 0; float:left; }
.expander-wrapper { position:absolute; z-index:999; }
.expander-wrapper img {
cursor:pointer; margin:0; position:absolute;
}
.expander-wrapper .expanded { z-index:9999; } - Save this file as animate-size.css in the css folder.
What just happened?
The HTML could be any simple blog post consisting of some text and a couple of images. The points to note are that each image is given an id attribute so that it can be easily referenced, and that each image is actually the full-sized version of the image, scaled down with width and height attributes.
The styles used are purely to lay out the example; very little of the code is actually required to make the example work. The expander-wrapper styles are needed to position the overlaid images correctly, but other than that the styling is purely arbitrary.
We’re floating the second image to the right. Again this isn’t strictly necessary; it’s used just to make the example a little more interesting.
Time for action – defining the full and small sizes of the images
First we need to specify the full and small sizes of each image:
var dims = {
image1: {
small: { width: 150, height: 100 },
big: { width: 600, height: 400 }
},
image2: {
small: { width: 100, height: 100 },
big: { width: 400, height: 400 }
}
},
webkit = ($("body").css("-webkit-appearance") !== "" && $("body").
css("-webkit-appearance") !== undefined) ? true : false;
What just happened?
We create an object which itself contains properties matching each image’s filename. Each property contains another nested object which has small and big properties and the relevant integers as values. This is a convenient way to store structured information that can easily be accessed at different points in our script.
We also create a variable called webkit. There is a slight bug in how images floated to the right are treated in Webkit-based browsers such as Safari or Chrome. This variable will hold a Boolean that will indicate whether Webkit is in use.
A test is performed which tries to read the -webkit-appearance CSS property. In Webkit browsers, the test will return none as the property is not set, but other browsers will either return an empty string or the value undefined.
