cancel
Showing results for 
Search instead for 
Did you mean: 

How to add ID attribute to gallery images?

How to add ID attribute to gallery images?

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.

2 REPLIES

Re: How to add ID attribute to gallery images?

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

Re: How to add ID attribute to gallery images?

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');
});