Okay so the script I have so far works great. It does the job I originally intended. However, I want to take this script to the next level.
What my script does:
I enter in URL's for images from around the web into the text area. I click the submit button named "Show Images" And thumbnails of all the images show up on that page. If I click an image it opens up in a new webpage. That's what I originally wanted. But now I want to adapt.
Which is this...
<html>
<head><Title> EffDub Image Loader</title>
<!--An EffDub Creation In Association With NavNet!
Please do not steal
Completion date tested working 10/07/2010
Any bugs report to
[email protected]>
</head>
<style>
input {background-color: red; }
</style>
<script type="text/javascript">
function showImages()
{
var urlListTxt = document.getElementById('urls').value;
var urlListAry = urlListTxt.split('\n');
//Process inpur for valid urls
var validURLsAry = new Array();
for(var idx=0; idx<urlListAry.length; idx++)
{
if(urlListAry[idx]!='') //Add condition to test for valid urls
{
validURLsAry[validURLsAry.length] = urlListAry[idx];
}
}
//Create the output
var imgListOutput = '';
var url;
for(var idx=0; idx<validURLsAry.length; idx++)
//change preview size
{
url = validURLsAry[idx];
imgListOutput += '<a href="'+url+'" target="_blank"><img src="'+url+'" height="150" width="150" /></a>';
}
document.getElementById('imgListDiv').innerHTML = imgListOutput;
}
</script>
<body>
Paste images into the text box<br>
When images load, click on an image to see the image full size in a new tab.<br>
<textarea name="urls" id="urls" style="height:150px;width:600px;">
</textarea>
<br />
<button onclick="showImages();">Show Images</button>
<br /><br />
<div id="imgListDiv"></div>
</body>
</html>
I would like a checkbox to appear under each image. and a Select all/none checkbox with a download button. Then the selected images download to the specified folder. This is always run locally, therefore I'm hoping javascript will work. I can run this page from a server but I would rather not. As the images are already on the web, and its only the page that runs local, is it possible to achieve this?
If this how. I have no idea, im wanting to advance further that my knowledge will let me.