Using jQuery to display text information about multiple images
up vote
1
down vote
favorite
I'm creating a self-contained sort of local web app using jQuery that
1) gets a list of image filenames from the user (assuming the images are all in the same folder as the .html file)
2) for each image, displays a thumbnail, the image file name, and the image's actual dimensions using image.naturalWidth and image.naturalHeight.
I managed to get it pretty much working the way I want - except that for each image displayed, the accompanying text info gets displayed after its respective the same number of times as the total number of images - i.e., the text is there once if there's a total of one images, twice if there's a total of 2 images, three times if there's 3 images, etc.
I think it has something to do with the use of $('img').each but I can't figure out how to structure it differently or even how to phrase a search for an answer.
I tried doing a JSfiddle but I can't get images to load from any remote servers for some reason. But that's fine for my purposes since I usually want to get a list of image dimensions locally.
The incremental number IDs for each image are sort of a vestigial part of an older version of this, but I'd like to keep it around in case I can think of another use for it - unless that's what's causing the problem.
Web boilerplate included just for context...
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
img {
width: 250px;
}
.inner {
font-size: 12px;
}
</style>
</head>
<body>
<textarea textarea id="image_list" rows="10" cols="70" /></textarea>
<input type='button' value='add to list' id='add' />
<table>
<div class="inner">
<ul id='list'></ul>
</div>
</table>
<script src="vendor/jquery.js"></script>
<script>
$(function() {
/* increase ID by 1 for each iteration */
var n = 0;
function increment() {
n++;
return n;
}
/* add image thumbnail and dimensions on click */
document.getElementById("add").onclick = function() {
var arrayOfLines = $('#image_list').val().split('n');
$.each(arrayOfLines, function(index, item) {
var text = arrayOfLines[n];
increment();
/* var text = arrayOfLines.value; //.value gets input values */
//Now construct a quick list element
var li = '<li class="test" id="' + n + '">' + '<img src="' + text + '">' + '</li>';
$('#list').append(li);
});
$('img').load(function() {
$('img').each(function() {
var image = this;
var theWidth = image.naturalWidth;
var theHeight = image.naturalHeight;
$(this).parent().append(' - ' + $(this).attr("src") + ' - ' + theWidth + 'x' + theHeight + ' ');
});
});
};
});
</script>
</body>
</html>
javascript jquery
asked Nov 21 at 22:40
moai-kun
62
New contributor
moai-kun is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
up vote
1
down vote
favorite
I'm creating a self-contained sort of local web app using jQuery that
1) gets a list of image filenames from the user (assuming the images are all in the same folder as the .html file)
2) for each image, displays a thumbnail, the image file name, and the image's actual dimensions using image.naturalWidth and image.naturalHeight.
I managed to get it pretty much working the way I want - except that for each image displayed, the accompanying text info gets displayed after its respective the same number of times as the total number of images - i.e., the text is there once if there's a total of one images, twice if there's a total of 2 images, three times if there's 3 images, etc.
I think it has something to do with the use of $('img').each but I can't figure out how to structure it differently or even how to phrase a search for an answer.
I tried doing a JSfiddle but I can't get images to load from any remote servers for some reason. But that's fine for my purposes since I usually want to get a list of image dimensions locally.
The incremental number IDs for each image are sort of a vestigial part of an older version of this, but I'd like to keep it around in case I can think of another use for it - unless that's what's causing the problem.
Web boilerplate included just for context...
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
img {
width: 250px;
}
.inner {
font-size: 12px;
}
</style>
</head>
<body>
<textarea textarea id="image_list" rows="10" cols="70" /></textarea>
<input type='button' value='add to list' id='add' />
<table>
<div class="inner">
<ul id='list'></ul>
</div>
</table>
<script src="vendor/jquery.js"></script>
<script>
$(function() {
/* increase ID by 1 for each iteration */
var n = 0;
function increment() {
n++;
return n;
}
/* add image thumbnail and dimensions on click */
document.getElementById("add").onclick = function() {
var arrayOfLines = $('#image_list').val().split('n');
$.each(arrayOfLines, function(index, item) {
var text = arrayOfLines[n];
increment();
/* var text = arrayOfLines.value; //.value gets input values */
//Now construct a quick list element
var li = '<li class="test" id="' + n + '">' + '<img src="' + text + '">' + '</li>';
$('#list').append(li);
});
$('img').load(function() {
$('img').each(function() {
var image = this;
var theWidth = image.naturalWidth;
var theHeight = image.naturalHeight;
$(this).parent().append(' - ' + $(this).attr("src") + ' - ' + theWidth + 'x' + theHeight + ' ');
});
});
};
});
</script>
</body>
</html>
javascript jquery
asked Nov 21 at 22:40
moai-kun
62
New contributor
moai-kun is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
1
Remove the$('img').eachcompletely as you are already in theloadevent which is fired for each image.
– Gabriele Petrioli
Nov 21 at 22:56
Brilliant! That did the trick. Thank you.
– moai-kun
Nov 21 at 22:59
add a comment |
up vote
1
down vote
favorite
up vote
1
down vote
favorite
I'm creating a self-contained sort of local web app using jQuery that
1) gets a list of image filenames from the user (assuming the images are all in the same folder as the .html file)
2) for each image, displays a thumbnail, the image file name, and the image's actual dimensions using image.naturalWidth and image.naturalHeight.
I managed to get it pretty much working the way I want - except that for each image displayed, the accompanying text info gets displayed after its respective the same number of times as the total number of images - i.e., the text is there once if there's a total of one images, twice if there's a total of 2 images, three times if there's 3 images, etc.
I think it has something to do with the use of $('img').each but I can't figure out how to structure it differently or even how to phrase a search for an answer.
I tried doing a JSfiddle but I can't get images to load from any remote servers for some reason. But that's fine for my purposes since I usually want to get a list of image dimensions locally.
The incremental number IDs for each image are sort of a vestigial part of an older version of this, but I'd like to keep it around in case I can think of another use for it - unless that's what's causing the problem.
Web boilerplate included just for context...
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
img {
width: 250px;
}
.inner {
font-size: 12px;
}
</style>
</head>
<body>
<textarea textarea id="image_list" rows="10" cols="70" /></textarea>
<input type='button' value='add to list' id='add' />
<table>
<div class="inner">
<ul id='list'></ul>
</div>
</table>
<script src="vendor/jquery.js"></script>
<script>
$(function() {
/* increase ID by 1 for each iteration */
var n = 0;
function increment() {
n++;
return n;
}
/* add image thumbnail and dimensions on click */
document.getElementById("add").onclick = function() {
var arrayOfLines = $('#image_list').val().split('n');
$.each(arrayOfLines, function(index, item) {
var text = arrayOfLines[n];
increment();
/* var text = arrayOfLines.value; //.value gets input values */
//Now construct a quick list element
var li = '<li class="test" id="' + n + '">' + '<img src="' + text + '">' + '</li>';
$('#list').append(li);
});
$('img').load(function() {
$('img').each(function() {
var image = this;
var theWidth = image.naturalWidth;
var theHeight = image.naturalHeight;
$(this).parent().append(' - ' + $(this).attr("src") + ' - ' + theWidth + 'x' + theHeight + ' ');
});
});
};
});
</script>
</body>
</html>
javascript jquery
asked Nov 21 at 22:40
moai-kun
62
New contributor
moai-kun is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
I'm creating a self-contained sort of local web app using jQuery that
1) gets a list of image filenames from the user (assuming the images are all in the same folder as the .html file)
2) for each image, displays a thumbnail, the image file name, and the image's actual dimensions using image.naturalWidth and image.naturalHeight.
I managed to get it pretty much working the way I want - except that for each image displayed, the accompanying text info gets displayed after its respective the same number of times as the total number of images - i.e., the text is there once if there's a total of one images, twice if there's a total of 2 images, three times if there's 3 images, etc.
I think it has something to do with the use of $('img').each but I can't figure out how to structure it differently or even how to phrase a search for an answer.
I tried doing a JSfiddle but I can't get images to load from any remote servers for some reason. But that's fine for my purposes since I usually want to get a list of image dimensions locally.
The incremental number IDs for each image are sort of a vestigial part of an older version of this, but I'd like to keep it around in case I can think of another use for it - unless that's what's causing the problem.
Web boilerplate included just for context...
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
img {
width: 250px;
}
.inner {
font-size: 12px;
}
</style>
</head>
<body>
<textarea textarea id="image_list" rows="10" cols="70" /></textarea>
<input type='button' value='add to list' id='add' />
<table>
<div class="inner">
<ul id='list'></ul>
</div>
</table>
<script src="vendor/jquery.js"></script>
<script>
$(function() {
/* increase ID by 1 for each iteration */
var n = 0;
function increment() {
n++;
return n;
}
/* add image thumbnail and dimensions on click */
document.getElementById("add").onclick = function() {
var arrayOfLines = $('#image_list').val().split('n');
$.each(arrayOfLines, function(index, item) {
var text = arrayOfLines[n];
increment();
/* var text = arrayOfLines.value; //.value gets input values */
//Now construct a quick list element
var li = '<li class="test" id="' + n + '">' + '<img src="' + text + '">' + '</li>';
$('#list').append(li);
});
$('img').load(function() {
$('img').each(function() {
var image = this;
var theWidth = image.naturalWidth;
var theHeight = image.naturalHeight;
$(this).parent().append(' - ' + $(this).attr("src") + ' - ' + theWidth + 'x' + theHeight + ' ');
});
});
};
});
</script>
</body>
</html>
javascript jquery
javascript jquery
asked Nov 21 at 22:40
moai-kun
62
New contributor
moai-kun is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
asked Nov 21 at 22:40
moai-kun
62
New contributor
moai-kun is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
edited Nov 21 at 22:58
asked Nov 21 at 22:40
moai-kun
62
New contributor
moai-kun is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
asked Nov 21 at 22:40
moai-kun
62
asked Nov 21 at 22:40
moai-kun
62
62
New contributor
moai-kun is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
New contributor
moai-kun is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
moai-kun is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
1
Remove the$('img').eachcompletely as you are already in theloadevent which is fired for each image.
– Gabriele Petrioli
Nov 21 at 22:56
Brilliant! That did the trick. Thank you.
– moai-kun
Nov 21 at 22:59
add a comment |
1
Remove the$('img').eachcompletely as you are already in theloadevent which is fired for each image.
– Gabriele Petrioli
Nov 21 at 22:56
Brilliant! That did the trick. Thank you.
– moai-kun
Nov 21 at 22:59
1
1
Remove the
$('img').each completely as you are already in the load event which is fired for each image.– Gabriele Petrioli
Nov 21 at 22:56
Remove the
$('img').each completely as you are already in the load event which is fired for each image.– Gabriele Petrioli
Nov 21 at 22:56
Brilliant! That did the trick. Thank you.
– moai-kun
Nov 21 at 22:59
Brilliant! That did the trick. Thank you.
– moai-kun
Nov 21 at 22:59
add a comment |
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
moai-kun is a new contributor. Be nice, and check out our Code of Conduct.
moai-kun is a new contributor. Be nice, and check out our Code of Conduct.
moai-kun is a new contributor. Be nice, and check out our Code of Conduct.
moai-kun is a new contributor. Be nice, and check out our Code of Conduct.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53421432%2fusing-jquery-to-display-text-information-about-multiple-images%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
Remove the
$('img').eachcompletely as you are already in theloadevent which is fired for each image.– Gabriele Petrioli
Nov 21 at 22:56
Brilliant! That did the trick. Thank you.
– moai-kun
Nov 21 at 22:59