Currently, I am working on a grid layout for my website. My goal is to have 9 images load quickly, and then once the page has loaded, I want to fetch additional images, insert them into the image containers, and animate between them. While I understand how to create transitions, I'm struggling with the best method to stack the images in order to transition smoothly between them. Simply creating new img nodes and appending them as children doesn't give me the desired effect. Additionally, attempting to absolutely position each element causes layout issues.
I know that floating the images would prevent them from taking up vertical space, but I'm not currently using floats and would prefer to avoid them to stack the images.
If you review my HTML code below, you'll see that I'm trying to stack several images within the divs, all positioned on top of one another.
Any advice or guidance on this issue would be greatly appreciated.
Below is my current HTML structure:
<div id="mainContainer">
<div class="imageHolder"><img class="homeImages" src="test.png"></div>
<div class="imageHolder"><img class="homeImages" src="test1.png"></div>
<div class="imageHolder"><img class="homeImages" src="test2.png"></div>
<div class="imageHolder"><img class="homeImages" src="test3.png"></div>
<div class="imageHolder"><img class="homeImages" src="test4.png"></div>
<div class="imageHolder"><img class="homeImages" src="test5.png"></div>
<div class="imageHolder"><img class="homeImages" src="test6.png"></div>
<div class="imageHolder"><img class="homeImages" src="test7.png"></div>
<div class="imageHolder"><img class="homeImages" src="test8.png"></div>
</div>
To preload the new images after the page loads, I've included the following JavaScript:
var imageHolders = document.querySelectorAll('.imageHolder');
var imageArray = [
'media/refined/newImage.png',
'media/refined/newImage1.png',
'media/refined/newImage2.png',
'media/refined/newImage3.png',
'media/refined/newImage4.png',
];
var imageNodeArray = [];
for(var i = imageArray.length - 1; i >= 0; i -= 1) {
var img = new Image();
img.onload = function() {
imageNodeArray.push(this);
};
img.src = imageArray[i];
}
document.onclick = function() {
imageNodeArray[0].setAttribute('class', 'changed opaque');
imageHolders[0].appendChild(imageNodeArray[0])
}
The aspect causing me difficulty is the CSS:
#mainContainer {
margin: 0 auto;
padding: 2.2em 0;
width: 85%;
text-align: center;
}
div.imageHolder {
display: inline;
}
img {
width: 30%;
}
.changed.opaque {
opacity: .5;
border: 2px solid red;
}
Your help is much appreciated!