Swap Image via Button with JQuery

Swap images via buttons using jQuery - example below, this is a method to swap numerous images in HTML by manipulating the images src value from the click of annother element such as a button.

Black Image

HTML

<div class="button-container">
<button class="black-button"></button>
<button class="red-button"></button>
<button class="blue-button"></button>
<button class="yellow-button"></button>
</div>

<img id="change-image" src="/wp-content/uploads/2018/09/black.jpg" alt="Black Image" />

jQuery

jQuery(document).ready(function($){

$('.black-button').on({
     'click': function(){
         $('#change-image').attr('src','/wp-content/uploads/2018/09/black.jpg');
     }
 });
 
$('.red-button').on({
     'click': function(){
         $('#change-image').attr('src','/wp-content/uploads/2018/09/red.jpg');
     }
 });
 
$('.blue-button').on({
     'click': function(){
         $('#change-image').attr('src','/wp-content/uploads/2018/09/blue.jpg');
     }
 });
 
$('.yellow-button').on({
     'click': function(){
         $('#change-image').attr('src','/wp-content/uploads/2018/09/yellow.jpg');
     }
 });
});

Each button's CSS class is targetted on click which then targets the ID of the image that changes the src attribute of the image.

This uses jQuerys attr() method which can changes the value of a given attribute - so also here the alt text value can be changed for each image.

Leave a Comment