bulletproof bulletproof - 3 months ago 16
CSS Question

Javascript slideshow with titles fitting the images

I made this little Slideshow with HTML/CSS/JS.

Most of it is working but there is one thing which I can't figure out.

How do I make it so the text above each image fits the img itself when autosliding is on?

Right now it only shows the right title for each img when I manually click through.



var uniqueRandoms = [];
var indexCount = 0;
var allImagesAndText = ["Seltene römische Goldmünze", "Römische Funde", "Römische Wandmalerei", "Tutanchamun", "Cheops Pyramide", "Ägyptische Malerei"];
var total = allImagesAndText.length - 1;

function makeUniqueRandom() {
if (!uniqueRandoms.length) {
for (var i = indexCount; i <= total; i++) {
uniqueRandoms.push(i);
}
}
var index = Math.floor(Math.random() * uniqueRandoms.length);
var val = uniqueRandoms[index];

uniqueRandoms.splice(index, 1);

return val;
}

function slide(x) {
if(indexCount + x >= 0 && indexCount + x <= total) {
clearInterval(sliderInterval);
indexCount += x;

var Image = document.getElementById('img');
Image.src = "images/img" + indexCount + ".jpg";

update_dom();


sliderInterval = window.setInterval( slideA, 3000);
}
}

function update_dom() {
var left_holder = document.getElementById('left_holder');
var right_holder = document.getElementById('right_holder');

ChangeText(indexCount);

if(indexCount == 0) {
left_holder.style.display = "none";
} else if (indexCount == total) {
right_holder.style.display = "none";
} else {
right_holder.style.display = "block";
left_holder.style.display = "block";
}
}

function slideA() {
var Image = document.getElementById('img');
imagescount = makeUniqueRandom();
Image.src = "images/img" + imagescount + ".jpg";
update_dom();
}

function ChangeText(imgNum) {
document.getElementById("text1").innerHTML = allImagesAndText[imgNum];
}

window.addEventListener("load", function() {
update_dom();
sliderInterval = window.setInterval( slideA, 3000);
document.getElementById("right").addEventListener("click", function() {
slide(1);
});

document.getElementById("left").addEventListener("click", function() {
slide(-1);
});
});

#slideshow {
height: 450px;
width: 650px;
margin: 20px auto;
position: relative;
z-index: 1;
border: 10px solid #000;
border-radius: 10px;
}
#img {
height: 450px;
width: 650px;
}
#left_holder {
height: 450px;
width: 100px;
position: absolute;
left: 0px;
top: 0px;
}
#right_holder {
height: 450px;
width: 100px;
position: absolute;
right: 0px;
top: 0px;
}
.left {
height: 50px;
width: 50px;
position: absolute;
top: 40%;
left: 0px;
}
.right {
height: 50px;
width: 50px;
position: absolute;
top: 40%;
right: 0px;
}
#text1 {
position: absolute;
color: #fff;
font-size: 32px;
background-color: #000;
opacity: 0.5;
left: 37%;
z-index: 2;
}

<div id="slideshow">
<div id="text1">Text</div>
<img src="images/img0.jpg" id="img" />
<div id="left_holder">
<img id="left" class="left" src="images/arrow_left.png" />
</div>
<div id="right_holder">
<img id="right" class="right" src="images/arrow_right.png" />
</div>
</div>




Answer

Try

indexCount = imagescount = makeUniqueRandom();

instead of

 imagescount = makeUniqueRandom();
Comments