问题描述:

I was wondering how to achieve this as I want something very lean and don't want to use light box. Here is my code so far. It automatically adds a click event to each image and calls a function to display the path of where the large image is. Now I just need to display the large image like a modal window in the center of the screen.

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

网友答案:

You can try something like this 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>');
}
​

You can modify the css to get the image properly aligned, add a close button etc.. but the basic idea is there ;)

Edit:

Here is an example with the image centered and an extra fading effect giving it a little more shablam!

相关阅读:
Top