-3

I am having trouble understanding why this gallery wont work. I would like the ability to click on thumbnails to bring up a new enlarged photo but hide the previous one.

I have created a fiddle here jsfiddle.net/gt2d1jna.

For some reason, on my local machine the first thumbnail works but none of the others do.

I know this can be easily accomplished through jQuery but I am looking for a vanilla solution.

Louis Novick
  • 3
  • 2
  • How does it "not work"? Be more specific. Also it would be a good idea to place this in a Fiddle so we can see what's going on. – Spencer Wieczorek Nov 18 '14 at 04:53
  • Here is a fiddle. For some reason the fiddle isn't working the same as on my local machine. On my machine the first thumbnail would work but none of the others would. I apologize if I am confusing anyone, just trying to learn. http://jsfiddle.net/gt2d1jna/ – Louis Novick Nov 18 '14 at 05:10
  • In console we are getting a JS error :- Uncaught ReferenceError: showbig is not defined for that fiddile – Varada Nov 18 '14 at 05:26
  • And we have problems to understand what is not working for you, if you even don't care to post any code. – Danubian Sailor Nov 18 '14 at 08:32

1 Answers1

0

Does the below code in JSFiddle help

http://jsfiddle.net/p7xLj0y6/2/

        var showbig = function(elmnt) {

        var bigimages = document.getElementById("bigImages");
        var images = bigimages.getElementsByClassName("image");

        var gallery = document.getElementById("gallery");
        var children = gallery.getElementsByTagName("div");
        var count = children.length;

        for(var i=0; i<count; i++) {

            if(children[i] == elmnt) {
                images[i].style.display = "block";
            } else {
                images[i].style.display = "none";
            }

        }

    }
ecosystem31
  • 276
  • 2
  • 4