I've been trying to use a for loop to dynamically update divs, but there seems to be a problem. The first time I run it runs fine and chrome logs...
gallery.js:9 class length = 1
gallery.js:11 testing uniqueId-> product_1
gallery.js:13 adding uniqueID product_1 to class
gallery.js:15 j is -->0
gallery.js:17 updated n.o of images in the class to 1
but the second time I run it something goes wrong...
gallery.js:9 class length = 2
gallery.js:11 testing uniqueId-> product_2
gallery.js:13 adding uniqueID product_2 to class
gallery.js:15 j is -->0
gallery.js:13 adding uniqueID product_2 to class
gallery.js:15 j is -->1
gallery.js:17 updated n.o of images in the class to 2
As you can see line 13-15 repeat and somehow, that names all the divs the same, e.g from product_0 to product_1...etc..
Heres the code:
var clss = document.getElementsByClassName('thumbnail');
var clssLength = clss.length;
console.log('class length = ' + clssLength);
var uniqueId = "product_" + clssLength;
console.log('testing uniqueId-> ' + uniqueId);
for (var j = 0; j < clss.length; j++) {
clss[j].setAttribute('id', uniqueId);
console.log('j is -->' + j);
}
Thanks in advance
As I was saying, I should've omitted the for loop (not necessary)...here's the actual code, I wanted to dynamically give upload previews unique IDs.
function updateImageId () {
var clss = document.getElementsByClassName('thumbnail');
var clssLength = clss.length;
var idFix = clssLength - 1;
console.log('class length = ' + clssLength);
var uniqueId = "product_" + clssLength;
console.log('testing uniqueId-> ' + uniqueId);
console.log('adding uniqueID '+uniqueId+' to class');
clss[idFix].setAttribute('id', uniqueId);
console.log('updated n.o of images in the class to ' + clssLength);
}
function previewImage(file) {
var galleryId = "gallery";
var gallery = document.getElementById(galleryId);
var imageType = /image.*/;
if (!file.type.match(imageType)) {
throw "File Type must be an image";
}
var thumb = document.createElement("div");
thumb.classList.add('thumbnail');
var img = document.createElement("img");
img.file = file;
thumb.appendChild(img);
gallery.appendChild(thumb);
// Using FileReader to display the image content
var reader = new FileReader()
reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
reader.readAsDataURL(file);
}
var uploadfiles = document.querySelector('#fileinput');
uploadfiles.addEventListener('change', function () {
var files = this.files;
for(var i=0; i<files.length; i++){
previewImage(this.files[i]);
setTimeout(updateImageId, 500);
}
}, false);
and html:
<head>
<meta charset="UTF-8">
<title>Preview images</title>
<style>
#gallery .thumbnail{
width:150px;
height: 150px;
float:left;
margin:2px;
}
#gallery .thumbnail img{
width:150px;
height
</style>
</head>
<body>
<h2>Upload images ...</h2>
<input type="file" id="fileinput" multiple="multiple" accept="image/*" />
<div id="gallery">
<!--div class = "thumbnail" id='product_1' will appear-->
</div>
</body>
Related
var toPush = []
for(var i = 1; i <= myVariable; i++){
var variable1 = document.getElementById('q' + i).value;
var var2 = document.getElementById(i + 'x').value;
var var3 = document.getElementById(i + 'y').value;
var var4 = document.getElementById(i + 'z').value;
var var5 = document.getElementById(i + 'd1').value;
var var6 = document.getElementById('xy' + i).value;
var file = document.getElementById("fileup" + i);
var twofour = [var2, var3, var4, var5];
let reader = new FileReader();
reader.readAsDataURL(file.files[0]);
reader.onload = function () {
pictureURL = reader.result;
};
reader.onerror = function (error) {
console.log('Error: ', error);
};
toPush.push({"variable1": variable1, "twofour": twofour, "pictureURL": pictureURL}
}
The application can add X many inputs by appending them do div. When it comes to pushing the data, I want to have the file input, which is the only image input, be read as DataURL, so it can show be used as a source to an image preview. I don't know if it is because of the iteration, but the pictureURL variable pushes as empty: in the database I got "pictureURL": "".
Is there any way around it?
Thank you in advance.
There are multiple issues with this code. The reason that you're not receiving the pictureUrl is because you're reading it before it's ready.
FileReader reads the file asynchronously. It provides us a callback onload that is executed when it has read the file. We get the content of the file as reader.result only when this callback is executed. You have to rewrite your code to process the content of the file when it's either FileReader.onload or FileReader.onerror are executed.
See the working example below. I have removed unnecessary code. You can run the code by clicking on Run code snippet button at the bottom of the post
function showIcons() {
let files = document.querySelector('#files').files;
if(files.length) {
document.querySelector('#show-icons-error').textContent = "";
} else {
document.querySelector('#show-icons-error').textContent = 'No files have been selected';
}
let imageIcons = document.querySelector('#image-icons');
imageIcons.innerHTML = '';
let imageUrlArr = [];
for(var i = 0; i < files.length; i++) {
let imageIconHolder = document.createElement('img');
imageIconHolder.classList.add('image-icon');
imageIconHolder.setAttribute('image-index', i);
imageIcons.appendChild(imageIconHolder);
let file = files[i];
let reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function () {
pictureURL = reader.result;
imageIconHolder.src = pictureURL;
imageUrlArr[i] = pictureURL;//Setting ith image, not pushing.
};
reader.onerror = function (error) {
console.log(`Error loading image at index : ${i}, error: ${error}`);
imageUrlArr[i] = error;//Error for ith image
};
}
}
.image-icon {
width: 10em;
display: block;
min-height: 5em;
}
<html>
<body>
<label for="files" class="btn">Select Images</label>
<input id="files" type="file" value="Select File" accept="image/*" multiple="multiple">
<br/>
<br/>
<div>
<button id="show-icons" onclick="showIcons()">Show Icons</button>
<span id='show-icons-error' style="color: red; font-weight: bold;"></span>
</div>
<br/>
<div id="image-icons">
</div>
</body>
</html>
My question is as follows, how could I pass images that are inside an array to a div?
I've multiplied the div#imagem and I need to pass the array images to it.
But I do not know how.. Can someone help me?!
My JavaScript/JQuery
var divBoard = $("<div id='board'></div>");
$("body").after(divBoard);
var titleGame = $("<h1></h1>").text("Memory Game");
var btnReset = $("<input id='btn-reset' type='button' onclick='reset()' value='Reset'>");
$("#board").append(titleGame);
$("#board").append(btnReset);
(function (){
var images = ['img/facebook.png','img/android.png','img/chrome.png','img/firefox.png','img/html5.png','img/googleplus.png','img/twitter.png','img/windows.png','img/cross.png'];
$(window).load(function () {
$('#board').html('');
var numCards = 16;
for (var i = 1; i <= numCards; i++) {
$("#board").append("<div class='image" + i + " images'></div>") &&
$(".image" + i).clone().appendTo("#board");
}
var cards = $(".images");
for (var i = 0; i < cards.length; i++) {
var target = Math.floor(Math.random() * cards.length - 1) + 1;
var target2 = Math.floor(Math.random() * cards.length - 1) + 1;
var target3 = Math.floor(Math.random() * cards.length - 1) + 1;
}
})();
app.start();
});
My HTML
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>JavaScript Memory Game</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script charset="utf8">
var app = { nrComponents:0 };
app.getComponent = function(name) {
if (!app[name]) {
app[name] = {};
app[app.nrComponents++] = name;
}
return app[name];
};
</script>
<script src="script.js" charset="utf8"></script>
</body>
</html>
Here are critical 2 problems I listed. Some line in your code seems not neccecery and hard to debug for it. I would suggest to simplify your code for better debugging.Hope it helps..
$("body").after(divTabuleiro); I think this will insert content after 'body' instead of putting 'divTabuleiro' inside the 'body'.
$("#tabuleiro").append(""); should have tag inside for insert images.
// Create a start function and move you initial code here....
app.start = function(){
var imagens = [
'https://images-na.ssl-images-amazon.com/images/G/01/img15/pet-products/small-tiles/23695_pets_vertical_store_dogs_small_tile_8._CB312176604_.jpg',
'http://www.pressunion.org/wp-content/uploads/2016/11/1-2.jpg',
'http://www.feixiubook.com/wp-content/uploads/2016/06/01-25.jpg'
];
var divTabuleiro = $("<div id='tabuleiro'></div>");
$("body").append(divTabuleiro);
var titulo = $("<h1></h1>").text("Jogo da Memória");
var btnReset = $("<input id='btn-reset' type='button' onclick='reset()' value='Reset'>");
$("#tabuleiro").append(titulo);
$("#tabuleiro").append(btnReset);
$('#tabuleiro').html('');
var numCards = 3;
for (var i = 0; i < numCards; i++) {
var img = imagens[i];
$("#tabuleiro").append("<div class='my-image-" + i + " my-image'><img src='" + img + "'></div>") && $(".my-image-" + i).clone().appendTo("#tabuleiro");
}
// randomize cards in stack
var cards = $(".my-image");
for (var i = 0; i < cards.length; i++) {
var target = Math.floor(Math.random() * cards.length - 1) + 1;
var target2 = Math.floor(Math.random() * cards.length - 1) + 1;
var target3 = Math.floor(Math.random() * cards.length - 1) + 1;
cards.eq(target).before(cards.eq(target2)).before(cards.eq(target3));
}
};
// Maybe create another function
app.reset = function(){
};
$(window).ready(function() {
// Because you have created a start function above. you can call it when document ready
app.start();
});
.my-image {
width: 200px;
height: 200px;
overflow: hidden;
float: left;
}
.my-image img {
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
// Create a namespace of app
var app = { nrComponents:0 };
// Add a function 'getComponent' in to it
app.getComponent = function(name) {
if (!app[name]) {
app[name] = {};
app[app.nrComponents++] = name;
}
return app[name];
};
// So There is no start() function inside......
// we can add start function later..
</script>
Hm.. I somehow don't understand your exact request, but for making images based on an array you can use this as a guide :
var imagens = ['img/facebook.png','img/android.png','img/chrome.png','img/firefox.png','img/html5.png','img/googleplus.png','img/twitter.png','img/windows.png','img/cross.png'];
$.each(imagens,function(index,imageSrc){
$("Parent Element").append('<img src="'+imageSrc+'" />');
});
hope it helps.
I am trying to have a function which has functions that do the following.
One function to store the files i get with input into the parent functions loadedimages array(loadimages).
One function to show those files in the correct component(showLoadedImages).
And one function to make the correct img file appear on the correct component.
The last function is what i want it to be like(it does not work).
The other two seem ok.
The problem i have is how to make the last function work while using the loadedimages array. You can change what i store in the array , i wouldnt mind.
Here is the JS code:
function imgviewer() {
"use strict";
var loadedimages = [];
var lidivs = [];
function loadimages() {
var files = document.getElementById("images").files;
for (var i = 0; i < files.length; i++) {
var file = files[i];
if (!file.name.match(/\.(jpg|jpeg|png|gif)$/)) {
alert('THERE IS NO IMAGE IN THIS DIRECTORY.');
break;
}
loadedimages.push(file);
}
}
function showLoadedImages(elem) {
loadimages();
var ld = loadedimages;
//var files = getLoadedImages(); //filelist obj
for (var i = 0; i < ld.length; i++) {
var file = ld[i];
var reader = new FileReader();
reader.onload = (function(file) {
return function(e) {
// Render thumbnail.
var span = document.createElement(
'span');
span.innerHTML = [
'<img class="tile" src="',
e.target.result,
'" title="', encodeURI(
file.name), '">'
].join('');
document.getElementById(elem).insertBefore(
span, null);
lidivs.push(span);
};
})(file);
// Read in the image file as a data URL.
reader.readAsDataURL(file);
}
}
function showImage(index, elem) {
var chosenFile = loadedimages[index];
document.getElementById(elem).src = chosenFile;
}
document.getElementById('images').addEventListener('change', function(){
showLoadedImages("main");
}, false);
}
And some HTML
<form name="uploadForm">
<input id="images" type="file" webkitdirectory mozdirectory directory name="myFiles"
multiple/>
<span id="list"></span>
</form>
<div id="sidebar1"><img id="willchange" src="images/railaythailand.jpg" width="1200" height="832" alt=""/></div>
<div id="main"></div>
When i call showLoadedImages("main") the images are shown in main div. I want to be able to click those images so that they appear on "willchange" .
This does what you asked for. There are a number of other issues with your code that you might want to address, starting with the images are not thumbnails at all (and shrunken images take just as long to load as the original), but perhaps I'm missing something.
"use strict";
var loadedimages = [];
var lidivs = [];
function loadimages() {
var files = document.getElementById("images").files;
for (var i = 0; i < files.length; i++) {
var file = files[i];
if (!file.name.match(/\.(jpg|jpeg|png|gif)$/)) {
continue;
}
loadedimages.push(file);
}
loadedimages.length || alert('THERE IS NO IMAGE IN THIS DIRECTORY.');
}
function showLoadedImages(elem) {
loadimages();
var ld = loadedimages;
//var files = getLoadedImages(); //filelist obj
for (var i = 0; i < ld.length; i++) {
var file = ld[i];
var reader = new FileReader();
reader.onload = (function(file) {
return function(e) {
// Render thumbnail.
var span = document.createElement(
'span');
span.innerHTML = [
'<img data-index="',
lidivs.length,
'" class="tile" src="',
e.target.result,
'" title="', encodeURI(
file.name), '">'
].join('');
span.addEventListener("click", foo );
document.getElementById(elem).insertBefore(
span, null);
lidivs.push(span);
};
})(file);
// Read in the image file as a data URL.
reader.readAsDataURL(file);
}
}
function showImage(index, elem) {
document.getElementById(elem).src = lidivs[index].children[0].src;
}
function foo(event) {
showImage(event.target.dataset.index, "willchange");
}
function show() {
showLoadedImages("list");
}
function init() {
document.getElementById("images").addEventListener("change", show, false);
}
document.addEventListener( "DOMContentLoaded", init, false );
<body>
<form name="uploadForm">
<input id="images" type="file" webkitdirectory mozdirectory directory name="myFiles"
multiple/>
<span id="list"></span>
</form>
<div id="sidebar1"><img id="willchange" src="images/railaythailand.jpg" width="1200" height="832" alt=""/></div>
</body>
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>
I'm new to JavaScript.
I've already used Java and C# (and a bit of c++)
So far..
I'm using JavaScript to load pictures from a directory into an Array. After this I want to place this pictures on my page.
This works already.
The next step was to add a fullscreen function, to load the picture in fullscreen resolution.
var myfiles;
var pfad = "./bilder/" //directory of the images
var index = 0;
myfiles = new Array(); //String array with the names of the pictures
myfiles[0] = "01.png";
myfiles[1] = "01.png"; //usw.
myfiles[2] = "03.png";
myfiles[3] = "02.png";
function fullScreen(bild) {
document.write('<img src="'+ pfad + bild + '" border="0" width="100%">');
alert (bild);
}
function start() {
for(var i=0; i < myfiles.length; i++) {
pics[i].src = pfad + myfiles[i];
string = myfiles[i];
document.write('<img onclick="fullScreen(string);" src="'+ pfad + myfiles[i] + '" border="0" height="150px" >');
}
}
This code only loads the last picture of my array..
The function fullScreen() seems to take only the last value of string.
The HTML part
<script type="text/javascript">
start();
</script>
It is only evaluating string when it is clicked, when the loop has already finished.
You'll need to pass it directly:
for(var i=0; i < myfiles.length; i++) {
pics[i].src = pfad + myfiles[i];
string = myfiles[i];
document.write('<img onclick="fullScreen(\''+string+'\');" src="'+ pfad + myfiles[i] + '" border="0" height="150px" >');
}
SOLUTION
JS
var myfiles = [];
var pfad = "http://placehold.it/350x250/&text=";
var index = 0;
myfiles[0] = "Image 0";
myfiles[1] = "Image 1";
myfiles[2] = "Image 2";
myfiles[3] = "Image 3";
function fullscreen(){
if(this.className == 'fullscreen') this.className = '';
else this.className = 'fullscreen';
}
function createImage(src){
var img = document.createElement('img');
img.src = pfad + src;
img.addEventListener('click', fullscreen);
document.body.appendChild(img);
return img;
}
function start(){
for(var i=0; i < myfiles.length; i++) {
var img = createImage(myfiles[i]);
}
}
start();
CSS
html, body, .fullscreen {
height: 100%;
}