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.
Pick a color
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.
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 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.
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.