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を変更して、画像を適切に配置したり、閉じるボタンを追加したりできますが、基本的な考え方はそこにあります;）

編集：

これは、画像を中央に配置し、追加のフェード効果でもう少しシャブラムを与える例です。

于 2012-09-17T07:51:53.080 に答える