Windows Javascript application sequence images error - javascript

I am trying to display images sequentially in Windows Application Js App. The script is as follows. This is working in notepad but it's not working in ".net". I added separate file "scrolling.js" to home folder and the below code is in it. Error is pointing towards rotator.src . Am I missing anything?
<body>
<!-- The content that will be loaded and displayed. -->
<div class="fragment homepage">
<header aria-label="Header content" role="banner">
<button class="win-backbutton" aria-label="Back" disabled type="button"></button>
<h1 class="titlearea win-type-ellipsis">
<span class="pagetitle">Welcome to AppTweenMax!</span>
</h1>
</header>
<section aria-label="Main content" role="main">
<div id="demo">Content goes here.</div>
<img src="imagesroll/1.png" alt="rotating image" width="640" height="960" id="rotator">
</section>
</div>
<script type="text/javascript">
(function () {
var rotator = document.getElementById('rotator'); // change to match image ID
var imageDir = 'imagesroll/'; // change to match images folder
var delayInSeconds = 2; // set number of seconds delay
// list image names
var images = ['2.png', '3.png', '4.png', '5.png', '6.png', '7.png'];
// don't change below this line
var num = 0;
var changeImage = function () {
var len = images.length;
var src = imageDir + images[num++];
document.getElementById('rotator').src = "" + src;
rotator.src = src;
if (num == len) {
num = 0;
}
};
setInterval(changeImage, delayInSeconds * 1000);
})();
</script>
</body>

if you want to rotate a static set of images, you need to add them to the windows store app project. Use add existing items->add as link to add the images. This assumes all images are in a folder <myprojectdir>\images. Ensure that right click->properties->package action is set as 'content'. This will ensure that images are packaged as part of the app package.
then, use image path like /images/1.png assuming you have the images under folder 'images' in the project. you can also use absolute path of kind ms-appx:///images/1.png
this code works:
var rotator = document.getElementById('rotator'); // change to match image ID
var imageDir = 'images/'; // change to match images folder
var delayInSeconds = 2; // set number of seconds delay
// list image names
var images = ['2.png', '3.png', '4.png', '5.png', '6.png', '7.png'];
var num = 0;
var changeImage = function ()
{
var len = images.length;
var src = 'ms-appx:///' + imageDir + images[num++];
rotator.src = src;
if (num == len)
{
num = 0;
}
};
setInterval(changeImage, delayInSeconds * 1000);

Bro you have to erase this line --> rotator.src = src;
and your code works!

Related

Outputting a random image from an array using JS

I'm trying to output a random image from my array and then remove it from the array afterwards for a matching game. I'm new to programming in general and I've seen (what I'm sure are) easier ways of doing it but nothing I understand yet so I'm trying it this way. The problem is that I can't get an image to print out and I'm not sure why. Any help would be appreciated! thanks!
HTML
<script>
printImage(); Sites.splice(r,1);
</script>
JS
var imgArray = new Array();
imgArray[0] = new Image();
imgArray[0].src = 'img0.jpg';
...
imgArray[23] = new Image();
imgArray[23].src = 'img23.jpg';
ImageRotation = imgArray.length;
FirstHalf = '<img src="img';
LastHalf = '.jpg" style="width:100px; height: 100px;">';
function printImage() {
var r = Math.ceil(Math.random() * ImageRotation);
document.write(FirstHalf + r + LastHalf);
}
This is how you can do what you are tried to achieve:
I've used setInterval to demonstrate.
Fiddle
HTML:
<img src="http://dummyimage.com/100x100/252799/fff.png&text=one" />
JavaScript:
var imgs = ['http://dummyimage.com/100x100/252799/fff.png&text=one', 'http://dummyimage.com/100x100/252799/fff.png&text=two', 'http://dummyimage.com/100x100/252799/fff.png&text=three', 'http://dummyimage.com/100x100/252799/fff.png&text=four', 'http://dummyimage.com/100x100/252799/fff.png&text=five', 'http://dummyimage.com/100x100/252799/fff.png&text=six', 'http://dummyimage.com/100x100/252799/fff.png&text=seven', 'http://dummyimage.com/100x100/252799/fff.png&text=eight', 'http://dummyimage.com/100x100/252799/fff.png&text=nine', 'http://dummyimage.com/100x100/252799/fff.png&text=ten'];
setInterval(function() {
var im = document.getElementsByTagName('img')[0];
im.src = imgs[Math.round(Math.random() * (imgs.length - 1))];
}, 1000);
Here is another way of setting the image, based on #chipChocolate.py's answer, and addressing OP's requirement that each image is removed from the list. Instead of changing the first image in the HTML, it rewrites the inner HTML within a <div> container.
<html>
<head>
<script type="text/javascript">
var imgs = ['http://dummyimage.com/100x100/252799/fff.png&text=one', 'http://dummyimage.com/100x100/252799/fff.png&text=two', 'http://dummyimage.com/100x100/252799/fff.png&text=three', 'http://dummyimage.com/100x100/252799/fff.png&text=four', 'http://dummyimage.com/100x100/252799/fff.png&text=five', 'http://dummyimage.com/100x100/252799/fff.png&text=six', 'http://dummyimage.com/100x100/252799/fff.png&text=seven', 'http://dummyimage.com/100x100/252799/fff.png&text=eight', 'http://dummyimage.com/100x100/252799/fff.png&text=nine', 'http://dummyimage.com/100x100/252799/fff.png&text=ten'];
var pictures = imgs.length;
var picim =[];
for (var i=0; i<pictures; i++)
picim [i] = i;
var num = 0; // current index of picture number
function randpic() {
if (pictures > 1) {
pictures--;
for (var i=num; i<pictures; i++) // remove current picture index
picim[i] = picim[i+1];
num = Math.floor(Math.random() * pictures);
var content = '<IMG src="' + imgs[picim [num]] + '" />';
document.getElementById('randpic').innerHTML = content;
}
}
</script>
</head>
<body>
<div id="randpic" onClick="javascript:randpic()">
<img src="http://dummyimage.com/100x100/252799/fff.png&text=one" />
</div>
</body>
</html>

Mouseover Slideshow

So I have a webpage with one image on it (slicedImg_01). I would like to have that static picture animate randomly through a series of 6 pictures on mouseover. So far what I have will randomly generate pictures to the page, however it just creates a new image to the page and doesn't replace the original image. Here is what I have. Also, I am trying to avoid jquery. (slicedImg_02, slicedImg_03, etc.)
HTML:
<body>
<div >
<img onmouseover="imgSwitch()" src="slicedImg_01.gif" height="50" width="50" id = "pic">
</img>
</div>
</body>
JS:
function imgSwitch(){
var img = new Array("slicedImg_01.gif", "slicedImg_02.gif", "slicedImg_03.gif", "slicedImg_04.gif", "slicedImg_05.gif", "slicedImg_06.gif");
var i;
//var pic = ""
for (i = 0; i < 7; i++)
var rand = img[Math.floor(Math.random() * img.length)];
var image = document.getElementById("pic").src
image = new Image();
image.src = rand;
document.body.appendChild(image);
What I don't understand is the line creating a new image image = new Image();. The code below should replace the current image with the randomly selected new image:
function imgSwitch(){
var img = new Array("1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "6.jpg");
var rand = img[Math.floor(Math.random() * img.length)];
document.getElementById("pic").src = rand;
}
Note the image names need to be replaced with yours.

Javascript image slideshow works locally, but not when hosted

Looks like you guys are my go to help for javascript. I have a slideshow that works perfectly when I load the local copy of my webpage. However it does not work when I load the actual page, hosted on GoDaddy. The first image shows, but is just static. Console shows no errors. Once again, any and all help is greatly appreciated.
<div class="auto-style1" style="width: 226px; height: 179px">
<script language="javascript" type="text/javascript">
var i = 0; var path = new Array();
// LIST OF IMAGES
path[0] = "images/image_1.png";
path[1] = "images/image_2.png";
path[2] = "images/image_3.png";
path[3] = "images/image_4.png";
path[4] = "images/image_5.png";
path[5] = "images/image_6.png";
function swapImage()
{
document.slide.src = path[i];
if(i < path.length - 1) i++;
else i = 0;
setTimeout("swapImage()",3000);
}
window.onload=swapImage;
</script>
<img alt="" name="slide" height="140" src="images/image_1.png" width="224" class="auto-style2" />
</div>
You need to have "/" in front of your folder name.
Give path as
path[0] = "/images/image_1.png";
path[1] = "/images/image_2.png";
path[2] = "/images/image_3.png";
path[3] = "/images/image_4.png";
path[4] = "/images/image_5.png";
path[5] = "/images/image_6.png";
2 things.
check your folder Case. In Unix image != Image
check the folder permission, folder should be access-able by all.
I couldn't get your code working. Try this instead:
Working demo
var i = 0; var path = new Array();
// LIST OF IMAGES
path[0] = "images/image_1.png";
path[1] = "images/image_2.png";
path[2] = "images/image_3.png";
path[3] = "images/image_4.png";
path[4] = "images/image_5.png";
path[5] = "images/image_6.png";
function swapImage()
{
var img = document.getElementById("slide");
img.src = path[i];
i++;
if(i >= path.length){
i = 0;
}
setTimeout(function() { swapImage() }, 3000);
}
window.onload=swapImage();

Simple script doesn't run

I have five images in a folder of my computer and I'm trying to create a script that display an image on the screen and when I click a button the image changes.
The javaScript code:
function cambiaimagen()
{
var i=1;
var direcciones = new
Array("imagen1.jpg","imagen2.jpg","imagen3.jpg","imagen4.jpg","imagen5.jpg");
var vusr = document.getElementById('imgs').value;
document.getElementById('imgs').innerHTML = vusr;
}
The HTML code:
<div id="contenedor">
<div id="img">
<img id="imgs" src="imagen1.jpg"/>
</div>
<button type="button">Anterior</button>
<button type="button" onclick = 'cambiaimagen()'>Siguiente</button>
</div>
When I run the script I watch the image 1 and the buttons. But when I click Siguiente button I don't watch the following image of array direcciones.
How can I watch it?
Thanks.
Replace your previous JavaScript code with this:
var cnt = 1;
var direcciones = new Array("imagen1.jpg","imagen2.jpg","imagen3.jpg","imagen4.jpg","imagen5.jpg");
function cambiaimagen(){
if(cnt != direcciones.length - 1){
cnt++;
}else{
cnt = 1;
}
document.getElementById('imgs').src = direcciones[cnt];
}
If the image names are in sequential number order (as they are in your example), you could use the following instead:
var cnt = 1;
var imgCnt = 5;
function cambiaimagen(){
if(cnt != imgCnt){
cnt++;
}else{
cnt = 1;
}
document.getElementById('imgs').src = "imagen" + cnt + "2.jpg";
}
Which I believe is a better method because there is no array with repetitive contents.
var direcciones = ["imagen1.jpg","imagen2.jpg","imagen3.jpg","imagen4.jpg","imagen5.jpg"];
var cnt = 0;
function cambiaimagen(){
document.getElementById("imgs").src = direcciones[(++cnt)%direcciones.length];
}

Image swapping hyperlinks

I want to have some hyperlink images that keep changing after a period of time..I have used 2 arrays images and links..2 respective functions execute that change image and links respectively after 2 seconds of time..But I am getting a blank screen as output..I wrote the code as:
<html>
<head>
<title> New Document </title>
</head>
<body>
<img id="img" width="1300" height="200"/>
<link id="link" >
<script type="text/javascript">
var x=0;
var y=0;
var images = new Array();
var links = new Array();
images[0] = "D:\images\31.jpg";
images[1] = "D:\images\32.jpg";
links[0] = "https://www.google.co.in" ;
links[1] = "https://www.facebook.com" ;
function changeImage()
{
document.getElementById("img").src=images[x];
x = (x + 1) % images.length;
}
function changeLinks()
{
document.getElementById("link").href=links[y];
y = (y + 1) % links.length;
}
window.onload = function() {
changeImage();
setInterval(changeImage,2000);
}
window.onload = function() {
changeLinks();
setInterval(changeLinks,2000);
}
</script>
</body>
</html>
Your problem is this:
images[0] = "D:\images\31.jpg";
images[1] = "D:\images\32.jpg";
those are supposed to be hyperlinks, not file paths! Also, the backslash is an escape char in JS, so you need to double it (\\). So try something like:
images[0] = "file:/D:/images/31.jpg";
images[1] = "file:/D:/images/32.jpg";

Categories

Resources