1. Engineering
  2. Computer Science
  3. ltdoctype htmlgt lthtmlgt ltheadgt lttitlegtjson photo albumlttitlegt ltmeta nameviewport contentwidthdevicewidth...

Question: ltdoctype htmlgt lthtmlgt ltheadgt lttitlegtjson photo albumlttitlegt ltmeta nameviewport contentwidthdevicewidth...

Question details

<!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>
<script>

var json = '[' +
'{ "image": "b1.png", "name": "John", "description": "<p>This is John Lennon. He was one of the Beatles.</p><p>He was one of the two main song-writers.</p>" },' +
'{ "image": "b2.png", "name": "Paul", "description": "<p>This is Paul McCartney. He was also one of the Beatles.</p><p>He was the other main song-writers.</p>" },' +
'{ "image": "b3.png", "name": "George", "description": "<p>This is George Harrison. He was also one of the Beatles.</p>" },' +
'{ "image": "b4.png", "name": "Ringo", "description": "<p>This is Ringo Starr. He was also one of the Beatles.</p>" }' +
']';
  
function createPhotoHTML( photoInfo) {
return " <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 class='example-image-link' data-lightbox='example-1' href='images/" + photoInfo.image + "'><img src='images/" + photoInfo.image + "' class='example-image w3-circle'></a>" +
" <div class='w3-title w3-text-purple'>" + photoInfo.name + "</div>" +
" </div>" +
" <div class='w3-container w3-half'>" + photoInfo.description +
" </div>" +
" </div>" +
" </div>";
}

  
$(document).ready(
function() {
var photos = $.parseJSON( json);
for (i = 0; i < photos.length; i += 3) {
var rowDiv = $( "<div class='w3-row'>");
$('#album').append( rowDiv);
for( j = i; j < i + 3; j++ ) {
if ( j < photos.length) {
rowDiv.append( createPhotoHTML( photos[j]));

}
}
}
}
);

</script>
</head>
<body>

<header class='w3-container w3-orange w3-center'>
<h1>My Photo Album</h1>
<h2>Mohammed</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='' class='link'>Contact me</a>
</div>
</footer>

<script src='lib/lightbox2/js/lightbox.js'></script>
</body>
</html>

Q.

  • Add another photograph to the JSON data.?
  • Use JQuery hide and fadeIn functions to hide the photoalbum while loading the images and cause them all to fadeIn instead of just appearing.?
Solution by an expert tutor
Blurred Solution
This question has been solved
Subscribe to see this solution