I have an image slideshow which will work in any other browser I try but not in IE - it just does nothing but display the primary image. Please could someone tell me I not going mad and it is a simple fix that I can't see.
Many thanks
Mickeyjay.
Code below:
<div id="image_slide"><img src="images/.......jpg" id="slideit" name="slideit" border="0">
<script type="text/javascript">
var dimages=new Array();
var numImages=3;
dimages[0]=new Image();
dimages[0].src="images/.......jpg";
dimages[1]=new Image();
dimages[1].src="images/.......jpg";
dimages[2]=new Image();
dimages[2].src="images/.......jpg";
var curImage=-1;
function swapPicture()
{
if (document.images)
{
var nextImage=curImage+1;
if (nextImage>=numImages)
nextImage=0;
if (dimages[nextImage] && dimages[nextImage].complete)
{
var target=0;
if (document.images.slideit)
target=document.images.slideit;
if (document.all && document.getElementById("slideit"))
target=document.getElementById("slideit");
if (target)
{
target.src=dimages[nextImage].src;
curImage=nextImage;
}
setTimeout("swapPicture()", 1500);
}
else
{
setTimeout("swapPicture()", 150);
}
}
}
setTimeout("swapPicture()", 1500);
</script>
Try this simplified test, the idea is to load your pictures before start to swap, and will not need to test .complete that way.
<html>
<head>
<title>Example</title>
</head>
<body>
<div id="image_slide"><img src="intro.jpg"
id="slideit" name="slideit" border="0"></div>
<script type="text/javascript">
var curImage = -1;
var numImages = 2;
var dimages = new Array();
function loadPictures()
{
dimages[0] = new Image();
dimages[0].src = "test1.jpg";
dimages[1] = new Image();
dimages[1].src = "test2.jpg";
setTimeout(swapPicture, 3000);
}
function swapPicture()
{
var nextImage = curImage + 1;
if (nextImage >= numImages)
nextImage = 0;
document.images.slideit.src = dimages[nextImage].src;
curImage = nextImage;
setTimeout(swapPicture, 1500);
}
setTimeout(loadPictures, 1500);
</script>
</body>
</html>
Related
I'm pretty new to Javascript and im trying to build slideshow myself now. Only im stuck right now after i build the array where i get my pictures from. It only shows a white screen.
My Javascript
$(function () {
var counter = 0;
var defaultSettings = {
"sliderContainer": "#slider"
, "pauseWithMouse": true
, "sliderSpeed": 2000
, "transitionSpeed": 1500
};
function cycleImages() {
counter++;
if (counter >= images.Length) {
counter = 0;
}
document.getElementById("#slider img").src = MyImages[counter];
var images = $('#slider img')
, now = images.filter(':visible')
, next = now.next().length ? now.next() : images.first()
, speed = 1500; //Transition speed
now.fadeOut(speed);
next.fadeIn(speed);
}
var theInterval; // Slide speed
var = images = [];
// if myImages exists then
images = myImages;
if (images.length > 0) {
$(defaultSettings.sliderContainer).append('<img id="sliderImage" src="' + images[0] + '" />');
startSlide();
}
var startSlide = function () {
setInterval(cycleImages, defaultSettings.sliderSpeed); // Set interval
};
var stopSlide = function () {
if (defaultSettings.pauseWithMouse) {
clearInterval(theInterval);
}
};
startSlide();
$('#slider img').on('mouseover', function () {
stopSlide();
});
$('#slider img').on('mouseout', function () {
startSlide();
});
});
And my HTML:
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Javascript Slider</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<link rel="stylesheet" href="css/style.css">
<script src="js/slideshow.js"></script>
<script>
var myImages = ["slide1.jpg", "slide2.jpg", "bg/slide3.jpg"];
</script>
</head>
<body>
<main>
<div id="slider">
</div>
</main>
</body>
</html>
you have strange declaration of variable here
var = images = [];
also you need to move this part
var startSlide = function() {
setInterval(cycleImages, defaultSettings.sliderSpeed); // Set interval
};
before
if (images.length > 0) {
$(defaultSettings.sliderContainer).append('<img id="sliderImage" src="' + images[0] + '" />');
startSlide();
}
you have wrong variable name (MyImages) here
document.getElementById("#slider img").src = MyImages[counter];
first try to debug your code
I'm trying to do a slideshow gallery in Javascript, but it doesn't work... When I run this code, the src goes to veyron.jpg instantly, skipping the lamborghini.jpg.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img id="img" src="ferrari.jpg" />
<script>
img = document.getElementById("img");
images = new Array("ferrari.jpg","lamborghini.jpg","veyron.jpg");
end = images.length -1;
window.onload = setInterval(slide,1000);
function slide(){
for(i=0;i<=end;i++){
img.src = images[i];
}
}
</script>
</body>
</html>
why loop is exist here, you are casting all the images in all.
Do it with increment variable with start
<script>
var img = document.getElementById("img");
var images = new Array("ferrari.jpg","lamborghini.jpg","veyron.jpg");
var end = images.length -1;
var start = 0;
window.onload = setInterval(slide,1000);
function slide(){
img.src = images[start%end];
start++;
}
</script>
example fiddle
Sorry for being a total newb. This is my 1st week on this javascript crashcourse and I know noobs are annoying as hell. Anyway, I couldn't get your suggestions to work. I tried some different things and got it to work, but now, once I press "Stop Slideshow," I can't get the slideshow to start again from where it left off (or at all). Any ideas?
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div>
<img src="http://joemiller.us/wp-content/uploads/beautiful-birds-wallpapers_blue-bird-wallpaper-free.jpg" alt="Birds" id="image" style="height: 200px; width: 200px">
<br>
<button type="button" onclick="startShow()">Start Slideshow</button>
<button type="button" onclick="stopShow()">Stop Slideshow</button>
</div>
<script>
var images = [
'http://joemiller.us/wp-content/uploads/beautiful-birds-wallpapers_blue-bird-wallpaper-free.jpg',
'http://www.hgsitebuilder.com/files/writeable/uploads/hostgator172932/image/exoticbirds2.jpg',
'http://melleum.com/data/uploads/6/280423-birds.jpg',
'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTBew8yyadE865lI-dSdg2XgNIREm1RZVhQpzjN3HzmmLwuR0_j',
'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSvo3Aew9HAc2PXVaHz9ghtr-_F9D7ZqySzRLbvPwG6mzmMsBaVHQ'
];
var img = document.getElementById('image');
var i = 0;
var start = setInterval("cycleImages ()", 3000);
function cycleImages () {
if (i < images.length-1) {
i++;
} else {
i=0;
}
img.src = images[i];
}
function startShow () {
start;
}
function stopShow () {
clearInterval(start);
}
</script>
</body>
</html>
Despite you appearing to be a bit of a giverupper, here's one way of doing it:
var images = [
'http://joemiller.us/wp-content/uploads/beautiful-birds-wallpapers_blue-bird-wallpaper-free.jpg',
'http://www.hgsitebuilder.com/files/writeable/uploads/hostgator172932/image/exoticbirds2.jpg',
'http://upic.me/i/z2/birds-bird_928268.jpg',
'http://melleum.com/data/uploads/6/280423-birds.jpg',
'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTBew8yyadE865lI-dSdg2XgNIREm1RZVhQpzjN3HzmmLwuR0_j',
'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSvo3Aew9HAc2PXVaHz9ghtr-_F9D7ZqySzRLbvPwG6mzmMsBaVHQ'
];
var imageIndex = 0;
var delay = 1000;
var slideshowImage = document.getElementById('slideshow-image');
var startButton = document.getElementById('start');
var stopButton = document.getElementById('stop');
var timer;
startButton.addEventListener('click', start);
stopButton.addEventListener('click', stop);
function start() {
clearInterval(timer);
slideshowImage.setAttribute('src', images[imageIndex]);
timer = setInterval(function () {
imageIndex = imageIndex >= (images.length - 1) ? 0 : ++imageIndex;
slideshowImage.setAttribute('src', images[imageIndex]);
}, delay);
}
function stop() {
clearInterval(timer);
}
#slideshow-image {
max-width: 320px;
}
<div class="controls">
<button id="start">Start</button>
<button id="stop">Stop</button>
</div>
<img id="slideshow-image" src="">
You could use a function*'s next in a setInterval's function after the element <img src="" id="image" /> exists,
var tag = document.getElementById('image'),
srcs = ['http://google.com/favicon.ico', 'http://www.yahoo.com/favicon.ico', 'http://www.bing.com/favicon.ico'];
function* loop(tag, srcs) {
var i = 0;
while (1) {
yield tag.src = srcs[i++ % srcs.length];
}
}
var gen = loop(tag, srcs);
setInterval(gen.next.bind(gen), 500);
DEMO
I asked a similar question elsewhere, but I am trying to switch from one image to the next after 500 ms. Somebody provided this answer, but the code only works when I preview it in the HTML and Javascript boxes of the site i'm using (then displays nothing when I launch it):
<html>
<head>
<title>switch</title>
<script type = "text/javascript">
var images = [];
var x = 0;
var $img = document.getElementById("img");
images[0] = "image1.jpg";
images[1] = "image2.jpg";
function displayNextImage() {
if (++x < images.length) {
$img.src = images[x];
setInterval(displayNextImage, 500);
}
else {
$img.remove();
}
}
function startTimer() {
setInterval(displayNextImage, 500);
}
</script>
</head>
</html>
<body onload = "startTimer()">
<img id="img" src="image1.jpg">
</body>
</html>
Is there a way to get this to work in HTML only? I tried doing this, but it only stays on the first image:
<html>
<head>
<title>switch</title>
</head>
<body>
<img id="img" src="http://www.almightydad.com/wp-content/uploads/2010/10/testing-testing-123.jpg"
alt="" />
<script>
var images = [], x = 0;
images[0] = "http://www.almightydad.com/wp-content/uploads/2010/10/testing-testing-123.jpg";
images[1] = "http://trainwithfinishers.com/wp-content/uploads/2014/08/TEST.jpg";
function displayNextImage() {
if (++x < images.length) {
document.getElementById("img").src = images[x];
setInterval(displayNextImage, 500);
}
else{
img.remove();
}
function startTimer() {
setInterval(displayNextImage, 500);
}
</script>
</body>
</html>
Also, jQuery doesn't work on the site i'm using.
You never actually call the startTimer function.
Try adding startTimer(); before the script tag is closed.
Your first code had an onload event on the body, which would execute your function.
UPDATE (you're also missing a curly bracket on your if statement in displayNextImage())
<script type="text/javascript">
var images = [], x = 0;
images[0] = "http://www.almightydad.com/wp-content/uploads/2010/10/testing-testing-123.jpg";
images[1] = "http://trainwithfinishers.com/wp-content/uploads/2014/08/TEST.jpg";
function displayNextImage() {
if (++x < images.length) {
document.getElementById("img").src = images[x];
setInterval(displayNextImage, 500);
} else {
img.remove();
}
}
function startTimer() {
setInterval(displayNextImage, 500);
}
startTimer();
</script>
You just need to invoke the startTimer() function.
Read about JavaScript Function Invocation.
Also note that you missed closing the displayNextImage() function.
Replace your <script> code block with this one:
<script>
var images = [], x = 0;
images[0] = "http://www.almightydad.com/wp-content/uploads/2010/10/testing-testing-123.jpg";
images[1] = "http://trainwithfinishers.com/wp-content/uploads/2014/08/TEST.jpg";
function displayNextImage() {
if (++x < images.length) {
document.getElementById("img").src = images[x];
setInterval(displayNextImage, 500);
}
else{
img.remove();
}
}
function startTimer() {
setInterval(displayNextImage, 500);
}
startTimer();
</script>
Here is the working code snippet:
var images = [], x = 0;
images[0] = "http://www.almightydad.com/wp-content/uploads/2010/10/testing-testing-123.jpg";
images[1] = "http://trainwithfinishers.com/wp-content/uploads/2014/08/TEST.jpg";
function displayNextImage() {
if (++x < images.length) {
document.getElementById("img").src = images[x];
setInterval(displayNextImage, 500);
}
else{
img.remove();
}
}
function startTimer() {
setInterval(displayNextImage, 500);
}
startTimer();
<img id="img" src="http://www.almightydad.com/wp-content/uploads/2010/10/testing-testing-123.jpg"
alt="" />
I am currently making a web page with an image inside of a div tag. I wrote a script to change the image after a certain amount of time, and it works fine when I test the script alone, however; when I attempt to place the script within my web page, it does not change the image.
Here is the code for my script:
<!DOCTYPE html>
<html>
<body>
<script>
images = new Array;
images[0] = "img2.gif";
images[1] = "img3.gif";
images[2] = "img4.gif";
images[3] = "img5.gif";
images[4] = "img6.gif";
images[5] = "img7.gif";
images[6] = "img8.gif";
images[7] = "img9.gif";
images[8] = "img10.gif";
setInterval( function() {
changeImage()
}, 5000);
x = 0;
function changeImage() {
document.getElementById('ad').src = images[x];
if ( x < 8 ) {
x += 1;
} else if ( x = 9 ) {
x = 0;
}
}
</script>
<img id='ad' src="img.gif">
</body>
</html>
I have tested this script with the image inside of a div tag and it still works fine. When I put the same code into my web page, it does not work. Also note, the image file names are just examples. The images I am using are from photobucket, so I have very little control over what they are called. Any help I could get on this would be greatly appreciated.
You need to put your code inside window.onload = function() {}
var images = new Array();
images[0] = "img2.gif";
images[1] = "img3.gif";
images[2] = "img4.gif";
images[3] = "img5.gif";
images[4] = "img6.gif";
images[5] = "img7.gif";
images[6] = "img8.gif";
images[7] = "img9.gif";
images[8] = "img10.gif";
function changeImage() {
document.getElementById('ad').src = images[x];
if (x<8) {
x+=1;
}
else if (x===9) {
x=0;
}
}
window.onload = function() {
var x = 0;
setInterval(function() {
changeImage()
},5000);
}
Edit
This code has been tested on my local machine and works.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var images = new Array();
for (var i = 2; i < 11; i++) {
images.push("img" + i + ".gif");
}
var x = 0;
function changeImage() {
document.getElementById('ad').src = images[x];
document.getElementById('imgsrc').innerHTML = "<h1>" + images[x] + "</h1>";
if (x < 8) {
x += 1;
} else {
x = 0;
}
}
window.onload = function() {
setInterval(function () {
changeImage();
}, 1000);
}
</script>
</head>
<body>
<img id="ad" src="img.gif" />
<div id="imgsrc"><h1>img.gif</h1></div>
</body>
</html>
Here is a fiddle of the final code working. JSFiddle doesn't like window.onload for some reason, so I had to exclude it. This doesn't really demonstrate my point, but I thought I'd just include it anyway.
Your code works to change the image src in this fiddle: http://jsfiddle.net/snB2a/1/
Try to rename your variables images and x to longer names. What can happen is, if some other code in your page, or worse, some code in one of the script file you page references, use variable "x" without declare it locally, then it would actually modify your "x" variable.
Here is an example to demonstrate the problem:
function something()
{
for (x = 0; i < 10; x++)
dosomethingelse();
}
If the above function is called in your page, then it will overwrite your "x" variable. The following code is safe:
function something()
{
var x;
for (x = 0; i < 10; x++)
dosomethingelse();
}