Change image within div on image icon click

Question

I have created a Javascript function which will allow me to change the image to another when the div is directly clicked but I am trying to get this function to work depending on which other image icon i select.

As you can see by the above image, i have a main div which contains a picture on browser load, and two further thumbnail divs which include different pictures, I want to create the function to change the main div if one of the smaller thumbnail divs are selected.

Current Javascript Function

 function diffImage(img) {
     if(img.src.match(/blank/)) img.src = "bognor.jpg";
     else img.src = "images/bognor2.jpg";
 }

Thanks in advance, Sam

I believe this may answer your question: http://stackoverflow.com/questions/11722400/programmatically-change-the-src-of-an-img-tag — agbodike, Oct 20 '15 at 17:17

Spencer Wieczorek · Accepted Answer · 2015-10-20T17:28:58.057

4

You would just use onclick event listeners on the icons and the function would change the large image to the image of the item clicked:

document.getElementById("icon1").onclick = function() {
    document.getElementById("mainImage").src = this.src;
}

document.getElementById("icon2").onclick = function() {
    document.getElementById("mainImage").src = this.src;
}

If you happen to have several icons you could make an icon class and apply the event listener like so:

var icons = document.getElementsByClassName("icon");

for(var i=0; i<icons.length; i++) {
    icons[i].onclick = function(){
        document.getElementById("main").src = this.src;
    }
}

Fiddle Example for using classes

Although it's easier in that case to use jQuery and simply attach the event handler doing $('.icon').click(function(){ ... }). Of course you are not required to do so.

edited Oct 20 '15 at 17:28

answered Oct 20 '15 at 17:17

Spencer Wieczorek

21,229
7
44
54

1

If you had many icons (thumbnails), like 10+, this would be duplicating a lot of code. Not to mention the nightmare of changing all the duplicated code if the names of the icons changed, or the sources, or the images... It's better to abstract the common stuff into a 'type' of element (i.e. defined by a class attribute) and apply the code/logic to it. – blurfus Oct 20 '15 at 17:19
@ochi In this case it's only two. If there where several I would recommend the user to have an `icon` class and apply the event listener to the class using jQuery `$('.icon').click(...)`. – Spencer Wieczorek Oct 20 '15 at 17:21
You are also making an assumption that the icon's source is going to be the full-images's source. The thumbnail usually is a smaller version of the original and it will not look good (very pixelated) if sized up. Also, adding jquery only to switch images seems like overkill... not a recommended approacxh – blurfus Oct 20 '15 at 17:28

Domino · Answer 2 · 2015-10-20T17:50:07.880

You could put the url of the big image in a custom data-attribute on the thumb element, such as <img src="thumb1.png" data-bigsrc="image1.png" />. Then you can add an event to all thumbnails like this:

var thumbs = document.querySelectorAll('.thumbnail');
var mainImage = document.querySelector('#mainImage');


for(var i=0; i<thumbs.length; ++i) {
  thumbs[i].addEventListener('click', function(e) {
      mainImage.src = e.target.getAttribute("data-bigsrc");
  });
}

If you have high quality images and actually want to make them load when the user clicks, you could also use a radio button for each image, with the value set to the URL of the big image. Make the radio buttons invisible and put the thumbnails inside labels. Then you can just bind an event listener to all radio buttons and make them change the main image URL based on the radiobutton value.

Or if you want all the images to load in advance, you should just make tons of big-small image pairs and make the big image only visible if the small image's radiobutton is clicked, making an all-css solution.

score 0 · Answer 3 · answered Oct 20 '15 at 17:37

I recently did something similar where I had a table underneath the feature image of just smaller thumnail images.

$(".browseTable").on('click', 'td', function () {
    var thumbNail = $(this).parent('tr').find('img').attr('src');
    var feature = $('#featureImg img').attr('src');
    $('#featureImg img').fadeOut(400, function () {
        $(this).fadeIn(400)[0].src = thumbNail;
    });
});

score 0 · Answer 4 · answered Oct 20 '15 at 18:12

As an alternative, this uses vanilla JavaScript, and three different ways of storing/naming the image files are covered.

<!DOCTYPE html>
<html>
<head>
    <title></title>
 <meta charset="utf-8" />
</head>
<body>
    <div id="divMainImage">
        <img id="mainImage" src="/images/image01Main.jpg" alt="Main image" />
    </div>
    <div id="divThumbnails">
        <img class="thumb" src="/images/image01.jpg" alt="image01 thumbnail" />
        <img class="thumb" src="/images/image02.jpg" alt="image02 thumbnail" />
        <img class="thumb" src="/images/image03.jpg" alt="image03 thumbnail" />
    </div>
    <script type="text/javascript">
        // Name both small and large images the same but with a prefix or suffix depicting thumbnail/main:
        // image01.jpg (image01small.jpg) or image01Main.jpg (image01.jpg)
        // image02.jpg (image02small.jpg) or image02Main.jpg (image02.jpg) etc.
        // Or use two folders - one with main images, the other with thumbnails - both files named the same,
        // then swap the folder to use when getting the image.

        // Then use the displayed thumbnails' class to load originals:
        var thumbnails = document.getElementsByClassName("thumb");
        var mainImage = document.getElementById("mainImage");

        for (index in thumbnails)
        {
            thumbnails[index].onclick = function () {
                // Depending on the way used use on of the following:
                mainImage.src = this.src.replace('.jpg', 'Main.jpg');
                // Or
                // mainImage.src = this.src.replace('thumb.jpg', '.jpg');
                // Or
                // mainImage.src = this.src.replace('/images/small/', '/images/large/');
            }
        }
    </script>
</body>
</html>

Change image within div on image icon click

4 Answers4