Photo Album Client-Rendered Version A


Added on  2019-09-16

6 Pages2700 Words401 Views
Digital Business Application – Lab ExercisesJavaScript and AjaxEXERCISE 1: PHOTO ALBUM CLIENT-RENDERED VERSION APhoto Album Client-Rendered Version ACreate a new file called photoalbum-client-rendered-version-a.html and put the following HTML code in it, changing the text in red to be your name and email address. This file needs to be located in the same place as your existing photoalbum scripts so that it has access to the lightbox files and the photoalbum.css file. <!DOCTYPE html><html><head><title>JSON Photo Album</title><meta name='viewport' content='width=device-width, initial-scale=1'><link rel='stylesheet' href='http://www.w3schools.com/lib/w3.css'><link rel='stylesheet' href='lib/lightbox2/css/lightbox.css'><link rel='stylesheet' href='photoalbum.css'><script src='http://code.jquery.com/jquery-1.11.3.min.js'></script></head><body><header class='w3-container w3-orange w3-center'> <h1>My Photo Album</h1> <h2>Your Name</h2> <p>Here are some photographs and descriptions.</p></header><div id='message'></div><div id='album'></div><footer class='w3-container w3-orange w3-padding-jumbo'> <div class='w3-container w3-center'> <a href='mailto:youremail@lsbu.ac.uk' class='link'>Contact me</a> </div> </footer><script src='lib/lightbox2/js/lightbox.js'></script></body></html>Note the following:This is a plain page of HTML not PHP.Although it is declares the top and bottom of the photoalbum page, there is nothing in the middle. Instead there are two empty divs which have id attributes. We can use JavaScript running in the page to add content to those divs, and this is how this version of the photoalbum will work.The last line in the <head> of the page imports the JQuery JavaScript library, allowing us to make use of JQuery functions in this file.Page 1 of 6
Photo Album Client-Rendered Version A_1

Digital Business Application – Lab ExercisesAdd the following code as the last thing inside the <head>...</head> tags:<script>$(document).ready(function() { $('#album').append( "<div style='border: dashed magenta 8px;'> <h1>Here is some content for the 'album' div</h1></div>");});</script>This code uses the JQuery library to do a few things. The JQuery library defines a special function denoted by a dollar sign. It can take a wide variety of different kinds of parameters and provides a wide range of useful functions. The first use in this code is $(document). In this case the parameter isthe predefined JavaScript variable identifying the root DOM element for the currently displayed document. The JQuery object returned by the $ function has a function called ready() which is used to execute some JavaScript code when the page has finished loading. It is very commonly used to start some script running on a page automatically. It requires as a parameter a JavaScript function, and the code above gives in an anonymous function for this purpose. Anonymous functions have no name and are simply placeholders for code to be executed by the function they are given to.$(document).ready(function() {// code to run in here });In the example above the code to run consists of the line show abbreviated below:$('#album').append( "<div ... /div>");This again uses the JQuery $ function, but this time gives it a string containing an ID string. This selects the DOM element which has that ID (in this case one of the empty divs in the page) and wraps it in a JQuery object. Then the JQuery function append() is called to create new DOM elements and add them to the existing children of the selected element. In this case we give append a string containing HTML code which is automatically converted to DOM elements and added in. View the page in a web browser (you do not need to upload it to a server to do this) and then use the developer tools options to inspect the DOM and see that the div with the id album is no longer empty but contains a div and h1 element.Page 2 of 6
Photo Album Client-Rendered Version A_2

Digital Business Application – Lab ExercisesOf course what we want to do is insert a whole grid of photographs so we need a more complicated function. Replace all the code you have already with this version:$(document).ready(function() { for (i = 0; i < 9; i += 3) { var rowDiv = $( "<div class='w3-row'>"); $('#album').append( rowDiv); for( j = i; j < i + 3; j++ ) { if ( j < 9) { rowDiv.append( "<div style='border: solid blue 2px;' class='w3-third'>Place for photo</div>"); } } }});This code does the following:1.It iterates through two nested loops to counting up to nine in three groups of three..2.For each group of three it prints out a div with the w3-row class and creates a new div element to represent a row and appends it to the “album“ div.3.For each member of the group of three it appends a div to the row div, with a blue border and containing a string which says “Place for a photo”.View this in a web browser and inspect the DOM to see the elements which have been added to album div.The result is a 3x3 grid of divs with blue borders and the w3-third class. This is more like what we want, but in fact what we need to do is iterate over a collection of photographs and for each one add elements to the page to create the same HTML we have had in earlier versions, that is something like:<div class='w3-container w3-row w3-col l4'> <div class='w3-container w3-card-8 w3-margin-8'> <div class='w3-container w3-half w3-image'> <a href='images/b1.png'> <img src='images/b1.png' class='example-image w3-circle'> </a> <div class='w3-title w3-text-purple'>John</div> </div> <div class='w3-container w3-half'> <p>This is John Lennon. He was one of the Beatles.</p> <p>He was one of the two main song-writers.</p> </div> </div></div>To do this we need three things:1.the photograph information stored somewhere, for example in an array2.a function to pass to $(document).ready which iterates over that array and for each item in it calls3.a function to create the required HTML elements for a given array elementPage 3 of 6
Photo Album Client-Rendered Version A_3

End of preview

Want to access all the pages? Upload your documents or become a member.

Related Documents
Add click handler to H1 elements

Lab Exercises - Digital Business Application

Client-Side JavaScript User Information Tracking

Desklib - Online Library for Study Material with Solved Assignments, Essays, Dissertations

Photo Album Client-Rendered Version D