Try out our photo-gallery.html script.

There are plenty of Photo gallery apps, scripts, and systems out there, and the ones in cPanel X control panels for websites tend to be best. But they're not JavaScript. You can simply add items to the JavaScript arrays in this page's script and stick pictures into the subfolders that are all in the images folder, and this script will include them in the gallery. All it takes to add items to an array is to put a comma and quotes before it and quotes after it at the end of the array, and stay with the protocol of having "images" and the name of the category precede the picture name: e.g., "images/food/bananas.jpg". Not rocket science. This script is set up to utilize 10 categories of photos. To change a category name, make sure all the images in the array from then on use the right protocol: "images/newcategory/newpicture.jpg"—assuming you replace all the existing pictures and add more as well. So var animals=new Array, at the front of arrays, needs to also get changed (to var newcategory=new Array) for new arrays. And in the categories array, "animals" (for example) would need to be changed to your new category name. And of course you need to put the new images into a subfolder with that new category name, and dump the old folder of photos.

If you want more than 10 categories, you need to also deal with a couple more issues. Where you see if (cat==9) {for (var k=0; k< utensils.length; k++) {p[k] = utensils[k];}} in the code, you'd add a new line: if (cat==10) {for (var k=0; k< newcategory.length; k++) {p[k] = newcategory[k];}}, and in the categories array, you'd add the new one to the end. Next, search for while (w<10){ and change it to while (w<11){. I.e., every time you add a category, this w value needs to be one more than the just added cat value. Finally, search for u=g.substr(g.length-1,1) and change it to u=g.substr(g.length-2,2) and this should be good for up to 100 categories.

All of this brings up the issue: is JavaScript a reasonable choice for a photo gallery script? If so, why are the ones out there PHP, ASP, etc.? The answer to the first question is obvious when you look at the code changing shenanigans we just laid on you for adding categories, etc. For a general purpose photo gallery for nonprogrammers, it is no good. (But see code-for-php-photo-gallery.html.) However, for a programmer that has no problem with the code changes and doesn't mind adding items into arrays as well as into image folders, the JavaScript script has a couple of advantages: One need not use the Web, one need not have any MySQL or other database, and one need not upload anything anywhere. The whole thing can be in a local folder and using the browser locally. This may be convenient for people who want to look through their photos to find something occasionally, keep photos organized, or show their pictures to friends. There's no real security issues either as there's no input or server db to corrupt or fret over. And it's okay if you stick the gallery on the Net and invite visitors—still no security issues.

So let's check out the code, some of which is quite clever, in our opinion. The fixem() function just adjusts the display for Firefox idiosyncracies. The fix(n) function pops up the popup by bringing the 'big' div from left -1777px to 125px where it's viewable, and it brings the caption box into view under the popup. The unfix() function sticks the popup and caption back to left -1777px again. The startmouse() function starts up the mouse coordinate reading action which keeps on forever (well, not really). Note that Netscape and IE do not agree on how to capture the mousemove event.

The var g=window.location+"";u=g.substr(g.length-1,1);u=parseInt(u);if (isNaN(u)){cat=0;}else{cat=u;}; line reads the web page URL as the page loads and looks for a query. The adding of an empty string to the window.location object turns variable g into a string. The substr() function grabs the last character in the URL and tests it. If there is no query, u=parseInt(u) detects NaN (not a number). Then if (isNaN(u)), the cat variable is set to 0. The isNaN() function tests the value of a variable to see if it's not a number (since if there is no query string, it's "l"—the last letter in .html). Otherwise cat is set to u, the last character in the URL, which will be the end of the query, which will be a single digit.

After the arrays are declared, the line var p=[]; declares p to be an empty array. But then the 10 lines starting with if (cat==0) {for (var k=0; k< animals.length; k++) {p[k] = animals[k];}} use the cat variable to determine which array to dump into this empty p[] array. The comment gives the specs of where the photos are on the screen in case you care. These are vital to how the popup routines work. The function top() gets the current scroll position of the window for both IE and Firefox. This will be needed when the visitor scrolls in order to correctly position the popup, whose CSS top property will vary depending on scroll position of the window. The function getCoords(e) is both more and less complex than it looks. It figures out when the cursor is on top of a photo and runs the popup routine fix(). If it is not over a photo it runs the popup hider unfix(). There's 2 VERY good reasons not to use onMouseOver instead of cursor coordinate reading/comparing. One, it can screw up occasionally. Two, and worse, it won't work through any amount of layers like our getCoords(e) function can. In fact, it won't work through ANY layers. Why they wrote it so badly, we don't know. Bug? Anyway, once the popup pops, there's a div layer in the way so onmouseover and onmouseout are MIA, AWOL, or call them ass clowns and be done with it. They don't work, but our routine does—end of story.

Let's look at some lines in getCoords(e): while (m<=Math.ceil(p.length/4)). This is the start of the clause that lets us look through each rows' y coordinate parameters and see it the cursor is in these ranges or in between photos. By dividing the number of photos (p.length) by 4 (the number of photos per row), we get the number of rows, and we use Math.ceil() to round upwards when we divide by 4 since the last row may have less than 4 photos so the quotient may be a decimal. I.e., if there were 5 pictures total in a category, it would be 2 rows, not 1, and the 5/4 would yield 1.25, and this would round down to 1, normally, but the Math.ceil() rounds up to 2, the needed result. The a=170;b=70; are the top row's y coordinate parameters we compare the cursor to. The m variable is the row counter—we would see it go only to 2 in our 5-picture example (the f flag goes to 1 if the mouse is within the parameters), after which y coordinate testing would be replaced by x coordinate testing. The m flag counter limit will be 4 with x testing, since there will always be 4 pictures per row. The a=310;b=156 variables are the x value starting parameters. The f flag gets incremented to 2 if the x parameter AND y parameter comparison tests are passed. With both the x and y tests, if the cursor is below or to the right of all pictures, the f flag is zeroed out. The fix(s) routine runs and the popup pops if all tests are passed, otherwise unfix(s) is run, hiding the popup.

The routine that gets the photo gallery on the screen is next. It uses document.write(), which must be used during page loading. If you try to use it after the page loads (like for choosing a different category without page reloading), it will open a new window and ruin your whole day. The if(w<v) code makes sure that once you've loaded the final photo, the routine stops trying to populate the screen. The image sources are the p[] array into which we have previously loaded the array values from the chosen categories. The <a HREF='photo-gallery.html?cat="+w+"'><b>"+categories[w]+"</b></a> script creates the categories menu that lets you choose a different gallery. Each choice is a link that takes the array number chosen, sticks it in the cat variable in a URL query, then reloads the page. The cat variable value is at the end of the URL as the page reloads and—as you saw at the beginning of this page—this value is grabbed from the end of the URL and stuck in the cat variable again, where it will determine which gallery to display as the page loads.

TERMS OF USE: You must put a link on your site's home page to:
<a HREF="http://www.css-resources.com">css-resources.com</a> and it must NOT be a "nofollow" link, now or ever, and the link must stay live and unbroken for as long as you use the photo-gallery.html script, and you may not edit any part of the link, which must say "css-resources.com". Your site must NOT, now or ever, be about violence or hate or crime or treason or porn or terrorism, and your photo-gallery.html script site/page must not have photos involving violence or hate or crime or treason or porn or terrorism. Do not use the sample photos in our gallery for anything: they're copyrighted by © Focus Multimedia Ltd., Serif (Europe) Ltd., and Hemera Technologies Inc. If you cannot accept these terms, please do not use our photo-gallery.html script. We reserve the right to deny photo-gallery.html script use to anyone with an unacceptable website. Our photo-gallery.html script is copyrighted by us, at MCS Investments, Inc.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1252">
<TITLE>JavaScript Based Photo Gallery</TITLE>
<meta name="description" content="JavaScript Based Photo Gallery">
<meta name="keywords" content="JavaScript Based Photo Gallery,Photo Gallery,php,javascript, dhtml, DHTML">
<head>
<style type="text/css">
BODY {margin-left:0; margin-right:0; margin-top:0;text-align:left;background-color:#ddd}
p, li {font:13px Verdana; color:black;text-align:left}
h1 {font:bold 40px Verdana; color:black;text-align:center}
.t {position:absolute;top:0px;left:250px;}
h2 {font:bold 24px Verdana;text-align:center}
h3 {font:bold 15px Verdana;}
.pics {padding:0px;margin:10px 10px 10px 10px;height:100px;width:152px;border:1px solid black}
.pic {width:744px;position:absolute;top:52px;left:140px;}
.info {width:95px;position:absolute;top:52px;right:0px;padding:6px;background-color:#fff;border:1px solid #000}
.cat {width:95px;position:absolute;top:52px;left:2px;padding:6px;background-color:#fff;border:1px solid #000}
.info2 {width:95px;position:absolute;top:220px;right:0px;padding:6px;background-color:#fff;border:1px solid #000}
.big {position:absolute;top:52px;left:-1777px;width:754px;text-align:center;padding:0px;background-color:#bbb;border:4px solid blue}
.title {position:absolute;top:566px;left:-1777px;width:762px;text-align:center;padding:0px;background-color:#fff;border:1px solid blue;font-size:13px;font-weight:bold;}
</style>
<script language="javascript">
mactest=(navigator.userAgent.indexOf("Mac")!=-1) //My browser sniffers
is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1
Netscape=(navigator.appName.indexOf("Netscape") != -1)
msafari=(navigator.userAgent.indexOf("Safari")!= -1)
wsafari=0; if(!mactest&&msafari){wsafari=1;msafari=0}
is_opera = 0; if(window.opera){is_opera=1}
is_ie_mac = 0; is_ie=0;if(document.all){is_ie=1}
if(is_ie&&mactest){is_ie_mac=1}

function fixem(){if(Netscape||is_opera){e=document.getElementById('ti');e.style.top='-30px';}}

function fix(n){over.src=p[n];e=document.getElementById('a');e.style.left='125px';t=t+50;e.style.top=t+'px';e=document.getElementById('j');e.style.left='125px';tt=t+521;e.style.top=tt+'px';document.getElementById('j').innerHTML=p[s];if(Netscape||is_opera){e.style.width='760px';}}

function unfix(n){over.src=p[n];e=document.getElementById('a');e.style.left='-1777px';e=document.getElementById('j');e.style.left='-1777px';}

function startmouse() {if(Netscape) {document.captureEvents(Event.MOUSEMOVE);}
document.onmousemove=getCoords;}

var tt = 0;
var t = 0;
var s = 0;
var i = 0;
var f = 0;
var a = 0;
var b = 0;
var c = 0;
var m = 0;
var q = 0;
var qh = 0;
var qv = 0;
var yy = 0;
var x = 0;
var y = 0;
var ys = "0";
var u = "0";
var xx = 0;
var v = 0;
var w = 0;
var cat = 0;


var g=window.location+"";u=g.substr(g.length-1,1);u=parseInt(u);if (isNaN(u)){cat=0;}else{cat=u;};

var p=[];
if (cat==0) {for (var k=0; k< animals.length; k++) {p[k] = animals[k];}}
if (cat==1) {for (var k=0; k< buildings.length; k++) {p[k] = buildings[k];}}
if (cat==2) {for (var k=0; k< education.length; k++) {p[k] = education[k];}}
if (cat==3) {for (var k=0; k< flowers.length; k++) {p[k] = flowers[k];}}
if (cat==4) {for (var k=0; k< food.length; k++) {p[k] = food[k];}}
if (cat==5) {for (var k=0; k< scenery.length; k++) {p[k] = scenery[k];}}
if (cat==6) {for (var k=0; k< science.length; k++) {p[k] = science[k];}}
if (cat==7) {for (var k=0; k< transportation.length; k++) {p[k] = transportation[k];}}
if (cat==8) {for (var k=0; k< trees.length; k++) {p[k] = trees[k];}}
if (cat==9) {for (var k=0; k< utensils.length; k++) {p[k] = utensils[k];}}

//photo placements: 156/70 - 306/170 = w150 h100 down: 198 (+128) left: 336 (+180)

function top(){
var top = document.body.scrollTop
? document.body.scrollTop //IE
: (window.pageYOffset
? window.pageYOffset //Netscape
: (document.body.parentElement
? document.body.parentElement.scrollTop
: 0));t=top}

function getCoords(e){f=0;
if (!e) var e = window.event;
if (e.pageX){x = e.pageX;y = e.pageY;}
else if (e.clientX){x = e.clientX + document.body.scrollLeft;y = e.clientY + document.body.scrollTop;}
m=1;a=170;b=70;
while (m<=Math.ceil(p.length/4)){
if (y<a&&y>b){yy=y;qv=parseInt((y-70)/128);yy=y-qv*128;f=1;break}
a=a+128;b=b+128;m++}
i = Math.ceil(p.length/4);if (y>(70+128*i)){f=0;}
m=1;a=310;b=156;
while (m<=4){
if (x<a&&x>b){xx=x;qh=parseInt((x-156)/180);xx=x-qh*180;f=f+1;break}
a=a+180;b=b+180;m++}
if (x>(156+180*parseInt(p.length/4))){f=0;}
s=qh+qv*4;top();
if (f==2&&s<p.length){fix(s);}else{unfix(s);}
}

document.write('<div class="pic"><table border="1" style="text-align:center;border:1px solid black">')
v=p.length; w=0;
while (w<v){
if(w<v){document.write('<tr><td><a HREF="#"><IMG SRC="'+p[w]+'" class="pics"></a></td>');w++}
if(w<v){document.write('<td><a HREF="#"><IMG SRC="'+p[w]+'" class="pics"></a></td>');w++}
if(w<v){document.write('<td><a HREF="#"><IMG SRC="'+p[w]+'" class="pics"></a></td>');w++}
if(w<v){document.write('<td><a HREF="#"><IMG SRC="'+p[w]+'" class="pics"></a></td>');w++}
document.write('</tr>');}
document.write('</table></div>');

w=0;
document.write('<div class="cat"><table>');
while (w<10){
document.write("<tr><td><a HREF='photo-gallery.html?cat="+w+"'><b>"+categories[w]+"</b></a></td></tr>");w++}
document.write('</table></div>');

</script>

</head>
<body onload='startmouse(),fixem()'>
<div id='ti' class='t'><h1>Ye Olde Picture Gallery</h1></div>

<div class='big' id='a'><IMG name='over' SRC="images/science/rockets.jpg" WIDTH=752 HEIGHT=512 BORDER=1></div>

<div class='title' id='j'> </div>

<div class='info'>For larger images, simply hover the cursor over the desired picture.</div>

<div class='info2'>Images copyrighted © by Focus Multimedia Ltd., Serif (Europe) Ltd., and Hemera Technologies Inc. Want hundreds of thousands of these photos CHEAP? Then go to:<BR><a HREF="http://www.focusmm.co.uk/shop/500-000-Images-pr-327.html">Focus Multimedia Ltd.</a>.</div>

</body>
</html>