Web Analytics Made Easy -
StatCounter Javascript photo navigation - CodingForum

Announcement

Collapse
No announcement yet.

Javascript photo navigation

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Javascript photo navigation

    Hi,

    I'm working on a photography website, and what I'd like to have is a very simple gallery, illustrated below. I want viewers to be able to click on a thumbnail to select a specific image, click on the large image to advance to the next, or use the (keyboard) arrow keys to move forward/backward in the order.

    Before I spend a lot of time trying to learn enough Javascript to build this, I'd like to make sure that Javascript is indeed a good way to go about doing this. If you think it is and have any suggestions, I'd be very appreciative, or if you think it's not, what would be a better method (I'd like to avoid Flash if possible).

    Thanks for any and all suggestions,

    Ben

    Gallery mockup:

  • #2
    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.
    Be yourself. No one else is as qualified.

    Comment


    • #3
      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

      Comment


      • #4
        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?
        Be yourself. No one else is as qualified.

        Comment


        • #5
          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

          Comment


          • #6
            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

            Comment


            • #7
              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.
              Be yourself. No one else is as qualified.

              Comment


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

                Comment


                • #9
                  Back in a bit. Check back in 20 or 30 minutes.
                  Be yourself. No one else is as qualified.

                  Comment


                  • #10
                    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/>
                    Be yourself. No one else is as qualified.

                    Comment


                    • #11
                      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);">
                      Be yourself. No one else is as qualified.

                      Comment


                      • #12
                        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.

                        Comment


                        • #13
                          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.
                          Be yourself. No one else is as qualified.

                          Comment


                          • #14
                            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.)
                            Be yourself. No one else is as qualified.

                            Comment


                            • #15
                              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?

                              Comment

                              Working...
                              X