Develop Reference

How to change img src after some time?

There's an img element with a certain src. I want to change the src after let's say 1000ms and then another after 1000ms and then stop at the last image. Is that possible in jQuery, with delay() maybe?

Place the image paths in an array. Then, using a timer (setInterval() or setTimeout()), you change the source of the image with the next item in the array until you've reach the end.
Anything you can do with vanilla JavaScript can be done with JQuery, but JQuery is way overused and for something this simple, would be overkill.
var paths =
[ "https://www.spreadshirt.com/image-server/v1/mp/designs/12386804,width=178,height=178/winking-smiley-face.png",
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTUirw89Ct-tBfgNgrCV8ygX65aomMvVbr1LsEgnaH8eJBG3FZH",
"https://www.energylivenews.com/wp-content/uploads/2014/06/Smiley-face-emoticon-575.jpg"];
var img = document.getElementById("img");
var i = 0;
var timer = setInterval(function(){
// If we've reached the end of the array...
if(i >= paths.length){
clearInterval(timer); // Stop the timer
return; // Exit the function
}
img.src = paths[i++]; // Sete the path to the current counter and then increase the counter
}, 1000);
img {
width:200px;
}
<img id="img">

For an infinite loop change the code above to:
var img = document.getElementById("img");
var i = 0;
var timer = setInterval(function(){
// If we've reached the end of the array...
if(i >= paths.length){
i=0;
}
img.src = paths[i++]; // Sete the path to the current counter and then increase the counter
}, 1000);

Transition in Slideshow not working

Today I managed to create a slideshow in javascript that has a fancy transparent transition, however, my problem is that after it reproduces the first 2 images, the next ones won't appear, and the slideshow repeats the second picture over and over again.
I've tried a few methods that did not work at all.
Any help and insight to the problem will be very important to me!
Here is a link to my code: eBRabp
My Javascript code:
// JavaScript Document
var myImage = document.getElementById('mySlide');
var imageArray = ["images/slider1.jpg","images/slider2.jpg","images/slider3.jpg","images/slider4.jpg","images/slider5.jpg","images/slider6.jpg","images/slider7.jpg"];
var imageIndex = 0;
function changeImage() {
mySlide.className = 'hiding';
setTimeout(function() {
mySlide.setAttribute('src', 'images/slider2.jpg','images/slider3.jpg','images/slider4.jpg','images/slider5.jpg','images/slider6.jpg','images/slider7.jpg' + imageArray[imageIndex] + '.jpg');
mySlide.className = 'showing';
}, 1000);
imageIndex++;
if (imageIndex == imageArray.length) imageIndex = 0;
}
var intervalHandle = setInterval(changeImage, 3000);

Problem is in: mySlide.setAttribute... line... It will not work, of course, because you have placed too much (wrong) arguments. You need just two, and since you have array of images set, simple, do this:
mySlide.setAttribute('src', imageArray[imageIndex]);
And it should work:
https://jsfiddle.net/9pd4hnyn/

fadeOut, fadeIn and stop

How do I make my image fade in and stop using the code below? what do I add to it?
Thanks in advance for any correct answers it is much appreciated!
HTML:
<div class="fadeImg" >
<img src="images/25sprout.jpg">
<img style="display:none;" src="images/alex.jpg">
<img style="display:none;" src="images/thundersha.jpg">
<img style="display:none;" src="images/cathy.jpg">
<img style="display:none;" src="images/david.jpg">
</div>
JQuery:
<script type="text/javascript" src="js/package/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$next = 1; // fixed, please do not modfy;
$current = 0; // fixed, please do not modfy;
$interval = 4000; // You can set single picture show time;
$fadeTime = 800; // You can set fadeing-transition time;
$imgNum = 5; // How many pictures do you have
$(document).ready(function(){
//NOTE : Div Wrapper should with css: relative;
//NOTE : img should with css: absolute;
//NOTE : img Width & Height can change by you;
$('.fadeImg').css('position','relative');
$('.fadeImg img').css({'position':'absolute','width':'332px','height':'500px'});
nextFadeIn();
});
function nextFadeIn(){
//make image fade in and fade out at one time, without splash vsual;
$('.fadeImg img').eq($current).delay($interval).fadeOut($fadeTime)
.end().eq($next).delay($interval).hide().fadeIn($fadeTime, nextFadeIn);
// if You have 5 images, then (eq) range is 0~4
// so we should reset to 0 when value > 4;
if($next < $imgNum-1){ $next++; } else { $next = 0;}
if($current < $imgNum-1){ $current++; } else { $current =0; }
};
</script>

Your simplest option is to stop when $current matches $imgNum:
function nextFadeIn() {
if ($current >= $imgNum) return;
//make image fade in and fade out at one time, without splash vsual;
Although purists might not like this as it means an extra iteration of nextFadeIn(), it should cover what you need with minimal changes.

How to create automatic image gallery slideshow by using HTML,CSS and JavaScript

This isn't working, can anyone help?
I am trying to build a website where the images slide to the right. I have tried the solution from a previous post but that still didnt work.
(function () {
var imgLen = document.getElementById('imgGallary');
var images = imgLen.getElementsByTagName('img');
var counter = 1;
if (counter <= images.length) {
setInterval(function () {
images[0].src = images[counter].src;
console.log(images[counter].src);
counter++;
if (counter === images.length) {
counter = 1;
}
}, 4000);
}
})();
.container{
position:relative;
width:600px;
height:330px;
border-radius:5px;
border:4px solid black;
overflow:hidden;
margin-left:320px;
}
#imgGallary > img
{
width:700px;
height:330px;
}
<div id="imgGallary" class="container">
<img src="image/lake-louise-51543_960_720.jpg" />
<img src="image/snow-in-pine-tree-1265118__340.jpg" />
<img src="image/winter-385640_960_720.jpg"/>
</div>

This should fix the issue you're having with the first image not coming in correctly. Keep the HTML and CSS the same. Change the JavaScript. Here I use window.onload, but I think your self invoking method would work, too. As for sliding it to the right, the way you have things set up is very prohibitive. I tried creating a clone and sliding the clone, but there are conflicts that make it not worth while.
If you want to slide the image, I would actually go a different route. Rather than changing the src attribute, why don't you just stack the images on top of each other using absolute positioning and z-indexes? Then you can get rid of that overflow property and just apply the border to the image, or better yet set those images as div background images (ie. background: url('lake.jpg') center center no-repeat), that way you don't even have to worry about sizing them, and they won't get distorted. In CSS, give each div a transition of "transform 0.25s" (or something to that effect). Then you can just apply a transform to them in javascript to slide them to the right. To bring them back, simply get rid of the transition value and assign a transform value of 0 to the image, but make sure the z-index is lower than the currently displayed image. If you do go the transform route, remember to add your -ms- and -webkit- prefixes to be accessible to older browsers: http://caniuse.com/#search=transform
Anyway, that's just one thought. Here's the code to fix your issue with loading the wrong image. By the way, I would consider using jQuery next time for complicated css rulings (if you decide to go my route). Good luck!
JS
window.onload = function () {
var imgLen = document.getElementById('imgGallary');
var images = imgLen.getElementsByTagName('img');
var counter = 1;
//Store the src attributes in an array
var src = [];
for (var i = 0; i < images.length; i++) {
src[i] = images[i].src;
}
console.log(src);
setInterval(function () {
if (counter < images.length) {
images[0].src = src[counter];
console.log(src[counter]);
counter++;
}
// Here we're saying if the counter is equal to the length of images, go back to the first images
// and reset the counter.
else {
images[0].src = src[0];
console.log(src[0]);
counter = 1;
}
}, 4000);
}

Once you assign a new src value to the first image tag, you can't get back the original src value of that tag.
You need to make an empty img tag withour src attribute, so that you can assign the src value to that tag.
(function () {
var imgLen = document.getElementById('imgGallary');
var images = imgLen.getElementsByTagName('img');
var counter = 1;
if (counter <= images.length) {
setInterval(function () {
images[0].src = images[counter].src;
console.log(images[counter].src);
counter++;
if (counter === images.length) {
counter = 1;
}
}, 1000);
}
})();
.container{
position:relative;
width:600px;
height:330px;
border-radius:5px;
border:4px solid black;
overflow:hidden;
margin-left:320px;
}
#imgGallary > img
{
width:700px;
height:330px;
}
<div id="imgGallary" class="container">
<img />
<img src="http://placehold.it/350?text=img1" />
<img src="http://placehold.it/350?text=img2" />
<img src="http://placehold.it/350?text=img3"/>
</div>

Rotate images as well as the description and link

I would like to make some changes on a code and add some more options:
1- Rotate the images with the description of each one as well as the link,
2- Add the effect fadeOut while the image is disappearing.
Here is my little code:
var images = new Array ('BMW.png', 'Maybach.png', 'Mercedes-Benz.png', 'Mini.png', 'Jaguar.png', 'Toyota.png');
var descs = new Array ('BMW', 'Maybach', 'Mercedes-Benz', 'Mini', 'Jaguar', 'Toyota');
var links = new Array ('www.url1.com', 'www.url2.com', 'www.url3.com', 'www.url4.com', 'www.url5.com', 'www.url6.com');
var index = 1;
function rotateImage()
{
$('#myImage').fadeOut('fast', function()
{
$(this).attr('src', images[index]);
$(this).fadeIn(2000, function()
{
if (index == images.length-1)
{
index = 0;
}
else
{
index++;
}
});
});
}
$(document).ready(function()
{
setInterval (rotateImage, 7000);
});
</script>
</head>
<body>
<div id="test">
<a href="www.url1.com">
<img class="rotate" id="myImage" src="BMW.png" width="800" height="300" alt="image test" />
</a>
<div class="rotate" id="myDesc" style="margin-top: -30px; margin-left: 30px;"></div>
</div>

uhm... something like this?
(Array is ZERO base so... initial index is 0 [with 1 you start with "Maybach.png" not "BMW.png" ]).
"Add the effect fadeOut while the image is disappearing" - if the image is disappearing is already doing a fade out... you should explain this point...
However...
var images = ['http://placehold.it/150x100', 'http://placehold.it/120x150', 'http://placehold.it/90x120', 'http://placehold.it/100x100', 'http://placehold.it/100x150', 'http://placehold.it/150x100'],
descs = ['BMW', 'Maybach', 'Mercedes-Benz', 'Mini', 'Jaguar', 'Toyota'],
links = ['www.url1.com', 'www.url2.com', 'www.url3.com', 'www.url4.com', 'www.url5.com', 'www.url6.com'],
index = 0; //start from first image
function rotateImage()
{
$('#test').fadeOut('fast', function() //fadeout all block (if display none collapse your graphics use animate and "opacity") to hide without change display
{
$(this).find("a").attr('href', links[index]); //add href to url
$(this).find("img").attr('src', images[index]); //add src to image
$(this).find("#myDesc").text(descs[index]); //add description in desc div
$(this).delay(500).fadeIn(2000, function() //delay (a little bit) to wait image load (for bigger image you need longer delay)
{
if (index == images.length-1)
{
index = 0;
}
else
{
index++;
}
});
});
}
$(document).ready(function()
{
rotateImage(); //fire first time and then use Setinterval for loop
setInterval (rotateImage, 7000);
});
Example HERE jsfiddler
I hope this can help.
Simple image preload:
<img src="path/placeholder.gif" data-src="path/realImage.jpg" style="display:none" />
so the image that be loaded is a gif of trasparent singol pixel. when you need to preload you only need to place data-src in src and than show image... (do this when the prev image of your animation was displayed for prevent the load gap when this image will display)