javascript - How to implement the front-end image in the article. Click to pop up to enlarge, then click to retract.

Question

In a recent project, there was an article published by a member. When the illustrations of the article are displayed on the mobile phone, sometimes you need to zoom in to view them, and you cannot click to enlarge.

Only the img tag can be operated here.

$("img").click(function(){

$(this).wrap('<a href='+$(this)[0].src+'></a>')

})

Add a tag href to img and write the path of img. The picture will pop up, but there is no way to return. Solve

Similar to the picture shown, how to implement this front-end or plug-in!

Answer 1

Click on the image to create a new mask layer. The src of the image in the mask layer is equal to the src of the target you clicked

Answer 2

You can take a look at jquery’s plug-ins for image effects. Directly introduce it into your project, then do some configuration, and it will be implemented.
Like this effect: http://www.jq22.com/yanshi6536

Answer 3

If you want to achieve it yourself

I think what you mean is that after clicking on the picture, the picture is wrapped with a layer of a tag

You can change your thinking

Use location.href to jump after clicking. This makes it easier to judge whether to jump or return in js

The large picture after popping up has a black background, which is easiest for users to understand. In fact, users can click on the black background to return.

The hierarchical relationship between the background and img has been established. Use event.target to determine whether the clicked image is a picture or a black background.

Decide whether to jump or return

Answer 4

You are talking about this kind of plug-in, right? http://refined-x.com/Flow-UI/...

Answer 5

I haven’t written about the mobile version, but I have written about similar effects on the PC version.
The method is to add a mask layer, which is usually hidden. When the image is clicked, the mask layer toggle(), and then assigns the src attribute of the image to the img of the mask layer.
Of course, you need to set the style of the mask layer img, such as: max-width, max-height, centered, etc.
Finally, the level of the mask layer should be the highest.