How to disable for svg images?

[monica-m-ps]

Hi. First of all, thank you for this feature. I love this. And have used it for our website https://docs.dojo.tech/docs/

So if you scroll down to the plugins section where we have the svg images of those plugins, the zoom should ideally not work there because of redirection to another page. How do I disable the zoom for these svg icons?

[francoischalifour]

It seems like you rather want to disable the zoom on images that are contained in links. We have a thread about this.

In your selector, you can use :not(a):

mediumZoom(':not(a) > img');

[monica-m-ps]

Thanks!

selector: ':not(a) > img:not([src$=".svg"])'

Solved it. The previous one did not acknowledge the svg images without links. I was able to zoom into them as well. But that helped to build the logic.

[monica-m-ps]

I see one limitation that svg images in markdown tables are not considered. Can you please provide a solution to that as well?

[francoischalifour]

You can combine the selectors as a regular CSS selector:

mediumZoom(':not(a) > img:not([src$=".svg"]), :not(table) > img:not([src$=".svg"])');

(To adjust depending on your HTML.)

An alternative is to create an HTML wrapper in the element you want your images to be zoomable.

<div class="wrapper">
...
</div>

<script>
  mediumZoom('.wrapper img')
</script>