//Hey here's a fun little image browsing script for you!
//it just cycles through numerically named .jpg's in directories
//but also allows a menu for you to choose from different image directories ("portfolio pages"),
//optionally returns to last viewed image when you change image directories, and will also
//manage your menu buttons for you so they style themselves as "clicked"/"notclicked"
//it even has spellcheck!
//at default, it all works, but if you want to make changes to the way it works...
//just remember for it all to function:
// 1) you must call either showPic() or showPortfolio() in the tag
// 2) to use the styleMenu option your menu buttons must be anchors pointing to the directory names. (I have them between tags that have the "name" attribute set to the name of the directory they point to)
// 3) to use the saveLocations option you must have page elements of the same ID's as the directory names that can hold a value. (I have hidden elements)
// 4) you need to define the name of the element that will hold your images in the imageContent variable, and the correct parent dir for your portfolios in the portfolioDir variable.
// 5) the one major limitation of this script is that all portfolios must have the same number of images :( And of course you set that in the lastImage variable
// your settings:
var lastImage = 7; //total number of images in your directory
var imageContent = "Content"; //name of the DIV or page element to inject the image
var portfolioDir = "ports/"; //the parent directory where you keep your portfolio directories
var saveLocations = true; //set true if you want the script to return to the last image you were looking at when you change between portfolios
var styleMenu = true; //set to true if you want the script to manage CSS styles of your menu buttons
var showErrors = true; //keep this as true when making page changes (if you use saveLocations) - change to false on the on-server version so people don't see any errors
/* this function accepts input as the name of a .jpg image file [whichpic]
as well as (optional) the directory it is contained in. [whichdir]
If you don't pass it this second variable, it will default to the parent portfolio dir (as set above) */
function showPic (whichpic, whichdir) {
nextpic = whichpic + 1; //set the nextpic variable (this variable is the counter that intreases the next picture to display by +1. "nextpic" goes to the javascript onclick link, while "whichpic" goes to the image src).
if (nextpic>lastImage) { //compares nextpic to lastpic (this little if statement checks your "lastImage" preset variable above to make sure you haven't gone too high. If you have, it resets "nextpic" to 1).
nextpic = 1; //and resets to 1 if it's higher
}
if (whichdir) { //check to make sure we received a "whichdir" var
nextdir = whichdir; //set the "nextdir" var (for the onclick link because we can't send whichdir the URL strings back to the script
whichdir = portfolioDir + whichdir + "/"; //add the URL strings so it actually points somewhere
}
else { //if we didn't get a "whichdir" var
whichdir = ""; //then just set it to nothing so there's no screwups
}
//set the "Content" DIV's html to: 
document.getElementById(imageContent).innerHTML = "![\"\"](\"")
"; //notice the \'s are to nullify the quotes that the HTML needs so they don't mess up the javascript
if (saveLocations == true) { //check the saveLocations var is set to true
if (document.getElementById(nextdir) && document.getElementById(nextdir).value>0) { //check for existance of correctly named element (check that we have an element on the page whose id is the same as the image directory/portfolio to save the image number to)
document.getElementById(nextdir).value = whichpic; //save the image number to the value of that element
}
else {
if (showErrors==true) { //check that we're in testing mode. (Don't want your errors popping up when people are viewing the page!)
alert('Spelling error! There is no page element with the id "' + nextdir +'"'); //show an error if we're missing the save element. (Otherwise if you're adding lots of galleries, you might make a spelling error and not know that it is not saving)
}
}
}
}
/*this function calls showPic() but first checks to see
if you have saved a value in a page element of the
same id as the directory name to decide which picture to
ask showPic() to display.
it requires the input of a portfolio dir name [portfolio] */
function showPortfolio(portfolio) {
var imageNumber;
if(document.getElementById(portfolio) && document.getElementById(portfolio).value>0) { //checks that the page element of the right id exists and has a value
imageNumber = new Number(document.getElementById(portfolio).value); //if so sets imageNumber to that value
}
else {
imageNumber = 1; //if not sets imageNumber to 1
}
showPic(imageNumber,portfolio); //calls showPic() and passes the data
if (styleMenu == true) { //checks to see if the styleMenu var is set
changeMenu(portfolio); //if so, calls changeMenu and passes it the "portfolio" var so it knows which to set to clicked
}
}
//this function accepts [page] and sets the corresponding page anchor (an element with correct name)
//to be clicked or not clicked, as a CSS style
function changeMenu(page) {
if (document.getElementById('portfolio')) { //checks if the hidden "portfolio" element exists
var previousPage = document.getElementById('portfolio').value; //if so, sets the previousPage var to its value
if (previousPage) {
document.anchors[previousPage].className='notclicked'; //if that all worked, sets the previously "clicked" tag to "notclicked"
}
}
document.anchors[page].className='clicked'; //sets the currently selected element to "clicked"
if (document.getElementById('portfolio')) { //updates the hidden "portfolio" element for when we go away again!
document.getElementById('portfolio').value = page;
}
}