Jssor Slider - How to add checkbox to thumb image

Question

How to add a checkbox to each thumb image

<div u="slides" style="cursor: move; position: absolute; left: 140px; top: 20px; width: 410px; height: 450px; overflow: hidden;">
    <div>   
        <input type="checkbox" id="chk1" />           
        <img u="image" src="../img/travel/01.jpg" />
        <img u="thumb" src="../img/travel/thumb-01.jpg" />
    </div>
    <div>              
        <input type="checkbox" id="chk2" />           
        <img u="image" src="../img/travel/02.jpg" />
        <img u="thumb" src="../img/travel/thumb-02.jpg" />
    </div>
</div>

It is not working. It doesn't show the checkbox in UI.

Can any help me with this.

Answer 1

See the sample, http://www.jssor.com/testcase/thumbnail-with-checkbox.source.html

Please note the following manner to select your checkbox.

        var thumbnailNavigatorContainer = $(".jssort07");
        var checkbox01 = thumbnailNavigatorContainer.find(".chk01");

Answer 2

Please always add style position, top, left, width, height for static element.

Try following code,

<div u="slides" style="cursor: move; position: absolute; left: 140px; top: 20px; width: 410px; height: 450px; overflow: hidden;">
    <div>           
        <img u="image" src="../img/travel/01.jpg" />
        <div u="thumb" style="background-image: url(../img/travel/thumb-01.jpg);" >
            <input type="checkbox" id="chk1" style="position: absolute; top: 10px; left: 10px; width: 20px; height: 20px; />
        </div>
    </div>
    <div>              
        <img u="image" src="../img/travel/02.jpg" />
        <div u="thumb" style="background-image: url(../img/travel/thumb-02.jpg);" >
            <input type="checkbox" id="chk2" style="position: absolute; top: 10px; left: 10px; width: 20px; height: 20px; />
        </div>
    </div>
</div>

Btw, you can can use any html code for your thumbnail.

---

I checked the code and detected it by using the 'inspect element' tool of browser, your check box was covered by other ui. The reason is that the prototype of thumbnail in 'Thumbnail Navigator Skin 02' is as follows,

            <div u="prototype" class="p" style="position: absolute; width: 99px; height: 66px; top: 0; left: 0;">
                <div class=w><thumbnailtemplate style=" width: 100%; height: 100%; border: none;position:absolute; top: 0; left: 0;"></thumbnailtemplate></div>
                <div class=c>
                </div>
            </div>

I checked and tested with following thumbnail navigator skins, it works OK.

skin\thumbnail-07.source.html

skin\thumbnail-08.source.html

skin\thumbnail-11.source.html

skin\thumbnail-12.source.html