/* image gallery instructions
==========================
1. create xml file with the following structure...
/images/myimage.jpg
My Image
etc...
2. change documents body tag to...
example:
3. apply css styles to buttons (.glButton & .glDisabled)
*/
// declare global variable(s)
var glImage;
var glViewer;
var glPanel;
var glThumbs;
// creates an image gallery from an xml file
function gallery(container,xmlDocument)
{
// inform user if no container was found
if(container == null || container == "")
{
alert("Sorry, but a container hasn't been found for the gallery.");
return;
}
if(xmlDocument == null || xmlDocument == "")
{
alert("Sorry, but an XML document hasn't been found for the gallery.");
return;
}
// put getXmlHttpObject function into variable
var xmlHttp = createHttpRequestObj();
// inform user if browser doesn't support AJAX
if(xmlHttp == null)
{
container.innerHTML = "Sorry, but your browser doesn't support AJAX.";
return;
}
// empty container of any content
container.innerHTML = "";
// create div for holding images
glViewer = document.createElement("div");
// assign id to 'glViewer'
glViewer.setAttribute("id","glViewer");
// insert 'glViewer' into container
container.appendChild(glViewer);
// create div for the info & navigation panel
glPanel = document.createElement("div");
// assign id to 'glPanel'
glPanel.setAttribute("id","glPanel");
// style text to center within panel
glPanel.style.textAlign = "center";
// style 'gPanel' to be relative for absolute elements
glPanel.style.position = "relative";
// style a top margin for panel (mainly for fixing IE browsers)
glPanel.style.marginTop = "2px";
// insert div into container
container.appendChild(glPanel);
// create div for holding thumbnails
glThumbs = document.createElement("div");
// assign id to 'glThumbs'
glThumbs.setAttribute("id","glThumbs");
// style a top margin for thumbnail area
glThumbs.style.marginTop = "3px";
// style height of thumbnail area
glThumbs.style.height = "75px";
// force thumbnails to stay on one line
glThumbs.style.whiteSpace = "nowrap";
// style border of thumbnail area
glThumbs.style.overflow = "auto";
// insert 'glThumbs' into container
container.appendChild(glThumbs);
// initialise 'glNum' (for first image)
var glNum = 0;
// build url
var url = xmlDocument + "?sid=" + Math.random();
// re-act to request completion
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState == 4)
{
// 200 means "OK"
if(xmlHttp.status == 200)
{
// get xml data
var xml = xmlHttp.responseXML;
// get 'image' element
glImage = xml.getElementsByTagName("image");
// get first image source
var glSrc = getNodeValue(glImage[glNum].getElementsByTagName("src")[0]);
// get first image title
var glTitle = getNodeValue(glImage[glNum].getElementsByTagName("title")[0]);
// create image
var glContent = "![\""](\"" "\\"\"")
";
// insert image into 'glViewer'
glViewer.innerHTML = glContent;
// initialise variable
var glPCont = "";
// insert title into 'gPanel', inform user if one isn't provided
if(glTitle == null || glTitle == "")
glPCont += "No title provided";
else
glPCont += "" + glTitle + "";
// increment 'glNum'
//glNum++;
// only include 'Previous' & 'Next' buttons if gallery has more than 1 image
if(glImage[0].childNodes[glNum])
{
glPCont += "< Previous";
glPCont += "Next >";
}
// insert required content into panel
glPanel.innerHTML = glPCont;
// insert thumbnails for better navigation
glThumbnails();
}
// anything else means a problem
else
glViewer.innerHTML = "Sorry, but there was an error retrieving the images.";
}
else
glViewer.innerHTML = "Loading...";
};
// open xmlHttp object
xmlHttp.open("GET",url,true);
// send xmlHttp object;
xmlHttp.send(null);
}
/* replaces current image with a new image */
function glReplace(glNum,glButton)
{
// get new image to replace
if(glButton == 1)
glNum = glNum-1;
else if(glButton == 2)
glNum++;
// initialise 'glPClass' & 'glNClass'
var glPClass = "glButton";
var glNClass = "glButton";
// initialise 'glPOnClick' & 'glNOnClick'
var glPOnClick = "glReplace(" + glNum + ",1); return false;";
var glNOnClick = "glReplace(" + glNum + ",2); return false;";
// disable 'Previous' button if first image
if(glNum == 0)
{
glPClass = "glDisabled";
glPOnClick = "return false;";
}
// get total n.o of images in gallery
var glALength = glImage.length - 1;
// disable 'Next' button if last image
if(glNum == glALength)
{
glNClass = "glDisabled";
glNOnClick = "return false;";
}
// get new image src & title
var glSrc = getNodeValue(glImage[glNum].getElementsByTagName("src")[0]);
var glTitle = getNodeValue(glImage[glNum].getElementsByTagName("title")[0]);
// create image
var glContent = "";
// insert image into 'glViewer'
glViewer.innerHTML = glContent;
// initialise variable
var glPCont = "";
// insert title into 'gPanel', inform user if one isn't provided
if(glTitle == null || glTitle == "")
glPCont += "No title provided";
else
glPCont += "" + glTitle + "";
// create new 'Previous' & 'Next' buttons
glPCont += "< Previous";
glPCont += "Next >";
// insert new content into panel
glPanel.innerHTML = glPCont;
}
/* creates selection of thumbnails for easier navigation */
function glThumbnails()
{
// initialise 'glContent'
var glContent = "";
for(var glNum=0; glNum";
glContent += "";
glContent += "";
}
// insert image into 'glViewer'
glThumbs.innerHTML = glContent;
}