Hello, all,
I’ve got a very simple JS image carousel for the home page of a side-project that I’m working on. I’d like to implement some kind of fade transition for the images, but don’t know where to start.
Here’s the code that I have, so far.
To start, I create some nested DIVs - the outer DIV is going to have its background image set to display the images; the next nested DIV is just a container; the third nested DIV holds text for the image that is currently displayed.
#home_image {
width: 100%;
position: relative;
height: 400px;
border: 0px;
overflow: auto;
vertical-align: middle;
border-bottom: 3px solid #AAAAAA;
background-size: cover;
background-repeat: no-repeat;
background: center center;
}
#home_image_caption {
width: 25%;
padding: 15px;
position: absolute;
background: #000000;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
height: 370px;
top: 50%;
margin-top: -200px;
margin-left: 10px;
}
#home_image_caption_text {
background-color: transparent;
}
<div id="home_image">
<div id="home_image_caption">
<div style="border-bottom: 1px solid gold; text-align: center;">THIS NEVER CHANGES</div>
<div id="home_image_caption_text"></div>
</div>
</div>
Next, I have one containing DIV that holds four DIVs; the container DIV is set to display:none; and the four DIVs are dynamically loading images from a database. I’m using another page that has CFHEADER and CFCONTENT to display the image. Works great! 
<div id="picrange" style="display:none;">
<div id="pic1" style="background-image: url('display.cfml?t=i§ion=home&id=86037244-AC72-5285-49ED0901FBF7A2F1');"></div>
<div id="pic2" style="background-image: url('display.cfml?t=i§ion=home&id=8627C2BB-C575-5275-55ACDB774AEBDC8E');"></div>
<div id="pic3" style="background-image: url('display.cfml?t=i§ion=home&id=863FE57A-E172-01D9-E47F8D34365B415A');"></div>
<div id="pic4" style="background-image: url('display.cfml?t=i§ion=home&id=8642214F-B157-9BDD-A4511DFF7F708591');"></div>
</div>
Now for the JavaScript. This will set the background image of the ‘home_image’ DIV and the text for the caption. Then I set an interval so it will change every 9 seconds.
var currentPic = "pic1", bgstl, biURL, overlayText = document.getElementById('home_image_caption_text');
function homeCarousel(objDiv){
currentPic = objDiv.id;
bgstl = objDiv.currentStyle || window.getComputedStyle(objDiv,false);
biURL = bgstl.backgroundImage.slice(4,-1);
imgholder = document.getElementById('home_image');
imgholder.style.backgroundImage = "url(" + biURL + ")";
switch(currentPic){
case "pic1":
currentPic = "pic2";
overlayText.innerHTML = "IMAGE 1: This is just some random text to be used as copy placement. Lorem ipsum and all that other stuff.";
break;
case "pic2":
currentPic = "pic3";
overlayText.innerHTML = "IMAGE 2: The quick brown fox jumped over the lazy dogs. Then the dogs gave chase and ate the fox. The quick brown fox jumped over the lazy dogs. Then the dogs gave chase and ate the fox.";
break;
case "pic3":
currentPic = "pic4";
overlayText.innerHTML = "IMAGE 3: This is just some random text to be used as copy placement. Why are you reading all of this text? It is nonsense. Just for showing what it can look like.";
break;
case "pic4":
currentPic = "pic1";
overlayText.innerHTML = "IMAGE 4: This is just some random text to be used as copy placement. This is just some random text to be used as copy placement. This is just some random text to be used as copy placement.";
break;
}
}
Then, I use document ready to start the function and set the interval.
homeCarousel(document.getElementById(currentPic));
setInterval(function(){homeCarousel(document.getElementById(currentPic));},9000);
How can I implement a fading transition with this? Either strictly CSS, or a JS/CSS combo, or just plain JS. Is it possible?
V/r,
