0

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

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

1 回答 1

2

你可以试试这个小提琴

$('#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 以使图像正确对齐，添加关闭按钮等。但基本思想就在那里；）

编辑：

这是一个图像居中的例子，一个额外的淡入淡出效果给它更多的shablam！

于 2012-09-17T07:51:53.080 回答