Change image when clicking on small image

  • Is it possible to make an element with big image, under image there would be few small images and when clicking on small image it would replace big image with clicked small image?

    I want to create something like it is on this website: https://www.welderwatch.com/
    (scroll down a bit and there are 3 squares in a row with names: Moody, Royal, Slim.
    Then for example in Moody watch version when clicking on small circle with watch image it replaces the bigger image with the one that user clicked).

    How to achieve something like this? I got Divi theme.

Viewing 4 replies - 1 through 4 (of 4 total)

  • the js: https://www.welderwatch.com/Content/js/custom.js?v=1210

    the script that is doing the work:

    $(".product-quick-preview .tm a").click(function () {
        var n = $(this).data("productid");
        $(this).parents(".pp-col").find(".product-quick-preview").removeClass("active");
        $("#pqp_" + n).addClass("active");
        $(this).parents(".tm").find("a").removeClass("active");
        $("#pqp_" + n).find(".tm").find("[data-productid=" + n + "]").addClass("active");
        $("#pqp_" + n).find(".bottom").children("a").removeAttr("active-data-productid").attr("active-data-productid", n);
    });
    Thread Starter roxxy125

    (@roxxy125)

    But how to apply it to a module in WordPress?

    What is your use case?

    Do you want to use it for Woocommerce product images, like in the example you gave? Or for a gallery of images?

    Most gallery and slider plugins will have such a feature, and there are Woocommerce-specific plugins that do the same for product images. Knowing your specific use case will help us better understand your needs and help you.

    I got Divi theme.

    If you want something that works natively in Divi builder, you’ll need to get in touch with Elegant Themes, makers of Divi, as this is a commercial product so we can’t install it and provide any help here. They have their own support forum here: https://www.elegantthemes.com/forum/

    I also found this commercial Divi theme add-on plugin which offers thumbnail sliders: https://www.divi-pixel.com/modules/image-slider/

    Google!

    Thread Starter roxxy125

    (@roxxy125)

    Thanks for your reply. I want to use it for gallery of images and I want to achieve the same look as it’s on the website I linked which means :
    arrow as a button to redirect to different page like this “All moody watches”
    text on the side like this “Moody” or “Royal” text
    then large image in the middle and under it few small thumbnails and when clicking on thumbnail it becomes this large image and previous large image becomes thumbnail

    I asked on forum because I have no idea if I can achieve something like this with just slider(for example if it’s possible to make slider images so small so it becomes thumbnail or if it’s possible to add button on top etc.)

    It doesn’t have to work natively in Divi builder but would be great if it did.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Change image when clicking on small image’ is closed to new replies.