I am trying to load the latest image from a CCTV server for each of our cameras on our network.
I have the following code, which works correctly and refreshes the image constantly. However, on the final version of the page there will be around 10 camera images on the page. I was wondering if the code I have now could be altered to refresh all images - not just specific ones.
At first I thought I could just use the same identifier for each image, but then I realised that the source of each image differs.
<html>
<head>
<title>CCTV Test</title>
<script type="text/javascript" language="JavaScript">
newImage = new Image();
function LoadNewImage()
{
var unique = new Date();
document.images.ward.src = newImage.src;
newImage.src = "http://192.168.1.64/image/WARD?time=" + unique.getTime();
}
function InitialImage()
{
var unique = new Date();
newImage.onload = LoadNewImage;
newImage.src = "http://192.168.1.64/image/WARD?time=" + unique.getTime();
document.images.ward.onload="";
}
</script>
</head>
<body>
<img src="http://192.168.1.64/image/WARD" name="ward" onload="InitialImage()">
</body>
</html>
Any pointers would be appreciated!
Something along the lines of this:
<!DOCTYPE html>
<html>
<head>
<title>CCTV Test</title>
</head>
<body>
<img src="http://192.168.1.64/image/WARD?time=...">
<img src="http://192.168.1.64/image/WARD?time=...">
etc.
<script>
setInterval(function() {
var images = document.images;
for (var i=0; i<images.length; i++) {
images[i].src = images[i].src.replace(/\btime=[^&]*/, 'time=' + new Date().getTime());
}
}, 10000); // 10000 milliseconds = 10 seconds
</script>
</body>
</html>
This will refresh all images every 10 seconds.
A different approach is to store the locations of the images in an array.
Related
I am required to create a webpage displaying an image which will be replaced with another image in 2 seconds. Total of 3 images inside the array. However, when the current image is displayed, my random function should only allow to select from remaining images inside the array and replace the current image after 2 seconds.
I am able to randomise images inside the entire array but not able to randomise from the remaining images. Need help in this. Thanks.
$(function(){
//prepare Your data array with img urls
var dataArray=new Array();
dataArray[0]="cat2.jpg";
dataArray[1]="cat3.jpg";
dataArray[2]="cat1.jpg";
//start with id=0 after 2 seconds
var thisId=0;
window.setInterval(function(){
var randomNum = Math.floor(Math.random() * dataArray.length);
document.getElementById("thisImg").src = dataArray[randomNum];
},2000);
});
<!DOCTYPE html>
<html>
<head>
<title>Task 2</title>
<!-- calling external js file -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<img id="thisImg" alt="img" src="cat1.jpg"/>
<script src ="Task2.js"></script>
</body>
</html>
Try this approach, just filter your images before choosing next one and pick random.
const numbers = [1,2,3,4,5]
let currentNumber = 1;
const run = (numbers, cn) => {
setInterval(() => {
const filtered = numbers.filter(num => num !== cn);
const random = filtered[Math.floor(Math.random() * filtered.length)]
// here set background to random
console.log(`
Current: ${cn}
Filtered: ${filtered}
Next: ${random}
`)
cn = random;
}, 3000)
}
run(numbers, currentNumber)
Splice the used image source from the array
$(function(){
//prepare Your data array with img urls
var dataArray=new Array();
dataArray[0]="cat2.jpg";
dataArray[1]="cat3.jpg";
dataArray[2]="cat1.jpg";
//start with id=0 after 2 seconds
var thisId=0;
var a=window.setInterval(function(){
var randomNum = Math.floor(Math.random() * dataArray.length);
if(typeof dataArray[randomNum]==="undefined")
{ clearInterval(a);}
document.getElementById("thisImg").src = dataArray[randomNum];
dataArray.splice(randomNum,1);
},2000);
});
<!DOCTYPE html>
<html>
<head>
<title>Task 2</title>
<!-- calling external js file -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<img id="thisImg" alt="img" src="cat1.jpg"/>
<script src ="Task2.js"></script>
</body>
</html>
I use thisId as a placeholder for current image ID. Everytime you generate a random number, you can compare it against thisId and change it if equals to thisId. Then set thisId=randomNum again for next loop.
$(function(){
var thisId=0;
//prepare Your data array with img urls
var dataArray=new Array();
dataArray[0]="cat2.jpg";
dataArray[1]="cat3.jpg";
dataArray[2]="cat1.jpg";
window.setInterval(function(){
var randomNum = Math.floor(Math.random() * dataArray.length);
if (thisId==randomNum){randomNum++;};
if (randomNum==3){randomNum=0};
thisId=randomNum;
document.getElementById("thisImg").src = dataArray[randomNum];
},2000);
});
I realise this is all over the internet, but I can't actually find one that I know how to use. I'm very new to JS, and still pretty new to HTML. The most useful thing I've found is this, except I don't know how to actually implement it into my code. Based on something else I found, I tried this.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="Styling/style.css">
<script language="JavaScript">
var image = document.getElementById("img1");
var src = ["concert2.gif", "concert3.gif", "concert4.gif", "concert5.gif", "concert1.gif"];
</script>
</head>
<body>
<img id="img1" src="concert1.gif" alt="concert1.gif">
<script language="JavaScript">
var step = 0
function slideit() {
image.src = src[step];
image.alt = src[step];
if (step < 4) {
step++;
} else {
step = 1;
}
}
setInterval(slideit, 5000);
</script>
</body>
It didn't work, it just stayed at concert1.gif. Some help would really be appreciated!
-Thanks
The error is that you are trying to retrieve image element before it's loaded in the first script tag. Also language='javascript' is no longer required as JavaScript is now the only scripting language.
Here is your code:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="Styling/style.css">
</head>
<body>
<img id="img1" src="concert1.gif" alt="concert1.gif">
<script>
var image = document.getElementById("img1");
var src = ["concert2.gif", "concert3.gif", "concert4.gif", "concert5.gif", "concert1.gif"];
var step = 0
function slideit() {
image.src = src[step];
image.alt = src[step];
if (step < 4) {
step++;
} else {
step = 1;
}
}
setInterval(slideit, 5000);
</script>
</body>
It still doesn't show up anything because maybe your src is not correct. But, you can still see alt attribute changing. LoL ;)
I am trying to make a really simple slider. All is working correctly except one thing. The problem is that it's not loading the image named as 'b.jpg'. If i rename the same picture with any other name it loads it but it's not loading any image with name 'b.jpg'.
Here's my code. Please tell me if something is wrong.
<!DOCTYPE html>
<html>
<head>
<title>Slider ~ Javascript</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<img id="imgSlider">
<script type="text/javascript" src="script.js"></script>
</body>
</html>
Here's script.js :
var imgLinks = ['a.jpg', 'b.jgp', 'c.jpg', 'd.jpg', 'e.jpg'];
var mySlider = document.getElementById('imgSlider');
var imgIndex = 0;
function changeImage() {
mySlider.setAttribute('src', imgLinks[imgIndex]);
imgIndex++;
if (imgIndex >= imgLinks.length) {
imgIndex = 0;
};
}
var intervals = setInterval(changeImage, 2000);
mySlider.onclick = function (c) {
clearInterval(intervals);
}
your code has b.jgp and all others are jpg.
imgLinks = ['a.jpg', 'b.jgp', 'c.jpg', 'd.jpg', 'e.jpg'];
correct it to b.jpg it will work fine
imgLinks = ['a.jpg', 'b.jpg', 'c.jpg', 'd.jpg', 'e.jpg'];
When ever I try to click on the image, the image changes but the next image in the array is not displayed
<!doctype html>
<html>
<head>
<title>
slides
</title>
<script type="text/javascript">
function nextslide(){
var images = new Array()
images[0]= "home.jpg"
images[1]= "left.jpg"
images[2]= "right.jpg"
var currentpic=0
var lastpic= images.lenth-1;
if (currentpic =lastpic)
{
currentpic=0;
document.getElementById('slide').src = images[currentpic];
}else
{
currentpic++;
document.getElementById('slide').src = images[currentpic];
}
}
</script>
</head>
<body>
<img src="home.jpg" id="slide" onclick="nextslide()">
</body>
</html>
Help would be greatly appreciated.
Thank you for the help.
There are several things wrong with your code. Here is the fixed version:
<!doctype html>
<html>
<head>
<title>slides</title>
<script type="text/javascript">
var images = new Array();
images[0] = "home.jpg";
images[1] = "left.jpg";
images[2] = "right.jpg";
var currentpic = 0;
var lastpic = images.length-1;
function nextslide()
{
if (currentpic == lastpic)
{
currentpic = 0;
document.getElementById('slide').src = images[currentpic];
}
else
{
currentpic++;
document.getElementById('slide').src = images[currentpic];
}
}
</script>
</head>
<body>
<img src="home.jpg" id="slide" onclick="nextslide()">
</body>
</html>
What's wrong?
var lastpic= images.lenth-1; You're missing a g in length.
if (currentpic =lastpic) To check if var1 is the same as var2, you need to use == instead of =
You're missing a couple of semicolons.
You should declare currentpic, images, and lastpic outside of your function to make it actually set the image as the next image.
To try and debug yourself
Always check your browser's developer console for errors.
try this
1.) Specify globallythis variable
var currentpic=0;
2.) Change in images.lenth to images.length
3.) Change if (currentpic =lastpic) to if (currentpic ==lastpic)
<!doctype html>
<html>
<head>
<title>
slides
</title>
<script type="text/javascript">
var currentpic=0;
function nextslide(){
var images = new Array()
images[0]= "http://thewowstyle.com/wp-content/uploads/2015/04/Cartoon.jpg"
images[1]= "http://vignette2.wikia.nocookie.net/epicrapbattlesofhistory/images/1/10/Penguin-cartoon.png/revision/latest?cb=20141207223335"
images[2]= "http://cliparts.co/cliparts/kiK/Byz/kiKByzxoT.jpg"
var lastpic= images.length-1;
if (currentpic ==lastpic)
{
currentpic=0;
document.getElementById('slide').src = images[currentpic];
}else
{
currentpic++;
document.getElementById('slide').src = images[currentpic];
}
}
</script>
</head>
<body>
<img src="home.jpg" id="slide" onclick="nextslide()">
</body>
</html>
My task for my Javascript class is to create a script for this page that changes the image every 3 seconds. I think my code is correct, however Firebug tells me "document.getElementByID is not a function." Can someone show me what I am doing incorrectly?
This is my JS script.
<script type="text/javascript">
var i = 0
var lightArray = ["pumpkinOff.gif", "pumpkinOn.gif"]
var currentLight = document.getElementByID('light')
// ChangeLight Method Prototype
function changeLight() {
currentLight.src = lightArray[i++];
if (i == lightArray.length) {
i = 0;
}
}
setInterval(changeLight, 3000)
</script>
Here is my edited HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript for Programmers</title>
</head>
<body>
<h2>Happy Halloween!</h2>
<img id="pumpkin" src="pumpkinoff.gif" alt="pumpkin">
<script src="../Script/spooky.js"></script>
</body>
</html>
Incorrect capitalisation on
var currentLight = document.getElementByID('light')
Should be:
var currentLight = document.getElementById('pumpkin')
I have attached a working fiddle:
http://jsfiddle.net/11csf4k2/
It's a typo it should be:
var currentLight = document.getElementById('light'); //Not ID
It should be Id not ID:
document.getElementById('light');
Also note that you don't have element with id light on your page. It probably should be
document.getElementById('pumpkin');