3

I am trying a "click" or "change" event on fotorama thumbnail images. While clicking the thumbnail images I need to fire a "click" or "change" event. I have read the below documents but am unable to find a proper solution. Suggest me if anyone has an idea on this.

Devdocs link: https://devdocs.magento.com/guides/v2.4/javascript-dev-guide/widgets/widget_gallery.html#gallery_seek

enter image description here

2
  • are you searching for the phtml file? Aug 3 at 4:16
  • @Dhiren Vasoya I am not looking for phtml file. I need a click or change event while changing the fotorama thumbnail images. Aug 3 at 4:18
4
  1. There are three ways to change the image Nav Frame image click, Nav prev/next arrow click and Slide the image. enter image description here enter image description here enter image description here
  2. jQuery event dispatched on dispatch() method on 5192 line from {Magento2 root directory}/lib/web/jquery.js. In that method, at line 5231 the handler is applied for the matched.element in which whole gallery div is handled. enter image description here enter image description here
  3. In code flow handler takes to {Magento2 root directory}/lib/web/fotorama/fotorama.js in which at line 2765 navUpdate() or at line 5417 updateFotoramaState() method will be apt for the requirement.
  4. Using the file fotorama.js in theme or mapping in requirejs-config.js, you can add the additional logic in that.
3

This is also one of the answers for achieving click events on thumbnail images without modifying the fotorama.js file which suits my requirement.

We can directly add the click event for the nav frame thumbnail image click.

$(document).on('click', '.fotorama__nav__frame', function () {
   console.log(this);
});

But by using this event we cannot track nav updates in the thumbnail images such as prev/next arrow click and slide the image.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.