Home/ Questions/Q 7416943
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T07:36:03+00:00

So I’m very beginner with javascript and would love some help simplifying this code.

  • 0

So I’m very beginner with javascript and would love some help simplifying this code.

I have a series of thumbnails arranged in a specific pattern, and when you click on a thumbnail, I’d like all the thumbnails to disappear, and the corresponding larger image to become visible. Then, when you click on the large image, it disappears and all the thumbnails are visible again. Each thumbnail has its own div id because they all have their unique positions.
I’ve figured out a way to do it, but it’s very repetitive.

HTML:

<style type="text/css"> 
  #largeimage_wrapper {visibility: hidden;}
</style> 

</head>

<body>
<div id="thumbnail_wrapper">
    <div id="thumbnail1"><img src="thumbnail1.jpg" onClick="get_big1();"/></div>
    <div id="thumbnail2"><img src="thumbnail2.jpg" onClick="get_big2();"/></div>
    <div id="thumbnail3"><img src="thumbnail3.jpg" onClick="get_big3();"/></div>  
    ...etc
</div>


<div id="largeimage_wrapper">
    <div id="large1"><img src="thumbnail1.jpg" onClick="get_thumbs1();"/></div>
    <div id="large2"><img src="thumbnail2.jpg" onClick="get_thumbs2();"/></div>
    <div id="large3"><img src="thumbnail3.jpg" onClick="get_thumbs3();"/></div>
    ...etc
</div>

</body>

javascript:

get_big1() {
document.getElementById('thumbnailwrapper').style.visibility='hidden';
document.getElementById('large1').style.visibility='visible';
}
get_thumbs1() {
document.getElementById('thumbnailwrapper').style.visibility='visible';
document.getElementById('large1').style.visibility='hidden';
}

get_big2() {
document.getElementById('thumbnailwrapper').style.visibility='hidden';
document.getElementById('large2').style.visibility='visible';
}
get_thumbs2() {
document.getElementById('thumbnailwrapper').style.visibility='visible';
document.getElementById('large2').style.visibility='hidden';
}

get_big3() {
document.getElementById('thumbnailwrapper').style.visibility='hidden';
document.getElementById('large3').style.visibility='visible';
}
get_thumbs3() {
document.getElementById('thumbnailwrapper').style.visibility='visible';
document.getElementById('large3').style.visibility='hidden';
}

</script>

There must be a better way! I imagine it’s not that difficult, I just can’t to get a grasp on it yet. Thanks in advance.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    There are lots of ways to tackle this. The first and most obvious that comes to my mind is simply to pass a number into a single function which determines the image id to modify:

    function get_thumbs(id) {
  document.getElementById('thumbnailwrapper').style.visibility='visible';
  document.getElementById('large' + id).style.visibility='hidden';
}

<div id="largeimage_wrapper">
    <div id="large1"><img src="thumbnail1.jpg" onClick="get_thumbs(1);"/></div>
    <div id="large2"><img src="thumbnail2.jpg" onClick="get_thumbs(2);"/></div>
    <div id="large3"><img src="thumbnail3.jpg" onClick="get_thumbs(3);"/></div>
    ...etc
</div>

    … And the same thing for get_big().

    Alternatively you can use just one function that handles both conditions (big or thumbnail):

    function get_img(id, type) {
  if (type == 'big') {
    document.getElementById('thumbnailwrapper').style.visibility='hidden';
    document.getElementById('large' + id).style.visibility='visible';
  }
  else if (type == 'thumb') {
    document.getElementById('thumbnailwrapper').style.visibility='visible';
    document.getElementById('large' + id).style.visibility='hidden';
  }
  else return false;
}

    And in the HTML:

    <div id="thumbnail_wrapper">
    <div id="thumbnail1"><img src="thumbnail1.jpg" onClick="get_img(1, 'big');"/></div>
    <div id="thumbnail2"><img src="thumbnail2.jpg" onClick="get_img(2, 'big');"/></div>
    <div id="thumbnail3"><img src="thumbnail3.jpg" onClick="get_img(3, 'big);"/></div>  
    ...etc
</div>
<div id="largeimage_wrapper">
    <div id="large1"><img src="thumbnail1.jpg" onClick="get_img(1, 'thumb');"/></div>
    <div id="large2"><img src="thumbnail2.jpg" onClick="get_img(2, 'thumb');"/></div>
    <div id="large3"><img src="thumbnail3.jpg" onClick="get_img(3, 'thumb');"/></div>
    ...etc
</div>
    • 0