Javascript Jssor滑块-如何将复选框添加到拇指图像

如何为每个拇指图像添加复选框

<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>

它不起作用。它不会在UI中显示复选框

---

有什么可以帮我的吗。

请始终为静态元素添加样式位置、顶部、左侧、宽度和高度

试试下面的代码

<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>

顺便说一句，你可以使用任何html代码为你的缩略图

---

我使用浏览器的“检查元素”工具检查代码并检测到它，您的复选框被其他ui覆盖。 原因是“缩略图导航器皮肤02”中的缩略图原型如下：

            <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>

我检查并测试了以下缩略图导航器皮肤，它工作正常

皮肤\缩略图-07.source.html

皮肤\缩略图-08.source.html

皮肤\缩略图-11.source.html

skin\thumbnail-12.source.html

参见示例

请注意以下方式选择您的复选框

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

---

你能把代码贴在工作日志里吗。我想有一些CSS/JS控制着幻灯片，这会弄乱布局。嗨，你能检查一下这个滑块吗？我正在使用这个滑块。请从此站点下载代码。@Nagarjuna DIlip:您是否希望看到这样的内容：您好，否..复选框根本不显示。请检查我的代码[（）。左侧有一个图像。复选框应与图像一起出现。如何共享我的输出屏幕？您好，图像未加载且无法选择复选框。请从此链接下载示例代码。选择/image-gallery-with-vertical-thumbnail.htmlHi，仍然相同…无法选择复选框且图像不可用加载…我认为您正在为选中的较大图像提供解决方案。我希望左侧滑块的所有拇指指甲图像都应显示复选框…如果您为滑块缩略图图像提供解决方案，这将很有帮助..我想将我的UI的短屏幕分享给您，以便更好地理解…但是，我不知道如何共享…谢谢等待您的耐心和响应。您好，抱歉忽略我的上述消息…是的，正如您所说..skin 02正在覆盖。如何克服它…？&拇指图像未显示…我评论skin 02工作正常..但thumnail图像未显示…缩略图图像显示为空白（黑色）…我补充了另一个答案。很抱歉回复太晚。我不在车站。谢谢你的解决方案。这对我帮助很大。