@ -0,0 +1,16 @@ |
|||||
|
{ |
||||
|
"obrazek": "images/image_04.jpg", |
||||
|
"text": "Toto je textová informace 1", |
||||
|
|
||||
|
|
||||
|
"obrazek_s": [ |
||||
|
"image_01.jpg", |
||||
|
"image_02.jpg", |
||||
|
"image_03.jpg" |
||||
|
], |
||||
|
"text_s": [ |
||||
|
"Toto je textová informace 1", |
||||
|
"Toto je textová informace 2", |
||||
|
"Toto je textová informace 3" |
||||
|
] |
||||
|
} |
||||
|
After Width: | Height: | Size: 131 KiB |
|
After Width: | Height: | Size: 306 KiB |
|
After Width: | Height: | Size: 126 KiB |
|
After Width: | Height: | Size: 96 KiB |
|
After Width: | Height: | Size: 145 KiB |
|
After Width: | Height: | Size: 73 KiB |
|
After Width: | Height: | Size: 78 KiB |
|
After Width: | Height: | Size: 177 KiB |
|
After Width: | Height: | Size: 191 KiB |
|
After Width: | Height: | Size: 130 KiB |
|
After Width: | Height: | Size: 111 KiB |
|
After Width: | Height: | Size: 319 KiB |
|
After Width: | Height: | Size: 297 KiB |
|
After Width: | Height: | Size: 207 KiB |
|
After Width: | Height: | Size: 344 KiB |
|
After Width: | Height: | Size: 205 KiB |
|
After Width: | Height: | Size: 323 KiB |
|
After Width: | Height: | Size: 73 KiB |
|
After Width: | Height: | Size: 212 KiB |
|
After Width: | Height: | Size: 61 KiB |
|
After Width: | Height: | Size: 93 KiB |
|
After Width: | Height: | Size: 51 KiB |
|
After Width: | Height: | Size: 88 KiB |
|
After Width: | Height: | Size: 71 KiB |
|
After Width: | Height: | Size: 205 KiB |
|
After Width: | Height: | Size: 336 KiB |
|
After Width: | Height: | Size: 142 KiB |
|
After Width: | Height: | Size: 189 KiB |
|
After Width: | Height: | Size: 124 KiB |
|
After Width: | Height: | Size: 177 KiB |
|
After Width: | Height: | Size: 190 KiB |
|
After Width: | Height: | Size: 62 KiB |
|
After Width: | Height: | Size: 120 KiB |
|
After Width: | Height: | Size: 142 KiB |
|
After Width: | Height: | Size: 33 KiB |
|
After Width: | Height: | Size: 193 KiB |
|
After Width: | Height: | Size: 217 KiB |
|
After Width: | Height: | Size: 245 KiB |
|
After Width: | Height: | Size: 206 KiB |
|
After Width: | Height: | Size: 177 KiB |
|
After Width: | Height: | Size: 108 KiB |
|
After Width: | Height: | Size: 121 KiB |
@ -0,0 +1,83 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang="en"> |
||||
|
<head> |
||||
|
<meta charset="UTF-8"> |
||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
|
<meta http-equiv="X-UA-Compatible" content="ie=edge"> |
||||
|
<title>Obrazek dne</title> |
||||
|
<style> |
||||
|
#obrazek img { |
||||
|
width: 10%; |
||||
|
height: auto; |
||||
|
} |
||||
|
#obrazek-sam img { |
||||
|
width: 10%; |
||||
|
height: auto; |
||||
|
} |
||||
|
</style> |
||||
|
</head> |
||||
|
<body> |
||||
|
|
||||
|
<h1> Obrázek dne </h1> |
||||
|
<h2> Zadání vytvořte soubor JSON, který umístíte do adresáře projektu |
||||
|
Obsah: název souboru/obrázek a popisek (motto) |
||||
|
Napiste kod který stahne jsoun soubor a sna stánce zobrazi obrázek získaný z json souboru a popisek (textovací informace). |
||||
|
</h2> |
||||
|
|
||||
|
<div> |
||||
|
<div id="obrazek"> </div> |
||||
|
<div id="text"> </div> |
||||
|
|
||||
|
<div id="obrazek-sam"> </div> |
||||
|
</div> |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
<script src="jquery-3.5.1.min.js"></script> |
||||
|
<script> |
||||
|
$.getJSON("/data.json") |
||||
|
.done(function(data) { |
||||
|
console.log(data); |
||||
|
console.log(data.text_s); |
||||
|
console.log(data.obrazek_s); |
||||
|
let div = $("#obrazek") |
||||
|
let p = $("#text") |
||||
|
for (let index = 0; index < data.text_s.length; index++) { |
||||
|
const tx = data.text_s[index]; |
||||
|
p.append("<label>" + tx + "</label>") |
||||
|
} |
||||
|
for (let index = 0; index < data.obrazek_s.length; index++) { |
||||
|
const obr = data.obrazek_s[index]; |
||||
|
div.append("<img src='images/" + obr + "' >") |
||||
|
} |
||||
|
|
||||
|
|
||||
|
}) |
||||
|
.fail(function() { |
||||
|
console.log("chyba"); |
||||
|
alert("Chyba se řeší") |
||||
|
}) |
||||
|
.always(function() { |
||||
|
console.log("Vždycky") |
||||
|
}); |
||||
|
function stahniObrazek () { |
||||
|
$.getJSON("/data.json") |
||||
|
.done(function(data) { |
||||
|
let puvodni = $("#obrazek-sam img").attr("src"); |
||||
|
console.log(puvodni); |
||||
|
if (puvodni != data.obrazek) { |
||||
|
$("#obrazek-sam").html("<img src='" + data.obrazek + "' >").append("<label>" + data.text + "</label>"); |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
window.setInterval(stahniObrazek, 5000) |
||||
|
</script> |
||||
|
</body> |
||||
|
</html> |
||||
@ -0,0 +1,41 @@ |
|||||
|
|
||||
|
|
||||
|
<script src="jquery-3.5.1.min.js"></script> |
||||
|
<script> |
||||
|
function stahniJSON() { |
||||
|
$.getJSON("/data.json") |
||||
|
.done(function(data) { |
||||
|
console.log(data); |
||||
|
let div = $("#obrazek") |
||||
|
let p = $("#text") |
||||
|
for (let index = 0; index < data.symboly.length; index++) { |
||||
|
const tx = text[index]; |
||||
|
p.append("<label>" + tx + "</label>") |
||||
|
} |
||||
|
for (let index = 0; index < data.symboly.length; index++) { |
||||
|
const obr = obrazek[index]; |
||||
|
div.append("<img src='images/" + obr + "' >") |
||||
|
} |
||||
|
}) |
||||
|
.fail(function() { |
||||
|
console.log("chyba"); |
||||
|
alert("Chyba se řeší") |
||||
|
}) |
||||
|
.always(function() { |
||||
|
console.log("Vždycky") |
||||
|
}); |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
|
||||
|
|
||||
|
"obrazek_s": [ |
||||
|
"image_01.jpg", |
||||
|
"image_02.jpg", |
||||
|
"image_03.jpg" |
||||
|
], |
||||
|
"text_s": [ |
||||
|
"Toto je textová informace 1", |
||||
|
"Toto je textová informace 2", |
||||
|
"Toto je textová informace 3" |
||||
|
] |
||||