JavaScript in action

 Looking back at our My Photo Gallery example, an important missing feature isthe ability to view a selected photo in larger format. JavaScript is a perfect platform toadd this functionality as its main usage is to bring interaction to HTML documents.Using the existing code example, we can extend its functionality by adding a new div element at the bottom of the page body to contain the larger image view. This element can be empty as we do not want a photo to be displayed by default on page load. Finally, we set an identifier on the div tag of id="photo-display", which will allow us to target the content in that element from CSS and JavaScript:

<div id="photo-display"></div>

 Before integrating the JavaScript functionality, we need to append some CSS styles to div using #photo display to allow selected photos to fill the browser window at a higher resolution, typical of most photo gallery displays. Within the CSS styles, we have already set for this example, we will append some more style properties to the #photo-display element:

#photo-display {
display:none;
position:absolute;
top:0;
width:100%;
height:100%;
background-color:#000000;
text-align:center;
}
#photo-display img {

margin:auto;
margin-top:50px;
max-height:800px;
border:4px solid #ffffff;
}

This CSS will target only one specific div as we have used the #photo-display syntax to target it. To start the styles off, we begin with the most important parameter, display:none, which hides the element on page load. This is perfect in our case as we do not want the full-screen display visible on page load. By adding
position:absolute and top:0 to the style definition for our #photo-display element, we will display the element on top of the previous elements declared within the HTML body. The rest of the styles set on #photo-display are pretty self-explanatory. The next lines of CSS specifically target the img elements within div with the photo-display class. We can do this in CSS by chaining identifiers together. In this case, we specify these styles for image tag elements within a custom named element ID.

With the HTML and CSS to display the larger version of a selected photo in place, the next step is adding the JavaScript code for displaying the selected photo within the #photo-display container upon user interaction. To consolidate this example into a single file, we will add the JavaScript within an HTML script element:

<!-- Our Photo Gallery JavaScript Source -->
<script>
var largeImage = new Image();
// Display a specific photo in the large
// photo display element.
var displayPhoto = function(source) {
// If there is already an image inside the display
// remove it.
if(largeImage.src != '') {
document.getElementById(
"photo-display").removeChild(largeImage);
}
// Update the source location of the image
largeImage.src = source;
document.getElementById(
"photo-display").appendChild(largeImage);
// Display the large photo element.
document.getElementById("photo-display").
style.display = 'block';

}
// Closes the large photo display element.
var closePhotoDisplay = function() {
document.getElementById("photo-display").
style.display = 'none';
}
</script>

As a Flash developer, the previous function syntax should look pretty familiar. A major change within the function scope is the variable syntax. Unlike AS3, the HTML as well as the source variables are not strictly typed. This goes for all variables within JavaScript syntax and is probably one of the biggest issues Flash developers have with JavaScript.

Aside from some string manipulations to generate img HTML elements from the source variable, the method also references the document object. Every HTML document that is loaded into a browser then becomes the document object accessible from within JavaScript. The document object within JavaScript has a number of built-in properties and methods that are available to access information and elements within the view HTML document. In our example, we make use of the easily defined document object method getElementById(). As the method name implies, when an HTML element's ID is supplied, the reference to the element within the HTML document is returned for use within the script. Since JavaScript supports the chaining of properties, we can apply the innerHTML property to manipulate the inner content of an HTML element as well as the style property to change an element's CSS properties.

To enable an image to close once a user has finished viewing it, we will add a second JavaScript function to our example to revert all the changes made when displaying the photo. Since the photo-display image will be updated when the user clicks on a new image, all our closePhotoDisplay method needs to do is hide the visible element to show the full photo gallery again:

functionclosePhotoDisplay() {
document.getElementById("photo-display").style.display = 'none';
}

Setting the #photo-display element's style.display back to none hides the entire element and reverts the user interface back to its initial state.

Adding events to each of the photos can easily be accomplished by appending an onclick parameter to the targeted element. The addition would look as follows:

<imgsrc="photo1.jpg" class="photo"
onclick="displayPhoto('photo1.jpg')">

Now, when the image is clicked on, the onclick event gets fired and runs the JavaScript code declared within the parameter. In this case, we use this opportunity to call our displayPhoto method within our previously written JavaScript block. Within the call, we supply the required source variable, which will be the image file name as a String datatype. This will allow the proper image reference to be used within the #photo-display element. All put together, our updated div tag with id="#photo-gallery" will now look like the following:

<div id="photo-gallery">
<imgsrc="photo1.jpg" class="photo"
onclick="displayPhoto('photo1.jpg')">
<imgsrc="photo2.jpg" class="photo"
onclick="displayPhoto('photo2.jpg')">
<imgsrc="photo3.jpg" class="photo"
onclick="displayPhoto('photo3.jpg')">
<imgsrc="photo4.jpg" class="photo"
onclick="displayPhoto('photo4.jpg')">
<imgsrc="photo5.jpg" class="photo"
onclick="displayPhoto('photo5.jpg')">
</div>

Finally, to enable the user to close an open image within the #photo-display element, we will apply an onclick event to call our closePhotoDisplay method. Rather than applying the onclick event to the image within the #photo-display element, we will target the display itself, allowing users to click anywhere in the browser to close the display:

<div id="photo-display" onclick="closePhotoDisplay()"></div>

Putting all of these code snippets together, the gallery source now looks like the following:

<!DOCTYPE html>
<html>
<head>
<title>My Photo Gallery</title>
<!-- Our Photo Gallery CSS Styles -->
<style type="text/css">
body {
background-color:#000000;
}
#photo-gallery {
width:100%;
}

#photo-gallery .photo {
width:200px;
border:4px solid #ffffff;
}
#photo-display {
display:none;
position:absolute;
top:0;
width:100%;
height:100%;
background-color:#000000;
text-align:center;
}
#photo-display img {
margin:auto;
margin-top:50px;
max-height:800px;
border:4px solid #ffffff;
}
</style>
<!-- Our Photo Gallery JavaScript Source -->
<script>
var largeImage = new Image();
// Displays a specific photo in the large
// photo display element.
var displayPhoto = function(source) {
// If there is already a image inside the display
// remove it.
if(largeImage.src != '') {
document.getElementById(
"photo-display").removeChild(largeImage);
}
// Update the source location of the image
largeImage.src = source;

document.getElementById(
"photo-display").appendChild(largeImage);
// Display the large photo element.
document.getElementById(
"photo-display").style.display = 'block';
}
// Closes the large photo display element.
var closePhotoDisplay = function() {
document.getElementById("photo-display").
style.display = 'none';
}
</script>
</head>
<body>
<div id="photo-gallery">
<!-- Place all of the images inline with a 'photo' class
for CSS manipulation. -->
<imgsrc="photo1.jpg" class="photo"
onclick="displayPhoto('photo1.jpg')">
<imgsrc="photo2.jpg" class="photo"
onclick="displayPhoto('photo2.jpg')">
<imgsrc="photo3.jpg" class="photo"
onclick="displayPhoto('photo3.jpg')">
<imgsrc="photo4.jpg" class="photo"
onclick="displayPhoto('photo4.jpg')">
<imgsrc="photo5.jpg" class="photo"
onclick="displayPhoto('photo5.jpg')">
</div>
<!-- An empty DIV element to contain the user selected photo
in large scale. -->
<div id="photo-display" onclick="closePhotoDisplay()"></div>
</body>
</html>

Saving the text into an .html file and launching it in a web browser will now reveal all of our hard work. Just as before, the gallery should start by displaying the list of images by default. Once an image is clicked on, the selection will be passed to the #display-window element and displayed at 100 percent of the browser width:

Finally, clicking anywhere within the document will close the large image and return you back to the initial gallery display.

Although this example contains none of the new features of HTML5, it is a simple way of showing some of the key technologies that make up HTML and some of the methods used to reference assets in HTML.