I recently started to play with php and building a website. What I really wanted to do was to create a checkbox list of a certain category. Place names and the like. But it was a lot of repetitive typing, so I toyed with writing an array.
The array was fairly simple to create but didn't look very nice. So I instead decided that images would better represent whatever it was I was displaying.
My first play (getting bits and bobs off the internet) looked something like this;
 |
| Array of images loaded side by side |
<html>
<body
onload="buildImage('slct1');">
<script>
function buildImage(slct1) {
var images = ["a.jpg","b.jpg","c.jpg","d.jpg","e.jpg"];
var s2 =
document.getElementById(slct1);
s2.innerHTML = "";
var optionArray =
["a.jpg","b.jpg","c.jpg","d.jpg","e.jpg"];
for (var option in optionArray)
{
if
(optionArray.hasOwnProperty(option)) {
var pair =
optionArray[option];
var img =
document.createElement("img");
img.src =
optionArray[option];
img.height =
410;
img.width = 327;
s2.appendChild(img);
var label =
document.createElement('label')
label.htmlFor = pair;
label.appendChild(document.createTextNode(pair));
}
}
}
</script>
</body>
</html>
********************
Lesson 1: Make sure you're using " instead of ″
********************
For the sake of playing. I was then able to put them vertical by adding the simple line:
s2.appendChild(document.createElement("br"));
on the last line of the if statement within the function.
...
var label = document.createElement('label')
label.htmlFor = pair;
label.appendChild(document.createTextNode(pair));
s2.appendChild(document.createElement("br"));
}...
 |
| Array of images loaded vertically |
********************
Lesson 2: There is no need to over complicate what can be simple.
********************
All is going well. Though I'd prefer to allow the user to cycle through the images. Again using an array so as to keep reduce the amount of manual labour I need to do to expand the website.
The next step is to load the first image in a single space and then add buttons to allow you to move from the previous image to the next image.
The above images show me cycling through the image letters until we get to "F" which isn't in the images array so the unloaded image icon appears where an image should be.
<html>
<body
onload="buildImage();">
<div class="contents"
id="content" align="center">
<button
onclick="previousImage()">Previous Image</button><button
onclick="nextImage()">Next Image</button><br>
</div>
<script>
var images = ["a.jpg","b.jpg","c.jpg","d.jpg","e.jpg"];
var index = 0;
function buildImage() {
var img = document.createElement('img')
img.src = images[index];
img.height = 410;
img.width = 327;
document.getElementById('content').appendChild(img);
}
function nextImage(){
var img = document.getElementById('content').getElementsByTagName('img')[0]
index++;
img.src = images[index];
img.height = 410;
img.width = 327;
}
function previousImage(){
var img = document.getElementById('content').getElementsByTagName('img')[0]
index--;
img.src = images[index];
img.height = 410;
img.width = 327;
}
</script>
</body>
</html>
This is solved by adding the following code: index = index % images.length;
This loops the images forever and ever and ever and ever and ever and ever.
********************
Lesson 3: Don't test this functionality with 100 images.
********************
A final thought.. you can implement other functions to be attached "on click" to these images as they load. In the image properties just add: img.onclick = function(){FUNCTION(param1, param2)};
So happy coding everyone and many thanks to the following:
http://www.w3schools.com
http://stackoverflow.com/questions/13330202/how-to-create-list-of-checkboxes-dynamically-with-javascript
