freddyw Posted July 7, 2010 Share Posted July 7, 2010 Is it possible to create a textbox where you can insert urls of images (unlimited, so there's no maximum amount of images) then click submit and you have a webpage full of thumbnails that are clickable to make full size? Any help on where to start would be appreciated. Quote Link to comment Share on other sites More sharing options...
jug Posted July 7, 2010 Share Posted July 7, 2010 Not quite sure what your are trying to achieve generally, but yeh its possible. Dont think a textbox is the best input element for this but if you must use it, then each url needs to be separated by a delimiting character, like a comma and then when the button is submitted, split the textbox string using the delimiter into an array. Now with the array, where each item should be a different url of an image, loop through these items and display them on the page. I know code examples may help more here but this hopefully should give you a start. Best jug Quote Link to comment Share on other sites More sharing options...
Psycho Posted July 7, 2010 Share Posted July 7, 2010 Sure, but there is no one place to start and it will require more than just javascript. If you want thumbnails to be created then you will need some back-end functionality (e.g. PHP) to create the thumbnails. You need to break down all the pieces of functionality and then tackle each one separately. Here is a quick list as I see it. 1. Create form for user input 2. Processing page needs to parse the URLs into separate strings 3. Next, use PHP to attempt to "get" the images. Error handling in case the URL doesn't exist or is not an image 4. Use PHP to create a thumb of the image. 5. Using the list of URLs and thumbs create the HTML output page. Quote Link to comment Share on other sites More sharing options...
freddyw Posted July 8, 2010 Author Share Posted July 8, 2010 Why does it have to be PHP. couldn't i use JS and define the size of the images to be shown. If it has to be PHP thats fine. When the user enters the images is there an easy way to load the images into an array. The images entered will all be on a separate line. Also the images don't need to be uploaded to the server. Quote Link to comment Share on other sites More sharing options...
Psycho Posted July 8, 2010 Share Posted July 8, 2010 Why does it have to be PHP. couldn't i use JS and define the size of the images to be shown. If it has to be PHP thats fine. It doesn't have to be PHP, but as I clearly stated you will need server-side code to create thumbnails. JavaScript can't do that. You could, however, use JavaScript to simply display the images on screen but at a much smaller percentage than the original. But, that can put a load on the user's browser since the entire full-size image is being loaded into memory regardless of what size you choose to display it. You also stated you wanted the user to submit the page. As soon as the page is loaded, JavaScript has no knowledge of what was submitted. That is typically what a server-side language is for. There is a workaround. You could use the GET method in your form and the information the user entered will be passed in the URL. But, it will get complicated trying to extract the information from the URL using JavaScript and to url decode it so the JavaScript on the receiving page can work with it. Also, I don't think JavaScript can validate that a URL is pointing to a valid resource. If you want to do this in JS, sure it can be done, but will be more difficult and will have some issues that cannot be resolved. But, if you want to go that route, you should have a button that initiates the JS function and NOT submit the form. Then use the JS to create the images on the same page. Quote Link to comment Share on other sites More sharing options...
Psycho Posted July 8, 2010 Share Posted July 8, 2010 Here is a very rough JS only solution. The URLs must be separated by at least one line break. There could be better functionality to extract the URLs but I'm not going to spend the time. Also, there is really no validation of the URLs except to exclude blank lines. Again, this should have some more validation. If this is close to what you want then you need to look at each requirement and tackle them one by one. <html> <head> <style> input {background-color: red; } </style> <script type="text/javascript"> function showImages() { var urlListTxt = document.getElementById('urls').value; var urlListAry = urlListTxt.split('\r\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++) { url = validURLsAry[idx]; imgListOutput += '<a href="'+url+'" target="_blank"><img src="'+url+'" height="50" width="50" /></a><br /><br />'; } document.getElementById('imgListDiv').innerHTML = imgListOutput; } </script> </head> <body> <textarea name="urls" id="urls" style="height:150px;width:600px;"> http://irapuato.files.wordpress.com/2009/11/cancuun.jpg http://irapuato.files.wordpress.com/2009/11/cancun.jpg http://www.mexicotravelnet.com/cancun/Cancun%20Photo3.jpg </textarea> <br /> <button onclick="showImages();">Show Images</button> <br /><br /> <div id="imgListDiv"></div> </body> </html> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.