html - 带有缩略图的 ListView ，按下时弹出图像

Question

我正在尝试向代码添加一些内容，以便当用户按下缩略图时，该图片会弹出或类似的东西，因此可以“全屏”查看。

<ul data-role="listview">
    <li data-icon="false"><a href="next.php?pic=1">
        <div class="ui-block-a" style="width:50%"><p class="pic-wrapper"><img class="popphoto" src="images/pic1.png" width="150" height="150" /></p></div>
        <div class="ui-block-b" style="width:50%"><h3>Test</h3></div>
    </a></li>
    <li data-icon="false"><a href="next.php?pic=2">
        <div class="ui-block-a" style="width:50%"><p class="pic-wrapper"><img src="images/pic2.png" width="150" height="150"/></p></div>
        <div class="ui-block-b" style="width:50%"><h3>Test</h3></div>
    </a></li>
</ul>

我找到了一些信息here但我在想，因为列表的整个单元格都是一个链接/可点击，它与缩略图链接冲突。

我怎样才能做到这一点？

Answer 1

将 click 事件 - 或任何其他事件 - 绑定(bind)到 li 并检查被点击的元素 (e.target) 是否具有 popupimg 类。如果为 true，preventDefault()，修改弹出窗口中的 img src，然后以编程方式打开它。

JS

$(document).on("pageinit", "#page_id", function () {
    $("li").on("click", function (e) {
        if ($(e.target).hasClass("popphoto")) {
            e.preventDefault();
            var photo = $(e.target).attr("src");
            $("#popupimg").find("img").attr("src", photo);
            $("#popupimg").popup({
                "dismissible": false // optional
            }).popup("open");
            // adjust popup and img height on resize
            $("#popupimg").on("popupbeforeposition", function () {
                var maxHeight = $(window).height() - 60 + "px";
                $("#popupimg, #popupimg img").css("max-height", maxHeight);
            });
        }
    });
});

HTML

<div data-role="popup" id="popupimg" data-overlay-theme="a" data-corners="false">
  <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
  <img src="" />
</div>

Demo