wc-bootstrap/assets/js/product-gallery.js

/**
 * Product Gallery Thumbnail Click Handler
 *
 * Swaps the main product image when a gallery thumbnail is clicked.
 * The first thumbnail is the main product image (always included in the strip).
 * Also handles gallery fade-in (WooCommerce sets opacity: 0 by default).
 *
 * @package WcBootstrap
 * @since 0.1.5
 */
(function () {
    'use strict';

    function initGallery() {
        var gallery = document.querySelector('.woocommerce-product-gallery');
        if (!gallery) return;

        // Fade in the gallery (WooCommerce expects JS to set opacity: 1).
        gallery.style.opacity = '1';

        var mainImageContainer = gallery.querySelector('.woocommerce-product-gallery__image');
        if (!mainImageContainer) return;

        var mainImage = mainImageContainer.querySelector('img');
        if (!mainImage) return;

        var thumbs = gallery.querySelectorAll('.wc-gallery-thumb');
        if (!thumbs.length) return;

        thumbs.forEach(function (thumb) {
            thumb.style.cursor = 'pointer';
            thumb.addEventListener('click', function () {
                var fullSrc = this.getAttribute('data-full-src');
                if (!fullSrc) return;

                mainImage.setAttribute('src', fullSrc);

                // Update active state.
                thumbs.forEach(function (t) {
                    t.style.opacity = '0.6';
                    t.classList.remove('border-primary', 'active');
                    t.classList.add('border');
                });
                this.style.opacity = '1';
                this.classList.add('border-primary', 'active');
                this.classList.remove('border');
            });
        });
    }

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initGallery);
    } else {
        initGallery();
    }
})();