Image_gallery.html Image Gallery

<!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"utf-8\"> <title>Image

ID: 3596259 • Letter: #

Question

<!DOCTYPE html>

<head>

<title>Image Gallery</title>

</head>

<body>

<main>

<h1>Image Gallery</h1>

<li><a href="images/casting1.jpg" title="Casting on the Upper Kings">Upper Kings</a></li>

<li><a href="images/casting2.jpg" title="Casting on the Lower Kings">Lower Kings</a></li>

<li><a href="images/fish.jpg" title="Catching on the South Fork">South Fork</a></li>

<li><a href="images/lures.jpg" title="The Lures for Catching">Lures</a></li>

</ul>

<h2 id="caption">Casting on the Upper Kings</h2>

</p>

</main>

</body>

</html>

CSS:

body {

font-family: Arial, Helvetica, sans-serif;

width: 420px;

margin: 0 auto;

padding: 20px;

border: 3px solid blue;

}

h1, h2, ul, p {

margin: 0;

padding: 0;

}

h1 {

padding-bottom: .25em;

color: blue;

}

h2 {

font-size: 120%;

padding: .5em 0;

}

li {

padding: 0 0.25em;

display: inline;

}

#caption, #gallery {

text-align: center;

}

image_gallery/js:

//blank

Extra 8-2 Develop an Image Gallery application In this exercise, you'll develop an Image Gallery application that displays different images when the user clicks on the links at the top of the page. This works like the Image Swap application of figure 8-14 Image Gallery Catching on the South Fork You'll find the HTML, CSS, and image files for this application in this folder: exercises extrach08image gallery You'll also find an empty JavaScript file named image gallery.js. You can add your code to this file 1. 2. In the JavaScript file, add an event handler for the ready event method 3. Use the each) method to run a function for each element in the unordered list of items. Then, add jQuery code that gets the URL and caption for each image and preloads the image. You can get the URL from the href attribute of the a> element, and you can get the caption from the title attribute Add an event handler for the click event of each link. The function for this event handler should accept a parameter named evt. The jQuery code for this event handler should display the image and caption for the link that was clicked. In addition, it should use the evt parameter to cancel the default action of the link. Add a jQuery statement that moves the focus to the first link on the page when the page is loaded 4. 5.

Explanation / Answer

Image_gallery.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=”utf-8”>
<title>Image Gallery</title>
<link rel="stylesheet” href="main.css">
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type=”text/javascript” src=”image_gallery_library.js”></script>

<script type=”text/javascript” src=”image_gallery.js”></script>

</head>

<body>
<main>
<h1>Image Gallery</h1>
<ul id="image_list">
<li><a href="images/casting1.jpg" title="Casting on the Upper Kings">Upper Kings</a></li>
<li><a href="images/casting2.jpg" title="Casting on the Lower Kings">Lower Kings</a></li>
<li><a href="images/catchrelease.jpg" title="Catch and Release on the Big Horn">Big Horn</a></li>
<li><a href="images/fish.jpg" title="Catching on the South Fork">South Fork</a></li>
<li><a href="images/lures.jpg" title="The Lures for Catching">Lures</a></li>
</ul>
<h2 id="caption">Casting on the Upper Kings</h2>
<p id="gallery">
<img src="images/casting1.jpg" alt="Image Gallery area" id="image">
</p>

<p class="center"> <span id="caption">Casting 1</span></p>
</main>
</body>
</html>

main.css:

body {
font-family: Arial, Helvetica, sans-serif;
width: 420px;
margin: 0 auto;
padding: 20px;
border: 3px solid blue;
}
h1, h2, ul, p {
   margin: 0;
   padding: 0;
}
h1 {
   padding-bottom: .25em;
   color: blue;
}
h2 {
   font-size: 120%;
   padding: .5em 0;
}
li {
   padding: 0 0.25em;
   display: inline;
}
#caption, #gallery {
   text-align: center;
}

"image_gallery.js"

$(document).ready(function() {

$("#image_list a").each(function() {

var imagelink =$(this).attr("href");

var caption =$(this).attr("title");

var galleryImage = new Image();

galleryImage.src = imagelink;

image_gallery_library.js:

var $ = function (id) {return document.getElementById(id);}

var ImageGallery = function ( listId, imageId, captionId ) {

var that = this;

this.listNode = $(listId);

this.imageNode = $(imageId);

this.captionNode = $(captionId);

this.validateNode( this.listNode, "*", "List ID");

this.validateNode( this.imageNode, "img", "Image ID");

this.validateNode( this.captionNode, "span", "Caption ID");

this.imageLinks = this.listNode.getElementsByTagName("a");

if ( this.imageLinks.length == 0 ) {

throw new Error(

"Image Gallery: List ID contains no image links.");

}

var i, node, image;

this.imageCache = [];

for ( i = 0; i < this.imageLinks.length; i++ ) {

node = this.imageLinks[i];

node.onclick = function (evt) { // section 4: using evt parameter as given in //question

var link = this;

if (!evt) evt = window.event;

that.linkClick(evt, link);

}

image = new Image();

image.src = node.href;

this.imageCache.push( image );

}

ImageGallery.prototype.validateNode =

function ( node, tagName, nodeDesc ) {

if ( ! node ) {

throw new Error("Image Gallery: " + nodeDesc + " not found.");

}

if ( node.nodeType !== 1 ) {

throw new Error("Image Gallery: " + nodeDesc +" is not an element node.");

}

if ( tagName !== "*" && node.nodeName !== tagName.toUpperCase() ) {

throw new Error("Image Gallery: " + nodeDesc + " is not a " + tagName.toLowerCase() + " tag.");

} }

ImageGallery.prototype.linkClick = function (evt, link) {

this.imageNode.src = link.href;

this.captionNode.firstChild.nodeValue = link.title;

link.blur();

if ( evt.preventDefault ) { //section 4 use the evt parameter to cancel the //default action of the link

evt.preventDefault();

} else {

evt.returnValue = false;

} }

Image_gallery.js

var gallery;

window.onload = function () {

gallery = new ImageGallery("imageList", "image", "caption");

}

Navigate

<!DOCTYPE html> <html Lang=\"en\"> <head> <title>October</title> <meta charset=\

<!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"utf-8\"> <title>Image

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.

<!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"utf-8\"> <title>Image

Question

Explanation / Answer

Related Questions

Navigate