So I need to make an if statement that, whenever id 0 to 3 (4 images) are loaded, make a new row of 0 to 3 images, this same do i need to do with words (probably works the same)
I'm quite new with if statements etc. I just don't know where to start with this.. The images and words load from a JSON file, and I already have the first bit of codes.
Like the var html = '<div class="row">'; to the html += '</div>'; I need an if statement to let the images load in a row of 4 images/words nexto eachother. And then make a new row, automaticly.
I guess it sounds complicated.. I hope someone can help me.
JSON,
{"main_object": {
"imagesJ": ["beak", "cat", "egg", "meel", "milk", "passport", "spoon", "thee"],
"wordsJ": ["næb", "kat", "æg", "mel", "mælk", "pas", "ske", "te"]
}
}
var jsonData = "noJson";
var hr = new XMLHttpRequest();
$(document).ready(function(){
var jsonData = 'empty';
$.ajax({
async: false,
url: "./js/data.json",
dataType: 'html',
success: function(response){
jsonData = JSON.parse(response);
console.log('ok');
var imagesJ = jsonData.main_object.imagesJ;
var wordsJ = jsonData.main_object.wordsJ;
var html = '<div class="row">';
var html2 = '';
for(i = 0; i < imagesJ.length; i++) {
//html += '</div><div class="row">';
//if statement that whenthere are 0-3 = 4 pictures it begins a new block of code wich makes 0-3 = 4 pictures, that are in bootstrap row PROBEER DIT ALLEEN MET STACKOVERFLOW OF ANDERE INTERNET DINGEN
html += '<div class="col-md-2"><img src="/sleepopdracht/img/'+imagesJ[i]+'.jpg" alt="images" id="'+[i]+'"></div>';
}
html += '</div>';
document.getElementById('images').innerHTML = html;
for (i = 0; i < wordsJ.length; i++) {
html2 += '<p>'+wordsJ[i]+'</p>';
}
document.getElementById('words').innerHTML = html2;
},
error: function(){
console.log('JSON could not be loaded.');
}
});
console.log(jsonData);
});
header {
position: relative;
height: 20%;
/*border-bottom: thick solid grey;*/
}
body {
background-color: #f0f0f0;
}
.container {
position: relative;
height: 50%;
}
.images img {
position: relative;
height: 100px;
width: 100px;
}
#img4, #img5, #img6, #img7 {
top: 5%;
}
footer {
position: relative;
height: 5%;
/*border-top: thick solid grey;*/
}
<!DOCTYPE html>
<html>
<head>
<title>Sleepopdracht</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://ift.tt/1JetChn">
<script src="http://ift.tt/1ROJ5xx"></script>
<script src="http://ift.tt/1RY4jZJ"></script>
<link rel="stylesheet" href="http://ift.tt/1iJFeCG">
<link rel="stylesheet" href="css/css.css">
</head>
<body>
<header>
</header>
<div class="container" id="container">
<div class="row">
<div class="col-md-2">
<img src="/sleepopdracht/img/'+imagesJ[i]+'.jpg" alt="images" id="'+[i]+'">
</div>
<div class="col-md-2">
a
</div>
<div class="col-md-2">
a
</div>
<div class="col-md-2">
a
</div>
</div>
<div class="row">
<div class="col-md-2">
a
</div>
<div class="col-md-2">
a
</div>
<div class="col-md-2">
a
</div>
<div class="col-md-2">
a
</div>
</div>
<div class="images" id="images"></div>
<div class="words" id="words"></div>
</div>
<footer>
</footer>
<script type="text/javascript" src="js/javascript.js"></script>
</body>
</html>
As you can see in HTML I have made those rows, they need to become one and loop themselfes a little like <div class="col-md-2"> <img src="/sleepopdracht/img/'+imagesJ[i]+'.jpg" alt="images" id="'+[i]+'"> </div>
And this is what it needs to resemble closely.
Aucun commentaire:
Enregistrer un commentaire