Magento 2 Product: programmatically 'click' thumbnail

Question

Is it possible to programmatically 'click' a thumbnail in the fotorama gallery on a product page to switch to that image? I'm trying to change the product image based on selected custom attributes for the product. I know Magento supports this functionality for configurable products, but for reasons I'm not going into here, I can't use configurable products. I have simple products with custom attributes and I want to trigger an image change when one of those options changes. Is that possible?

Answer 1

Actually, I found something! If you think there is a better solution, please comment or provide your own.

You can attach an event to the loading of the gallery and also to the change of the option value. When one changes, call 'seek' on the gallery.

This uses the Magento Gallery API, which you can find more info about HERE. The API docs don't discuss the requireJS hooks as you see below, I found those on another SE article.

<script type="text/javascript">
    require(['jquery', 'mage/gallery/gallery'], function($, gallery){
        $('[data-gallery-role=gallery-placeholder]').on('gallery:loaded', function () {
            $(this).on('fotorama:ready', function(){
                var api = $(this).data('gallery');

                var bottleSelector = $('#select_2');

                bottleSelector.change(function () {
                    var curVal = this.value;

                    if(parseInt(curVal))
                        api.seek(parseInt(curVal));
                });
            });
        });
    });
</script>