How do I wrap a JSSOR image with an anchor tag in order to hyperlink a single image?

Question

We upgraded from JSSOR 26.5.2 to 27.5.0, and found that we are no longer able to use "link slides" as described in the JSSOR documentation here:

https://www.jssor.com/development/define-slides-html-code.html

The issue seems to be a DOM change in JSSOR 27. Now there is a new DIV element, the one with data-events=auto and data-display=block, that acts as a kind of "glass" in front of the actual image (the one with u=image). As a result, any ... that surrounds the actual IMG can never be clicked, because the z-index of this "glass" prevents the click on the .

In our case, we've always been using a construct like this:

<a u="image" href="..." style="display: block;">
  <img src="..." alt="..."/>
</a>

It's always worked until now. Is this a bug in JSSOR?

Answer 1

Your code is correct.

Anyway, here is an example, hope this helps.

https://www.jssor.com/jssordev/problems/image-slider.slider

https://www.jssor.com/jssordev/problems/image-slider.slider/=edit

The output code is as below,

<a href="#">
    <img data-u="image" src="//jssorcdn7.azureedge.net/demos/img/gallery/980x380/004.jpg" />
    <div data-t="0" style="position:absolute;top:30px;left:30px;width:500px;height:40px;font-family:Oswald,sans-serif;font-size:32px;font-weight:200;line-height:1.2;text-align:center;background-color:rgba(255,188,5,0.8);">responsive, scale smoothly</div>
</a>

---

Edit

I got the problem, the new version improved to use <a> element as whole slide.In this manner, you can add anything inside without hiding the link area.

That's to say, as <a> is a slide, you can remove the parent <div> element.