I was wondering if someone could help me, is there a way to add fade betwene slides in this preticular script code? It targets buttons that changes images. Thanks upfront!
<script>
var slideIndex1 = 1;
showDivs1(slideIndex1);
function plusDivs1(n) {
showDivs1(slideIndex1 += n);
}
function showDivs1(n) {
var i;
var y = document.getElementsByClassName("mySlides1");
if (n > y.length) {
slideIndex1 = 1
}
if (n < 1) {
slideIndex1 = y.length
}
for (i = 0; i < y.length; i++) {
y[i].style.display = "none";
}
y[slideIndex1 - 1].style.display = "block";
}
</script>
I believe that what you are looking to achieve is a carousel (Bootstrap example)
Instead of applying display="none" to all these elements, if I were you I would toggle some CSS class which uses an animation or a transition .
You can learn more about CSS animations here (just an example of what you can achieve with vanilla CSS)
It can be tedious to create a working and responsive carousel, hence I would suggest you either to use a premade solution, or use an util library such as jQuery, which provides plenty of animations.
I'm trying to change the background image of a div depending on it's id and then make a slideshow with a couple of images. I'm able to change the background with javascript but have a hard time figuring out why my loop doesn't work.
main.js
var spotlight = document.getElementById('spotlight');
var pics = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
var totalPics = pics.length;
var i = 0;
function loop() {
if(i > (totalPics - 1)) {
i = 0;
}
spotlight.style.backgroundImage="url(/images/posts/'+pics[i]+')";
i++;
loopTimer = setTimeout('loop()',1000);
}
loop();
I'm using sass, but as javascript is client side this shouldn't work any different I guess? What am I doing wrong in my loop?
I have followed the basic principles found on w3Schools of changing the style with javascript and it works with a static image so my guess is that I have done something wrong in the loop.
Thanks
Change this:
spotlight.style.backgroundImage="url(/images/posts/" + pics[i]+ ")";
and
loopTimer = setTimeout(loop,1000);
See, if that helps.
Try changing your setTimeout to the following
loopTimer = setTimeout('loop', 1000);
First Question on this site so I hope I do this right! I have a javascript function that I want to display an image (image1.jpg) when the page is loaded, and then every 2 seconds change the image by going through the loop. However only the first image is showing so it seems the JS function is not being called. Can anyone tell me if I am doing something wrong here because it looks fine to me so can't understand why it won't work. Thanks
<html>
<head>
<script type="text/javascript">
function displayImages(){
var images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
var i = 1;
if(i>images.length-1){
this.src=images[0];
i=1;
}else{
this.src=images[i];
i++;
}
setTimeout("displayImages()", 2000);
}
</script>
</head>
<body onload="displayImages();">
<img id="myButton" src="image1.jpg" />
</body>
</html>
You need to move the line
var i = 1;
outside the displayImages -function or it will start from one each time!
EDIT: But using a global variable is not considered good practice, so you could use closures instead. Also as noted in other answers, you are referencing this which does not refer to the image object, so I corrected that as well as simplified the logic a bit:
<script type="text/javascript">
function displayImages( i ){
var images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
var img = document.getElementById('myButton');
img.src = images[i];
i = (i+1) % images.length;
setTimeout( function() { displayImages(i); }, 2000 );
}
</script>
<body onload="displayImages(0);">
You need the value of i to be available at each call, it can be kept in a closure using something like:
var displayImages = (function() {
var i = 0;
var images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
return function() {
document.getElementById('myButton').src = images[i++ % images.length];
setTimeout(displayImages, 2000);
}
}());
Also, since this isn't set by the call, it will default to the global/window object, so you need to get a reference to the image. That too could be held in a closure.
There are a couple of issues here that are stopping this from working.
First the var i = 1; needs to be moved outside the function to make the increment work. Also note that the first item in an array is 0, not 1.
Second you're using this to refer to change the image's src, but this is not a reference to the image. The best thing to do is use here is document.getElementById instead.
var i, button;
i = 0;
button = document.getElementById('myButton');
function displayImages() {
var images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
if (i > images.length - 1){
button.src = images[0];
i = 0;
}
else{
button.src = images[i];
i++;
}
setTimeout(displayImages, 2000);
}
There's still some room for improvement and optimisation, but this should work.
You are reinitializing value of i every time, so change the following:
function displayImages(){
var images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
if(!displayImages.i || displayImages.i >= images.length) displayImages.i = 0;
document.getElementById('myButton').src = images[displayImages.i];
displayImages.i++;
setTimeout(displayImages, 2000);
}
Functions are objects in JS and because of this:
you can pass them by reference and not as a string improving performance and readability
you can add fields and even methods to a function object like I did with displayImages.i
EDIT: I've realized that there was one more issue src was not being set for button.
Now I've fixed this and also made other improvements.
Here is the fiddle http://jsfiddle.net/aD4Kj/3/ Only image URLs changed to actually show something.
<script type="text/javascript">
var i = 1;
function displayImages(){
.......
........
Just make "i" Global. so that whenever displayImages being called it will not redefined to 1.
<html>
<head>
<script type="text/javascript">
var i = 1;
function displayImages() {
var images = ['img1.jpg', 'img2.jpg', 'img3.jpg'];
i++;
if (i > images.length - 1) {
i = 0;
}
$('#myButton').attr('src', images[i]);
setTimeout(displayImages, 2000);
}
</script></head>
<body onload="displayImages();">
<img id="myButton" src="img1.jpg" height="150px" width="150px"/>
</body>
</html>
Make i global.
here your are using displayImages() recursively and variable for index i. e i assign as local variable in function displayImages() , you need to assign it global variable i.e outside of the function also initialize it from i=0 as array index always start from 0,
your code become
var i = 0; // assign i global
function displayImages(){
var images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
if(i>images.length-1){
document.getElementById('myButton').src=images[0]; //get img by id
i=0; // to get first image
}
else{
document.getElementById('myButton').src=images[i]; //get img by id
i++;
}
setTimeout("displayImages()", 2000);
}
I am trying to put a play button in my image gallery. I have a small pice of code that needs work,but my problem is getting the images to display one at a time. The code below brings up all the pictures at once. What I am wondering is if I can work this by classname or will I need to build an array and work from that.
This is the code that partialy works showing all at once. I think I am just missing something simple.
<script>
function slide_show() {
var slides = document.getElementsByClassName("s"),
i = slides.length;
for(i=0; i<15; i++) {
slides[i].style.visibility = "visible";
slides[i].style.transition="visibility 5s ease 5s"
}
}
</script>
Try using a setTimeout to delay the movement and add some opacity to make them fade in:
var count = 0;
function slide_show() {
var slides = document.getElementsByClassName("s"),
i = slides.length;
if (count < i) {
slides[count].style.visibility = "visible";
slides[count].style.opacity = "1";
slides[count].style.transition="opacity 5s ease 5s"
count++;
setTimeout(slide_show, 500);
}
}
slide_show();
By changing the opacity numbers or the setTimout numbers - you can get different fade effects. Check out this codepen to see it in action.
You can change your function a little bit so it waits for the animation to finish:
<script>
var index = 0;
function slide_show() {
var slides = document.getElementsByClassName("s");
if(index >= slides.length)
return;
slides[index].style.visibility = "visible";
slides[index].style.transition = "visibility 5s ease 5s";
setTimeout(slide_show, 10000); // Since it takes 10 seconds to finish your animation I put in 10000
index++;
}
}
</script>
I want to replace the contents of a div with the values found in an array. I want to keep each value within the div for 3 seconds each. Here's my code so far:
var images = ['a.jpg', 'b.jpg', 'c.jpg'];
for (i = 0; i < images.length; i++) {
$('#slideShow').html("<img src='../"+images[i]+"' alt='' />");
}
This of course changes the images so fast that the human eye only sees one image being in the div at all times. I want to keep each image for 3 seconds before the next .html() is done on the div. How to do this?
Try this:
images = ["a.jpg", "b.jpg", "c.jpg"];
function change(i){
if(!images[i]){return false}
else{
$("#slideShow").src=images[i];
setTimeout( function(){ change(i+1) }, 3000);
}
}
change(0);
Haven't tested it but it should work.
This answer assumes that you want to loop. If not, comment and I'll rewrite.
<script>
var images = ['a.jpg', 'b.jpg', 'c.jpg'];
var curimage = 0;
function changeImage() {
$('#slideShow').html("<img src='../"+images[curimage]+"' alt='' />");
curimage++;
if (curimage > images.length) curimage = 0;
}
changeImage();
window.setInterval(changeImage, 3000);
</script>
I have tested this answer.