Hi, I am working my way through learning some web technologies, got (X)HTML+CSS sussed, and a tiny bit of PHP, but I'm having a LOT of trouble with JavaScript. I'm looking through some good example scripts and came across this:
JavaScript:
HTML:Code:var gSet = new Object(); gSet = { // GALLERY SETTINGS id :"jsGalleryList", // put the gallery list's ID here next :"Next image", // text for "next" link back :"Previous image", // text for "previous" link linkTitleText:"Show image:",// text for title tag of links (is followed by image title) titles :true, // whether or not to use titles (true or false) titleTag:"h2", // the HTML tag to be used for the displayed title // END SETTINGS imgArray: new Array() } function gSetup(){ if(!document.createElement || !document.getElementsByTagName) return false; var gList = document.getElementById(gSet.id); if(!gList ) return false; var gListItems = gList.getElementsByTagName('img'); //get the images into an array var nextSibling = gList.nextSibling; for(var i=0; i<gListItems.length; i++) gSet.imgArray.push(gListItems[i]); gList.parentNode.removeChild(gList); //remove the list of images; var startImg = testHash(); buildg(null,nextSibling,startImg); } function testHash(){ //test if a specific image is being linked to for(var i=0; i<gSet.imgArray.length; i++) if("#" + gSet.imgArray[i].title == window.location.hash) return i; } function buildg(go,nextSibling,startImg){ //Decide id we're going forwards or backwards, or restarting. if(go == "next") imgNum = imgNum+1; if(go == "back") imgNum = imgNum-1; if(!go || imgNum == gSet.imgArray.length) imgNum = 0; //if we're starting for the first time or gone off the top. if(startImg) imgNum = startImg; if(imgNum<0) imgNum = gSet.imgArray.length-1 // if we go backwards off the bottom. function plus(num) { if(num == gSet.imgArray.length-1) return 0; else num = num+1; return num; } function minus(num) { if(num == 0) return gSet.imgArray.length-1; else return num-1; } var gDisplay = document.getElementById("gDisplay"); if(gDisplay) //find next sibling and destroy current g { var nextSibling = gDisplay.nextSibling; gDisplay.parentNode.removeChild(gDisplay); } var gDisplay = document.createElement("div"); //create a containing div for the g display gDisplay.id = "gDisplay"; //create the control links var backLink = document.createElement("a"); backLink.id = "backLink"; backLink.innerHTML = gSet.back; backLink.href = "#" + gSet.imgArray[minus(imgNum)].title; backLink.onclick = function(){buildg("back",null); return false;}; var nextLink = document.createElement("a"); nextLink.id = "nextLink"; nextLink.href = "#" + gSet.imgArray[plus(imgNum)].title; nextLink.innerHTML = gSet.next; nextLink.onclick = function(){buildg("next",null); return false;}; if(gSet.titles) //create and insert title stuff. { backLink.title = gSet.linkTitleText + " " + gSet.imgArray[minus(imgNum)].title; nextLink.title = gSet.linkTitleText + " " + gSet.imgArray[plus(imgNum)].title; var imgTitle = document.createElement(gSet.titleTag); imgTitle.innerHTML = gSet.imgArray[imgNum].title; gDisplay.appendChild(imgTitle); //first element put into display div appears first. } gDisplay.appendChild(gSet.imgArray[imgNum]); //add in an image then the control links gDisplay.appendChild(backLink); gDisplay.appendChild(nextLink); nextSibling.parentNode.insertBefore(gDisplay,nextSibling); //put the gallery display back in the DOM if(go == "next") nextLink.focus(); /*set focus for easy keyboard usability*/ if(go == "back") backLink.focus(); window.location.hash = "#" + gSet.imgArray[imgNum].title; //set the anchor. }// End buildGallery window.onload = function(){gSetup();} //this needs replacing with something more usable.
The problem is that this script doesn't work in IE6. It produces an Object Required error on line 99 character 2, and I have no way of figuring it out. I tried Firefox+Firebug and Safari JavaScript debugger, but I have no idea what I'm even looking for, and only Internet Explorer is giving me an error at all.Code:<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="style.css" /> <script type="text/javascript" src="jsGallery.js"></script> </head> <body> <ul id="jsGalleryList"> <li><img src="images/1.gif" alt="alt_1" title="title_1" /></li> <li><img src="images/2.gif" alt="alt_2" title="title_2" /></li> <li><img src="images/3.gif" alt="alt_3" title="title_3" /></li> <li><img src="images/4.gif" alt="alt_4" title="title_4" /></li> <li><img src="images/5.gif" alt="alt_5" title="title_5" /></li> <li><img src="images/6.gif" alt="alt_6" title="title_6" /></li> <li><img src="images/7.gif" alt="alt_7" title="title_7" /></li> <li><img src="images/8.gif" alt="alt_8" title="title_8" /></li> </ul> </body> </html>
I'd really appreciate someone having a quick peek, maybe test it out on their end, and giving me a couple of pointers on where to start looking for a fix.
Thanks in advance
T


Reply With Quote

Bookmarks