I have the following code and it is not working. I left comments in to explain what I need and how it is not working. Basically I want to know how to use array and img to load pictures. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Album</title> <script type="text/javascript"> function albumload() { var album = new Array(); var i; var pages = 2; for (i = 0; i <pages; i++) { //alert(i); album = new Image(); album.src = "picture"+i+".jpg"; // I have 2 pictures named picture0.jpg and picture1.jpg // I am hoping to show the pictures on screen /* If I use the following code then the picture shows up on screen document.write("<img src='picture1.jpg'/>"); */ /* If I use the following code then the debugger said the following code document.images.. is null or not an object */ /* How will I accomplish what I need to do with an array and variables? */ document.images.src = album.src ; document.write("<img src='images'/>"); } } </script> </head> <body onload="albumload()"> </body> </html>
When you do this: document.write("<img src='images[i]'/>"); Code (markup): you're stating that the image src is images, and not the content of the array. Also this statement: document.images[i].src = album[i].src ; Code (markup): it's not needed. Neither you need the image constructor. Here's a fix to your code: function albumload() { var album = new Array(); var i; var pages = 2; for (i = 0; i <pages; i++) { album[i] = "picture"+i+".jpg"; document.write("<img src='" + images[i] + "'/>"); } } Code (markup):
Thank you very much. I got a new problem and I hope you or some experts can help me. Please see the code below. I commented the code which doesn't work. The same code works when it is first called but not when it called again in a different place. It said run time error, object expected in the debug. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Arai</title> <script type="text/javascript"> var album = new Array(); var i; var pages = 3; var prep = 0; var nextp = 0; function photoload() { for (i = 0; i <pages; i++) { album = "photo"+i+"\.jpg"; } } function onepage(i) { alert("start again"+i); if (i == 0 ) { //alert("first page"+i); nextp = i + 1; document.write(album+"<br/>"); document.write("<img src = 'catalog/"+album+"'>"); //the album in is the directory of catalog document.write("<FORM>"); document.write("<INPUT TYPE='button' VALUE='BACK' onClick=\"parent.location = 'index2nd.html'\">"); // the above code works document.write("<INPUT TYPE='button' VALUE='FORWARD' onClick= 'onepage(" + nextp + ")" +"'" +">"); // the above code works document.write("</FORM>"); } else if (i == 2) { //alert("last page"+i); prep = i - 1; document.write("<img src = 'catalog/"+album+"'>"); document.write("<FORM>"); document.write("<INPUT TYPE='button' VALUE='BACK' onClick= 'onepage(" + prep + ")" +"'" +">"); //the above code doesn't work document.write("</FORM>"); } else { prep = i - 1; nextp = i + 1; //alert ("prep="+prep +"nextp="+nextp); document.write(album+"<br/>"); document.write("<img src = 'catalog/"+album+"'>"); document.write("<FORM>"); document.write("<INPUT TYPE='button' VALUE='BACK' onClick= 'onepage(" + prep + ")" +"'" +">"); //the above code doesn't work document.write("<INPUT TYPE='button' VALUE='FORWARD' onClick= 'onepage(" + nextp + ")" +"'" +">"); //the above code doesn't work which is exactly same as the one in if i == 0 document.write("</FORM>"); } } function get_cat_page(i) { photoload(); onepage(i); } </script> </head> <body > <script type="text/javascript"> get_cat_page(0); </script> </body> </html>
You're doing things in a very wrong way... Please tell me exactly what you're trying to do, and I'll help you out with a better solution.
Hi, I have a catalog with pages name shoes1.jpg shoes2.jpg shoes3.jpg... jackets1.jpg, jacket2.jpg jacket3.jpg.... pants1.jpg, pants2.jpg, pants3.jpg and so on. Because we have many products I don't want to hard code each individual page name in the program. I want to show the catalog pages one by one when the customer clicks it. If you can suggest a better way, please let me know. Thanks.
If you're not worried about google and other search engine to index your site, then you can do with with javascript. If search engine indexing is a concern then you'ld be better doing it with server side code that generates plain htmll files. Search engines don't read javascript code yet. Also, if your customers have javascript disabled they won't be abble to view your products. I have a web development related blog, so, it's viewed by people who care about web development, and even though, awstats shows me that 4% of the users have javascript disabled... Imagine a website viewed by people who don't even know what html is... This is just a friendly advice, if you still want to go with the javascript solution, just tell me and I'll help you out, otherwise just tell me what server side language you use, and if it's inside my knowledge I'll help you to.
Hi, I only know html and javascript so I am limited to things I can do. I am learning PHP but don't know everything yet. I am not good at Javascript either as you can tell. If you or anybody can help me with either Javascript or PHP, I will appreciate it very much.
To make it work in a very simple way in php, and assuming that your server is PHP ready, just do the following. First and obviously, rename your page to something.php instaead of something.html. Then, where you have the call to the javascript function, in your example is this: <script type="text/javascript"> get_cat_page(0); </script> Code (markup): write something like this: <?php $pictures = 2; for ($i = 0; $i < $pictures; $i++) { echo "<img src='picture" . $i . ".jpg' />" } ?> Code (markup): And repeat this for whatever you need, like shoes or jackets, etc... Finally, I'm not seeing any use for the forms in your code, other than to serve as links. If you want to use buttons, just use something like this: <button onclick="window.location='/anotherpage.php'">Another page</button> Code (markup): But buttons suffer the same problem, search engines are not aware of these types of links, and users with javascript disabled won't see nothing. You're better using regular anchor tags, with test or images. A quick prototype of a page should look something like this (shoes.php): <html> <head> <title>Shoes page</title> </head> <body> <?php $pictures = 2; for ($i = 0; $i < $pictures; $i++) { echo "<img src='picture" . $i . ".jpg' />" } ?> <a href="jackets.php">Go to Jackets</a> <a href="pants.php">Go to Pants</a> </body> </html> Code (markup): Give it a try and see if that servers your needs.
Hi, Thanks for the PHP code. I need time to digest the PHP code. I still would like to know what is wrong with my Javascript code.
Hi, I tested the PHP and it works. But I need to modify it so it only shows one photo at a time. Let people to click either "next" or "previous" to see another photo. Not to see all the photos all at once. How would I implement this?
Hello, glad it helped. The problem with your code is more a question of what's javascript good for. Javascript is used the enhance the user experience, and add some extra functionality for a webpage, but the core of the page, it's main purpose, the information should never be dependent of javascript, for the reasons I've stated before. Also, although Javascript is a great language, at least in my humble opinion, there are some things that should be avoided as much as possible, and document.write is one of them. There are other very good ways of altering a document structure, and I'm sure you've already heard about DOM. Now, you want to display one image at a time. There are two things you can do. One of them is to have one page for each image. Using something like this (piture.php): <html> <head> <title>Shoes page</title> </head> <body> <?php $pictures = 2; if (isset($_GET['picid'])) $picId = 0; else $picId = $_GET['picid']; echo "<img src='picture" . $picId . ".jpg' />"; if ($picId > 0) echo "<a href='picture.php?picid=" . ($picId - 1) . "'>Previous</a>"; if ($picId + 1 < $pictures) echo "<a href='picture.php?picid=" . ($picId + 1) . "'>Next</a>"; ?> <a href="jackets.php">Go to Jackets</a> <a href="pants.php">Go to Pants</a> </body> </html> Code (markup): What this code does, is to check if there is any GET parameter in the HTTP request called "picid", if there is, shows the picture with that number, otherwise just shows the picture 0. Then, if the picture it's showing isn't picture 0, add a link to the previous picture, the previous link, and if the picture it's showing is not the last, add a link to the next picture. This way, the page will look the same, to users with and without javacript enabled, and will be indexed by search engines. But it adds a load/onload cycle between each picture that can be annoying, that's were Javascript is usefull. Take a look at this code: <html> <head> <title>Shoes page</title> <script src="pictures.js"></script> </head> <body> <div id="pictures"> <?php $pictures = 2; for ($i = 0; $i < $pictures; $i++) { echo "<img src='picture" . $i . ".jpg' />" } ?> </div> <a href="jackets.php">Go to Jackets</a> <a href="pants.php">Go to Pants</a> </body> </html> Code (markup): and pictures.js : function addEvent(objTarget, strEvtType, fnFunction) { if (objTarget.addEventListener) objTarget.addEventListener(strEvtType, fnFunction, true); else { if (objTarget.attachEvent) objTarget.attachEvent('on' + strEvtType, fnFunction); else objTarget['on' + strEvtType] = fnFunction; } } addEvent(window, 'load', function() { var picContainer = document.getElementById('pictures'); var pictures = picContainer.getElementsbyTagName('IMG'); var picCount = pictures.length - 1; for (var i = 1; i <= picCount; i++) { pictures[i].style.display = 'none'; } var currPic = 0; var nextButton = document.createElement('BUTTON'); var previousButton = document.createElement('BUTTON'); nextButton.innerHTML = 'Next'; previousButton.innerHTML = 'Previous'; addEvent(nextButton, 'click', function() { pictures[currPic].style.display = 'none'; ++currPic; pictures[currPic].style.display = ''; updateButtons(); }); addEvent(previousButton, 'click', function() { pictures[currPic].style.display = 'none'; --currPic; pictures[currPic].style.display = ''; updateButtons(); }); picContainer.parentNode.insertBefore(previousButton, picContainer.nextSibling); picContainer.parentNode.insertBefore(nextButton, picContainer.nextSibling); function updateButtons() { if (currPic == 0) previousButton.style.display = 'none'; else previousButton.style.display = ''; if (currPic == picCount) nextButton.style.display = 'none'; else nextButton.style.display = ''; } updateButtons(); }); Code (markup): This one is a bit hard to explain, but basically, you're creating a page with all the pictures with the php script, and once on the visitor computer, the page is transformed in a very simple slideshow with next and previous buttons. If user doe not have javascript enabled, he will see a page with all the pictures, otherwise, there's a prize, and he's abble to see the slideshow. Hope this helps.
aayybb: Try the following instead. Note the "customizations" and related comments at the top of the code. When done testing the code, delete or comment out the alert: alert(activeURL); You can have a separate page for each of your "catalogs" by changing the partial "path." <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Any Title</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript"> var maxItems = 14; // the total number of images in the set var consecItems = 5; // this is the number of digits appearing in between Previous and Next var path = "./images/shoes"; // the path & partial file name of your images, e.g., shoes1.jpg is the first image var ext = ".jpg" // the file extension of your image files, e.g., .jpeg, .gif, .png function init(){ var activeURL = ""; var endItem = ""; var remaining = ""; var nextSet = ""; var index = 0; var subjImage = document.getElementById('imgDisplay'); var nList = document.getElementById('itemLinks'); for (i=0; i<consecItems+2; i++) { var nLink = document.createElement('span'); nLink.onclick = function() { var pageList = nList.getElementsByTagName('span'); if (this.firstChild.data == "Next") { if (pageList[pageList.length-2].firstChild.data == maxItems && pageList[pageList.length-2].className == "activePage") { return false; } if (pageList[pageList.length-2].className != "activePage") { for (i=1; i<consecItems+1; i++) { if (pageList[i].className == "activePage") { pageList[i].className = "availPage"; index = i+1; } } if (pageList[index].firstChild.data == "-") { pageList[index-1].className = "activePage" return false; } pageList[index].className = "activePage"; } else { endItem = pageList[pageList.length-2].firstChild.data; remaining = maxItems - endItem; if (remaining >= consecItems) { nextSet = consecItems+1; } else { nextSet = remaining + 1; } for (i=1; i<nextSet; i++) { pageList[i].firstChild.data = Number(endItem) + i; } for (i=1; i<consecItems+1; i++) { if (pageList[i].firstChild.data <= Number(endItem)) { pageList[i].firstChild.data = "-"; } } pageList[1].className = "activePage"; pageList[pageList.length-2].className = "availPage"; } } else if (this.firstChild.data == "Previous") { if (pageList[1].firstChild.data == 1 && pageList[1].className == "activePage") { return false; } if (pageList[1].className != "activePage") { for (i=1; i<consecItems+1; i++) { if (pageList[i].className == "activePage") { pageList[i].className = "availPage"; index = i-1; } } pageList[index].className = "activePage"; } else { endItem = pageList[1].firstChild.data; remaining = endItem - 1; var nSet = ((remaining / consecItems) - 1) * consecItems; for (i=1; i<consecItems+1; i++) { pageList[i].firstChild.data = i + nSet; } pageList[1].className = "availPage"; pageList[pageList.length-2].className = "activePage"; } } else { if (this.firstChild.data == "-") { return false; } for (i=1; i<consecItems+1; i++) { if (pageList[i].className == "activePage") { pageList[i].className = "availPage"; } } this.className = "activePage"; } for (i=1; i<consecItems+1; i++) { if (pageList[i].className == "activePage") { activeURL = path + pageList[i].firstChild.data + ext; } } // comment or remove the alert when done testing the code alert(activeURL); // the following loads each selected image subjImage.src = activeURL; } nLink.className = "availPage"; var nText = document.createTextNode(i); nLink.appendChild(nText); nList.appendChild(nLink); } var nItems = nList.getElementsByTagName('span'); nItems[1].className = "activePage"; nItems[0].firstChild.data = "Previous"; nItems[nItems.length-1].firstChild.data = "Next"; // the following loads the initial image, e.g., ./images/shoes1.jpg subjImage.src = path + "1" + ext; } onload=init; </script> <style type="text/css"> body {background-color: #fffacd; margin-top: 60px;} #itemLinks {background-color :#f0fff0; font-family: "times new roman"; font-size: 12pt; border: 1px solid black; text-align: center; width: 600px; margin: auto; position: relative; top: 50px;} #imgDisplay {display: block; width: 400px; height: 300px; margin: auto;} #catalog_title{font-family: veranda; font-size: 14pt; width: 250px; text-align: center; margin-left: auto; margin-right: auto; margin-bottom: 15px;} .availPage {color: #0000ff; cursor: pointer; padding: 5px;} .activePage {color: #000000; padding: 5px; text-decoration: underline; cursor: auto;} </style> </head> <body> <div id="catalog_title">Shoes Catalog</div> <img id="imgDisplay" src="null" alt="" title=""> <div id="itemLinks"></div> </body> </html> Code (markup):