Question

我想知道如何实现这一点，因为我想要非常精益的东西，不想使用灯箱。到目前为止，这是我的代码。它会自动为每个图像添加一个click事件，并调用一个函数来显示大图像所在的路径。现在我只需要在屏幕中央显示大图像，就像模态窗口一样。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.6.2.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function () {
            $('#imageContainer img').each(function (index) {
                if ($(this).attr('onclick') != null) {                    
                    if ($(this).attr('onclick').indexOf("runThis()") == -1) {                        
                        $(this).click(function () {
                            $(this).attr('onclick');
                            var src = $(this).attr("src");
                            ShowLargeImage(src);
                        });
                    }
                }
                else {                    
                    $(this).click(function () {                        
                        var src = $(this).attr("src");
                        ShowLargeImage(src);
                    });
                }
            });
        });

        function ShowLargeImage(imagePath) {
            alert(imagePath.replace("small","large"));
        }

    </script>

</head>
<body>
    <div id="imageContainer">        
        <br />
        <br />        
        <img src="/img/small/image3.jpg" />
        <br />
        <br />
        <img src="/img/small/image2.jpg" />
    </div>
    <br />
    <img src="/img/small/image3.jpg" />
</body>
</html>

Answer 1

您可以尝试使用此类fiddle

$('#imageContainer img').each(function (index) {
    if ($(this).attr('onclick') != null) {                    
        if ($(this).attr('onclick').indexOf("runThis()") == -1) {                        
            $(this).click(function () {
                $(this).attr('onclick');
                var src = $(this).attr("src");
                ShowLargeImage(src);
            });
        }
    }
    else {                    
        $(this).click(function () {                        
            var src = $(this).attr("src");
            ShowLargeImage(src);
        });
    }
});

$('body').on('click', '.modal-overlay', function () {
    $('.modal-overlay, .modal-img').remove();
});

function ShowLargeImage(imagePath) {
    $('body').append('<div class="modal-overlay"></div><div class="modal-img"><img src="' + imagePath.replace("small","large") + '" /></div>');
}

您可以修改css以使图像正确对齐，添加关闭按钮等..但基本的想法是存在;）

修改

这是example，图像居中，额外的褪色效果让它更加浪漫！

单击图像时显示较大版本的图像

1 个答案: