Search code examples
htmlcssimagejssor

HTML input + label collides with JSSOR gallery's script - ANY FIX?


I wonder if anyone tried to add input radio buttons and associated labels into JSSOR image gallery. This is the prototype I tried to achieve and it works: https://jsfiddle.net/agq0rgoL/

The goal is to set the very first input and label as default by having it checked until you click the next label(I put img inside the label) which will link to its associated radio button. In the end I used input:checked and input:checked + label to modify their styles (opacity in this case)

But this linkage between radio button and label does not work when you insert them into to JSSOR gallery. checked is not working as well.

Just like to know if there is a workaround/fix for this.


Solution

  • The problem has been fixed, please download the latest version.

    Also, please remove the <A> element from your html code.

    That's to say replace,

    <a><img src="http://d3d71ba2asa5oz.cloudfront.net/40000483/images/thumbnail1.jpg"></a>
    

    with

    <img src="http://d3d71ba2asa5oz.cloudfront.net/40000483/images/thumbnail1.jpg">