How to add ID attribute to gallery images?

[ivagarfittmage]

Hi,

I need to add ID attribute to images on a product page, like this:

<img id="" href=

I can do this if I modify 

lib/web/fotorama/fotorama.js

How can I do this the right way?

I created

<My Module>/<Name>/web/js/test.js

and in require-config.js I added this:

var config = {
    map: {
        '*': {
            myTest: 'js/test'
        }
    }
};

And file test.js I have this:

define([
    'jquery',
    'jquery/ui',
    'catalogGallery'
], function($){

   
});

What now?

I searched this forum and stackexchange for the similar topics but few I found, like this one:

http://magento.stackexchange.com/questions/105219/magento-2-override-gallery-html-file-from-vendor-magento-magento2-base-lib-web

was not answered.

[Dmitry_Fedyuk]

You have already loaded jQuery library, so use it to locate and iterate the gallery's images.

Then use the Element.id property property to set an ID: https://developer.mozilla.org/en-US/docs/Web/API/Element/id

[ivagarfittmage]

I tried that with .on(load,....) but no luck.

It is Fotorama that creates gallery and I think I need to use something like this but not sure that is correct:

$('.fotorama__stage__frame').on('fotorama:ready', function (e, fotorama) {
  $(this).find(img).attr('id','test');
});