Disable popup for images with link.

[gapplef]

Hexo theme NexT provide medium zoom support. After enable medium zoom in my hexo site, I encounter a problem for image with link. Normally, for small images or icons with link, user will be redirected to the linked webpage when clicked, and popup of the image is not expected. Before tryout medium zoom, I use fancybox. Everything work as expected and image with link wouldn't popup when clicked.

So, is it possible disable popup/zoom for image with links with medium zoom?

[francoischalifour]

It seems like you're using a CSS selector that is too permissive. You should use Medium Zoom only on the container of your post content.

Example:

mediumZoom('.post-body img');

If the structure of your content doesn't allow it, perhaps the :not() selector can help.

[gapplef]

@francoischalifour Thanks for your help! Sorry, I am not familiar with CSS. In my case, the image is in the post body. It's a start page I used for the mobile browser, and image are the icons of favorite pages. You may see it here. The page is written in markdown, and generated by hexo. Currently, I am using fancybox, and everything works fine. How can I get the same behave with Medium Zoom in my case?

[francoischalifour]

This should work:

mediumZoom('.post-body :not(a) > img');

[gapplef]

Problem fixed, thanks a lot!

[gapplef]

@francoischalifour I encounter a problem with the solution. The post of my Hexo blog are written in markdown. Image can be insert with markdown syntax or html <img> tags. After addd :not(a) >, all images insert with html <img> tags are not processed by Medium Zoom. Any idea what wrong here?

[JoeyBling]

why i use :not(a) img inoperative, I want to disable all imgs under the a tag including recursion

[JoeyBling]

<a href="https://zhousiwei.gitee.io/">
  <img src="https://zhousiwei.gitee.io/img/head.jpg" />
  <p>
    <img src="https://zhousiwei.gitee.io/img/head.jpg" />
  </p>
</a>

Only for the first layer,not recursion

[monica-m-ps]

why i use :not(a) img inoperative, I want to disable all imgs under the a tag including recursion

Did it work? I am using

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

So this helps your case as well.