CODEWITHSUNDEEP
javascript
methhead
methhead

Reputation: 115

Change image within div on image icon click

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.

Image Holder

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

Upvotes: 1

Views: 6434

Answers (4)

Steve Padmore
Steve Padmore

Reputation: 1740

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>

Upvotes: 0

Domino
Domino

Reputation: 6768

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.

Upvotes: 0

Troy Bryant
Troy Bryant

Reputation: 1024

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;
    });
});

Upvotes: 0

Spencer Wieczorek
Spencer Wieczorek

Reputation: 21565

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.

Upvotes: 4

Related Questions