@ -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" |
|||
] |
|||