Magento – Magento 2 Fotorama click event

fotoramafotorama-sliderjavascriptmagento-2.1

Is there a way to fire a fotorama click event from a template file?

What I am trying to do is have the functionality where, when the user selects an options from the dropdown from the catalog-product-view page, it fires a click event that will select a photo associated with that item.

Code:

app/design/frontend/Vendor/Module/Magento_Catalog/templates/view/option/wrapper.phtml

<?php

$required = '';
if ($block->hasRequiredOptions()) {
    $required = ' data-hasrequired="' . __('* Required Fields') . '"';
}

?>
<div class="product-options-wrapper" id="product-options-wrapper"<?php 
/* @escapeNotVerified */ echo $required; ?>>
  <div class="fieldset" tabindex="0">
      <?php echo $block->getChildHtml('', true);?>
  </div>
</div>

<script type="text/javascript">
require([
    'jquery',
    'fotorama/fotorama',
    'underscore',
    'matchMedia',
    'mage/template',
    'text!mage/gallery/gallery.html',
    'uiClass',
    'mage/translate'
], function ($, fotorama, _, mediaCheck, template, galleryTpl, Class, $t) {
    'use strict';


    $(".specific-select select").on('change', function() {
        // gets value of option
        var thisvalue = $(this).find("option:selected").text();

        var slug = thisvalue.split(" ").join("-");
        slug = slug.substring(0, slug.length - 1).toLowerCase();

        /* want to simulate the click event on the fotorama slider here */
        document.querySelector('img[alt~=slug]').click();



    });
});

Best Answer

Try using the fotorama api:

var api = $([data-gallery-role=gallery-placeholder]).data('gallery');

https://devdocs.magento.com/guides/v2.4/javascript-dev-guide/widgets/widget_gallery.html#gallery_seek https://fotorama.io/docs/4/api/

Related Topic