Blank Dot Me? Blank Dot Yourself!


	Because of how this image gallery was designed, the page reloads every time you go to a new image. This has some good and bad effects. It's good if you have ads showing and want them refreshed for every pageview, but it could potentially be bad if you plan to incorporate this script into a large HTML file. Another benefit of this design though is the ability to link to any image directly and have it treated like it's own unique resolvable url, so http://blank.me/image-gallery/?i=1 is different from http://blank.me/image-gallery/?i=2 as far as search engines and browsers are concerned. Filename Standards: Image file names, paths, and extensions are assumed to be: 1. Uniform except for one variable which is a number. 2. In order without skipping a number. (The start and end number is defined by the settings.) There are three parts to the file name, the prefix, number, and extension. The prefix is everything in the image's URL BEFORE the number variable. The extension is everything in the image's URL AFTER the number variable. example 1: "http://www.com/path/to/imageXsmall.jpg" prefix="http://www.com/path/to/image" number="X" (variable) extension="small.jpg" example 2: "../images/pets/X.jpg" prefix="../images/pets/" number="X" (variable) extension=".jpg" I have a windows batch file made up to rename images automatically, not guaranteed to work for you (always make backups!), but you can download it here. Lets look at the sample source files: HTML File \| Script File \| Description File A completely functional gallery HTML page can be as simple as this: <html> <head> <title></title> <script type="text/javascript"> //Javascript Image Gallery Settings. current=1; first=1; last=22; extension=".jpg"; prefix="img/"; iurl="i"; imageID="MainImage"; desc=1; descID="Description"; imageNumbers=1; imageNumbersID="ImageNumbers"; </script> <script type="text/javascript" src="simple.js"></script> <script type="text/javascript" src="img/descriptions.js"></script> </head> <body onload="javascript:onPageLoad();"> <center> <a href="javascript:void(0);" onclick="javascript:nextImg(999999);">First</a> \| <a href="javascript:void(0);" onclick="javascript:nextImg(-5);">Back 5</a> \| <a href="javascript:void(0);" onclick="javascript:nextImg(-1);">Previous</a> \| <a href="javascript:void(0);" onclick="javascript:nextImg(1);">Next</a> \| <a href="javascript:void(0);" onclick="javascript:nextImg(5);">Skip 5</a> \| <a href="javascript:void(0);" onclick="javascript:nextImg(-999999);">Last</a><br> <div id="ImageNumbers"></div><br> <a href="javascript:void(0);" onclick="javascript:nextImg(1);"><img id="MainImage" src="http://blank.me/img/spacer.png" border="0"></a><br> <div id="Description"></div> </center> </body> </html> or even this: <html> <head> <title></title> <script type="text/javascript">current=1; first=1; last=22; extension=".jpg"; prefix="img/"; iurl="i"; imageID="MainImage"; desc=0; descID="Description"; imageNumbers=0; imageNumbersID="ImageNumbers";</script> <script type="text/javascript" src="simple.js"></script> </head> <body onload="javascript:onPageLoad();"> <center> <a href="javascript:nextImg(-1);">Previous</a> \| <a href="javascript:nextImg(1);">Next</a><br> <img id="MainImage" src="http://blank.me/img/spacer.png" border="0"> </center> </body> </html> Now lets break that up into it's components. First up we have the settings. I put the settings in the HTML file so you can use the same script for multiple galleries and have different settings for each one. This gets updated and placed into the head area of the HTML file: <script type="text/javascript"> //Image number to display if no valid URL parameter is present. current=1; //Number of first image in gallery. first=1; //Number of last image in gallery. last=22; //File extension of image files. extension=".jpg"; //Prefix for image file names, may include folder paths. //For no prefix, use: prefix=""; prefix="img/"; //Name of the url image number parameter. iurl="i"; //ID of the main image. imageID="MainImage"; //Do you want your image descriptions displayed? //1=yes - Anything else is equal to no. desc=1; //Required for descriptions. ID of the description placeholder. descID="Description"; //Do you want the image numbers displayed? //1=yes - Anything else is equal to no. imageNumbers=1; //Required for image numbers. ID of the image numbers placeholder. imageNumbersID="ImageNumbers"; </script> You don't have to have all the comments in the settings, you can reduce them like so: <script type="text/javascript">current=1; first=1; last=22; extension=".jpg"; prefix="img/"; iurl="i"; imageID="MainImage"; desc=1; descID="Description"; imageNumbers=1; imageNumbersID="ImageNumbers";</script> We reference the file that controls the images being displayed next. Copy this line to the head area of the HTML file, then update the "src=" to where you placed the simple.js file on your server. You can rename the file if you want, it won't cause any problems. <script type="text/javascript" src="simple.js"></script> If you have Descriptions generated and turned on in the options, we can now reference the file that contains those. Copy this line to the head area of the HTML file, then update the "src=" to where you placed the file containing the descriptions. If you don't want descriptions, don't bother to include this file. I put the descriptions in a seperate file so it doesn't get downloaded completely each and every time a new image is loaded. This would mostly benefit larger galleries with long descriptions. <script type="text/javascript" src="img/descriptions.js"></script> We need to update the image when the page loads, so we make sure the body tag has an onload parameter on it like so: <body onload="javascript:onPageLoad();"> Navigation links. You can customize these as you wish. The script works by adding the number you specify to the current image number, then displays that image number. If the number is not within the valid range, it loops back to the beginning or end of the valid range. That is why I have the "first" link setup like it is, 999999 is larger than the valid range, so it loops back to the first image in the range. The "last" link is just the reverse of the "first" link. <a href="javascript:void(0);" onclick="javascript:nextImg(999999);">First</a> \| <a href="javascript:void(0);" onclick="javascript:nextImg(-5);">Back 5</a> \| <a href="javascript:void(0);" onclick="javascript:nextImg(-1);">Previous</a> \| <a href="javascript:void(0);" onclick="javascript:nextImg(1);">Next</a> \| <a href="javascript:void(0);" onclick="javascript:nextImg(5);">Skip 5</a> \| <a href="javascript:void(0);" onclick="javascript:nextImg(-999999);">Last</a> Image numbers. This is a placeholder div the script uses to display the image numbers if you have them enabled in the settings. This div doesn't need to be included if you have the image numbers disabled. The ID needs to match the ID in the settings, and the ID must be unique for the entire HTML file. The basic output is similar to "1 of 22" <div id="ImageNumbers"></div> Placeholder image. This is a 1x1px transparant image that acts as a placeholder. The script updates the source of the image depending on which image you are currently asking it to load. I also put a link around the image so you can just click on it to go to the next one. Download the transparant image here. (Right click and save as.) <a href="javascript:void(0);" onclick="javascript:nextImg(1);"> <img id="MainImage" src="http://blank.me/img/spacer.png" border="0"> </a> Description. This is a placeholder div the script uses to display the image description if you have them generated and enabled in the settings. This div doesn't need to be included if you have the descriptions disabled. The ID needs to match the ID in the settings, and the ID must be unique for the entire HTML file. <div id="Description"></div> Lets look at the sample source files: HTML File \| Script File \| Description File This is the javascript file that controls the image gallery. You can download this file here. (Right click and save as.) // Simple Javascript Image Gallery // Original code by Keith Blank // Website: http://blank.me/ function onPageLoad() { qString = document.location.search.substring(1).split("&"); query = new Array(); for (i = 0; i < qString.length; i++){ var qPair = qString[i].split("="); query[qPair[0]] = qPair[1]; } if (isNaN(query[iurl]) == false && query[iurl] <= last && query[iurl] >= first) {current = Number(query[iurl]);} document.getElementById(imageID).src=prefix + current + extension; if (desc == 1){document.getElementById(descID).innerHTML=d[current];} if (imageNumbers == 1){document.getElementById(imageNumbersID).innerHTML="Image " + current + " of " + last;} } function nextImg(x) { if (isNaN(query[iurl]) == false && query[iurl] <= last && query[iurl] >= first) {current = Number(query[iurl])+x;} else {current+=x;} if (current > last){current = first;} if (current < first){current = last;} window.location="?"+iurl+"="+current; } I have added comments below to help explain what the script is doing: // Simple Javascript Image Gallery // Original code by Keith Blank // Website: http://blank.me/ //This function should be run immediately after the page loads. function onPageLoad() { //Extract the search string from the URL, remove the "?" and split it into an array named "qString" using "&" as a delimiter. qString = document.location.search.substring(1).split("&"); //Declare the variable "query" as an array so we don't run into problems later on. query = new Array(); //For all of the items in the "qString" array. for (i = 0; i < qString.length; i++){ //Split into another array using "=" as a delimiter. var qPair = qString[i].split("="); //Set the query variable using qPair[0] as the name in the array and qPair[1] as the value. query[qPair[0]] = qPair[1]; } //If the value of the image url parameter is a number, and within the range specified in the settings, set the current image to the value of the url parameter. if (isNaN(query[iurl]) == false && query[iurl] <= last && query[iurl] >= first) {current = Number(query[iurl]);} //Change the source of the placeholder image. document.getElementById(imageID).src=prefix + current + extension; //if you have descriptions enabled, find the div and replace the HTML with the description for for the current image. if (desc == 1){document.getElementById(descID).innerHTML=d[current];} //if you have image numbers enabled, find the div and replace the HTML with the image numbers text. if (imageNumbers == 1){document.getElementById(imageNumbersID).innerHTML="Image " + current + " of " + last;} } //This function evaluates the requested image number and reloads the browser. function nextImg(x) { //If the value of the image url parameter is valid, set the current image to the value of the url parameter + the value you passed through when calling this function. If the value of the image url parameter is invalid, use the current (default) image number + the value you passed through when calling this function. if (isNaN(query[iurl]) == false && query[iurl] <= last && query[iurl] >= first) {current = Number(query[iurl])+x;} else {current+=x;} //If the new current image number is greater than the last image, set the current image to the first one. (loop around) if (current > last){current = first;} //If the new current image number is less than the first image, set the current image to the last one. (loop around) if (current < first){current = last;} //Make the window load the new URL. window.location="?"+iurl+"="+current; } Lets look at the sample source files: HTML File \| Script File \| Description File This is pretty self explanatory, you declare an array and incriment the number. The number must be equal to the number of the image the description is for. If there are images you don't want to have any descriptions, you can leave the variable empty like d[10] through d[15]. if you don't make an empty variable here, the description for the image will read "undefined" instead of nothing. This file is not necessary to generate if you have the descriptions disabled in the settings. d = new Array(); d[1]="Description Line 1"; d[2]="Description Line 2"; d[3]="Description Line 3"; d[4]="Description Line 4"; d[5]="Description Line 5"; d[6]="Description Line 6"; d[7]="Description Line 7"; d[8]="Description Line 8"; d[9]="Description Line 9"; d[10]=""; d[11]=""; d[12]=""; d[13]=""; d[14]=""; d[15]=""; d[16]="Description Line 16"; d[17]="Description Line 17"; d[18]="Description Line 18"; d[19]="Description Line 19"; d[20]="Description Line 20"; d[21]="Description Line 21"; d[22]="Description Line 22";