Ultimately, pop-ups and nonrequested new windows
are a very bad thing, so avoid using them.
Creating an online gallery
As mentioned earlier, there??™s a better way of creating an online gallery than using pop-up
windows when thumbnails are clicked. Instead, JavaScript can be used to swap out an
image that??™s on a web page, replacing it with another, as shown in the following exercise.
Required files gallery-starting-point folder in the chapter 5 folder.
What you??™ll learn How to create a basic online gallery that enables you to easily
switch the main image by clicking on thumbnails.
Completed files gallery-completed folder in the chapter 5 folder.
1. Add the script. Create a new text document and save it as gallery.js in the same
folder as the files from the gallery-starting-point folder. Add the following
to it:
function swapPhoto(photoSRC) {
document.images.imgPhoto.src = "assets/" + photoSRC;
}
Be aware of the case-sensitive nature of JavaScript and also the path to the images,
which is set here as assets/.
2. Add the main image. This requires an id attribute that correlates with the one provided
in step 1 (imgPhoto). Leave off the height and/or width attributes if your
images have varied dimensions. If your images have one identical dimension (such
as the same widths), include that, but omit the other. (The img is placed within a
div so that the document conforms to XHTML Strict. This also enables the gallery
width to be defined later in CSS.
Pages:
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278