Announcement

**Old Pedant** · Apr 6, 2009, 10:46 PM

JavaScript is more than capable of this.

The only "hard" part (and it's not THAT hard) is capturing the left and right arrow keys. Unfortunately, MSIE does that differently than all other browsers. But there are plenty of sites out there that show how to do it "cross-browser."

The rest is all pretty trivial. If you are willing to live without the keyboard usage, just allowing clicks on the left/right arrows you show there, then there won't be any cross-browser issues, even.

Probably could write this in about 5 to 10 minutes, but if you are just learning, it would be a good project to tackle for yourself.

Here's a hint: For the boxes (large and small), I'd do one of two things:
(a) have a large box as an image and then *also* have a small box which is the SAME SIZE as the large box but that has the white outline. Then you just swap images.
or
(b) Use a <table> with <td> cells of fixed size (say 40x40 pixels?) with both horizontal and vertical centering. Then have an <img> in each which is a solid colored pixel (even a 1x1 pixel image works). And just change the size of the image from (say) 30x30 to 36x36 to change it from small to large.

(a) is slightly easier, I think, but neither is hard.

For the rest, it's just capturing the onclick event on the various images and doing the appropriate thing.

**FredWarning** · Apr 6, 2009, 11:10 PM

Thanks much for the advice (and tantalizing hints...). Can you recommend any particular site for learning JavaScript? I looked in the stickied thread here but it hasn't been updated in 4+ years (or maybe that doesn't matter?).

Ben

**Old Pedant** · Apr 6, 2009, 11:45 PM

JavaScript hasn't changed much in about 8 or 9 years. So info from 4 years ago should be fine.

Here's a start on the project. This code is 100% *UNTESTED*! It is, however, warranted against all bugs having 6 legs for a period of 30 nanoseconds or 30 nanometers, whichever comes first.

Code:

<html>
<haed>
<script type="text/javascript">
var imageNumber = 0;

var images = ["somePicture.jpg","anotherPic.gif","whatever.jpg","p3.jpg","p4.jpg","p5.jpg"];

var showPic(num)
{
     // ensure num is in range of available pics
     num = parseInt(num);
     if ( isNaN(num) ) num = 0;
     if ( num < 0 ) num = images.length-1;
     if ( num >= images.length ) num = 0;
     imageNumber = num; // save number

     document.getElementById("MAINPIC").src = "images/" + images[num];
     for ( var p = 0; p < images.length; ++p )
     {
         var icon = document.getElementsById("ICON"+p).src = 
                ( p == num ) ? "images/bigSquare.jpg" : "images/smallSquare.jpg";
     }
}
</script>
<style>
img#MAINPIC { border: solid black 2px; width: 320px; }
img.ICON { height: 50px; width: 50px; }
</style>
</head>
<body onload="showPic(0);">

<img id="MAINPIC">
<br>
<a href="javascript:showPic(imageNumber-1);">LEFT</a>
<img id="ICON1" class="ICON"
><img id="ICON2" class="ICON"
><img id="ICON3" class="ICON"
><img id="ICON4" class="ICON"
><img id="ICON5" class="ICON"
><img id="ICON6" class="ICON">
<a href="javascript:showPic(imageNumber+1);">RIGHT</a>
</body>
</html>

The bigSquare.jpg and smallSquare.jpg are the two images I mentioned. One with no white space around the black square, the other with a smaller black square surrounded by white, so it's the same size as the full black square but looks smaller.

Notice that I have 6 images and 6 ICON images. You could write the JS code to ensure you have the same number. Or you could put in a guaranteed-enough ICON images and intialize them all to blanks. The code will never change the ones beyond the end of the array of image names.

DOes it begin to make sense?

**FredWarning** · Apr 7, 2009, 03:20 PM

Wow, thanks! As I said, I still have to go and actually learn JavaScript so I can decipher all this, but this is a huge help.

Ben

**FredWarning** · Apr 7, 2009, 06:23 PM

Ok, I give up. I've tried fiddling with it but I'm not getting where I want to go. Would you mind explaining the code above a little further?

Ben

**Old Pedant** · Apr 7, 2009, 06:47 PM

For starters, there's a goof in the code. The ID's ICON1 through ICON6 should instead be ICON0 through ICON5.

If that doesn't fix it, ask again and I'll create a demo online.

**FredWarning** · Apr 7, 2009, 07:18 PM

Nope, still doesn't work after correcting the numbers.

**Old Pedant** · Apr 7, 2009, 07:26 PM

Back in a bit. Check back in 20 or 30 minutes.

**Old Pedant** · Apr 7, 2009, 07:44 PM

Okay, here you go:
http://www.juncojunction.com/picshow.html

You can do a VIEW==>>SOURCE to see the HTML code.

I had a handful of typos in that code I posted before.

(I had "var" in place of "function", I had getElementsById( ), and I think one more goof. Well, I did say it was untested. Sorry.)

Hey! 18 minutes! I even beat my estimate. <grin/>

**Old Pedant** · Apr 7, 2009, 08:15 PM

Just added the feature of "click on the large image to advance to next picture." Had omitted that before.

Was trivial to do. Just changed
<img id="MAINPIC">
to
<img id="MAINPIC" onclick="showPic(imageNumber+1);">

**FredWarning** · Apr 7, 2009, 11:12 PM

You, sir, are a hero. I see you're from Snohomish--my roommate's from Darrington, a little bit north of you. It looks like pretty country up there.

Here's what I've got at the moment: http://bmuller.com/indexjs.html

It needs work on the site design aspects (colors, positioning, etc.) but the Javascript is working great (I also need to preload the images and get the left/right keyboard arrows but I think I can manage at least the preloading). Thanks again for all your help.

**Old Pedant** · Apr 7, 2009, 11:30 PM

OH...didn't know you wanted thumbnails instead of just blocks. You didn't object to my use of blocks earlier, so I assumed. I actually have thumbails of all of those images, so could have used them. If you just visit the www.juncojunction.com site, you'll see the thumbnails. I guess it's time for me to update that. It's only been up there pretty much as-is since...ummm...2001? WOW! Time really does fly!

You didn't really need the two sets of icons. You can ask HTML to resize an image for you. So if you put the icons inside of fixed size "boxes" (<div>s or table <td> cells) and then just changed the width (or height, no need to change both...the browser will scale the other proportionately) and maybe the padding of the box, you would have only needed the one set of icons/thumbnails.

Obviously don't change what you have now; just for future reference.

Yeah, Snohomish is nice, but Darrington is really fabulous. Just no jobs there. <sigh> My son drives a county transit bus (while working on his MBA), and his Saturday route takes him out to Darrington. Most relaxing trip he has, except for the occasional drunk heading home.

**Old Pedant** · Apr 8, 2009, 12:24 AM

Here...my version using thumbnails. Notice that I only use one set of thumbnails, not two. See how I change the image size and then the padding of the <div> that surrounds the images.

http://www.juncojunction.com/picshow2.html

I didn't preload the images, but of course that's easy to do. (And you do NOT have to do it via JS code, by the by. Though of course you can.)

**FredWarning** · Apr 8, 2009, 11:31 AM

Hmm, I think the one thumbnail version is definitely better, because then I don't have to preload the "over" images. You said I don't have to use js to preload--what's a better way, since I have a feeling my current method is very inelegant?

Announcement

Javascript photo navigation

Javascript photo navigation

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment