Switch Main Product Image When Clicking On A Variation Thumbnail Using Divi Code Modules

You know those sites that let you see a product in different colors as you click on a thumbnail of that product in a different color or material? Well, in this tutorial I’m going to show you how to do exactly that with a little HTML, CSS, and JavaScript. It’s the kind of functionality you get on a new car website where you can choose to see the car of your dreams in the different colors it’s available in or, on a clothing store site that lets you see a garment in the various colors or fabric it’s available in.

Credit for this tutorial goes partly to this tutorial: Showing A Larger Image From A Thumbnail OnClick Via JavaScript / DOM Revisited as well as a fellow designer who asked the question on one of the Facebook groups I’m a member of.

The Example

In the following example you’ll see that as you click on one of the thumbnails, the primary image on the left changes accordingly. You’ll also notice that your pointer (if you’re on a device that displays a pointer) changes as you hover over the thumbnail.

In this tutorial, I’ve used four Divi Code Modules and one Text Module (for the title of the thumbnails). Code modules are great for situations like this where you don’t necessarily want to add JavaScript and CSS globally when you only need it on one page.

Each of the sections below uses it’s own code module.

To state the obvious, before you can do this, please upload the images you’re going to use and make a note of their paths.

The HTML

There are two pieces of HTML that you’ll need for the images, the first for the main image and the second for the thumbnails.

The HTML for the Primary Image

Add the following code for the main image to one of the Divi Code Modules. The important thing to note is the ID of the image, make sure you get it right otherwise it won’t work.

The HTML for the Thumbnails

The HTML for the thumbnails is an unordered list with each image as an item of the list. You can add or remove the li rows as need be. The image tag has an onClick event which passes two arguments to the showImage function. The first argument is the path to the image and the second is the image’s Title and Alt text values. Be sure to change these to the correct path and title/alt text values you’re going to use. Now add this code to the Code Module you’re going to use for the thumbnails.

The CSS

The CSS is used to style the thumbnails so that they don’t appear as an unordered list but rather side-by-side as in the example. You can add this to it’s own Code Module.

The JavaScript

The JavaScript is responsible for changing the images when the thumbnails are clicked or pressed. The showImage function receives the two arguments you defined in the onClick events in the HTML of the thumbnails. Add this JavaScript to another Code Module.

Wrapping It Up

And there you have it, a fairly simple tutorial on how to switch images. With a little imagination you could get up to all sorts with this one. Technically, you can use fewer Code Modules but I like to separate functions just to keep things obvious in the backend. And like I said in my Typing Text Effect Using Divi Code Modules, are awesome and one of the Divi theme’s best kept secrets.