Develop Reference

Displaying images is not working properly in jquery

After uploading images, what I want is I want to display that image. It is working properly when the image is of .jpg extension. But when I upload pdf files its gets uploaded but it is not displaying the file.
JQUERY
function setImagesSitePlot(JsonObject) {
for (i = 0; i < JsonObject.length; i++) {
var obj = JsonObject[i].Filename;
var obj2 = "ImgSitePlotManual";
var obj3 = JsonObject[i].FileType;
var dataImageName = JsonObject[i].ImageName;
var ImgObj = parent.document.getElementById(obj2);
ImgObj.src = SharedFilePath + obj;
$(ImgObj).attr("data-imagename", dataImageName);
}
}
HTML
<img width="500" class="img-responsive" id="ImgSitePlotManual" data-imagename="" style="width: 606px;" />

You either have to use an image representing the pdf file icon that you return in your JSON string once the uploaded file is pdf.
Or you can display the pdf file in an object element:
<object data='http://website.com/nameoffolder/documentname.pdf#toolbar=1'
type='application/pdf'
width='100%'
height='700px' id='PdfSitePlotManual'>
You cannot view pdf in an image.
Make use of the fileType property you are already returning:
for (i = 0; i < JsonObject.length; i++) {
var obj = JsonObject[i].Filename;
var obj3 = JsonObject[i].FileType;
var dataImageName = JsonObject[i].ImageName;
if(obj3 == 'img')
{
var ImgObj = parent.document.getElementById("ImgSitePlotManual");
ImgObj.src = SharedFilePath + obj;
$(ImgObj).attr("data-imagename", dataImageName);
}
else if(obj3 == 'pdf')
{
var PdfObj = parent.document.getElementById("PdfSitePlotManual");
PdfObj.setAttribute('data', SharedFilePath + obj);
}
}

Add captions to very basic jquery carousel

I've seen this very simple jquery styled carousel on another thread and think it would be ideal for a project I'm doing but wondering how it could be adapted to include captions on the images?
<script language="JavaScript">
var i = 0; var path = new Array();
// LIST OF IMAGES
path[0] = "image_1.png";
path[1] = "image_2.png";
path[2] = "image_3.png";
function swapImage() { document.slide.src = path[i];
if(i < path.length - 1) i++;
else i = 0; setTimeout("swapImage()",2000);
} window.onload=swapImage;
</script>
<img height="200" name="slide" src="image_1.gif" width="400" />
Any help or suggestions without having to overhaul the carousel would be greatly appreciated!

<script language="JavaScript">
var i = 0; var path = new Array();
// LIST OF IMAGES
path[0] = {img: "image_1.png", sub: "subtitle 1"};
path[1] = {img: "image_2.png", sub: "subtitle 2"};
path[2] = {img: "image_3.png", sub: "subtitle 3"};
function swapImage() {
document.slide.src = path[i].img;
document.subtitle.innerHTML = path[i].sub;
if(i < path.length - 1) i++;
else i = 0; setTimeout("swapImage()",2000);
} window.onload=swapImage;
</script>
<img height="200" name="slide" src="image_1.gif" width="400" />
<p name="subtitle"></p>

It's very simple, sample below, also notice, that demo uses setInterval instead of setTimeout
var i = 0;
var path = new Array();
// LIST OF IMAGES
path[0] = "http://lorempixel.com/400/200/sports/1";
path[1] = "http://lorempixel.com/400/200/sports/2";
path[2] = "http://lorempixel.com/400/200/sports/3";
function swapImage() {
document.slide.src = path[i];
// for the sake of example, we show urls of pictures
document.querySelector('#slide_caption').textContent = path[i];
if (i < path.length - 1) {
i++;
} else {
i = 0;
}
}
setInterval(swapImage, 2000);
window.onload = swapImage;
<h3 id="slide_caption"></h3>
<img height="200" name="slide" width="400" />

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>

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];
}

Windows Javascript application sequence images error

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!