простой jquery на галерее изображений - PullRequest
Новая
       11

простой jquery на галерее изображений

0 голосов
/ 31 августа 2018

У меня есть простая галерея, и когда я нажимаю на изображение (размер определен в теге img), оно должно открывать его в центре экрана и изменять его размер до его первоначальных размеров или других определенных размеров. Теперь он просто центрирует изображение. Спасибо! 

    <style>
#img-cover {
    position: absolute;
    display:none;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    background-color:black;
    opacity:0.6;
    z-index:9998;
}
#img-container {
    position:fixed;
    display:none;
    top:50%;
    left:50%;
    margin-top:-50px;
    margin-left:-100px;
    z-index:9999;
}
</style>

    <script>
            $('.img').on('click', function (e) {
    $('#img-cover').fadeIn();
    var img = $(this);
    $('#img-container').html(img.clone())
        .css({
        'margin-top': '-' + img.height() / 2 + 'px',
            'margin-left': '-' + img.width() / 2 + 'px'
    }).fadeIn();
});

$('#img-cover').on('click', function () {
    $('#img-cover').fadeOut();
    $('#img-container').fadeOut();
});
            </script>

1 Ответ

0 голосов
/ 03 сентября 2018

Использование .clone () имеет побочный эффект. Это производит элементы с дублирующими атрибутами id. Атрибуты Id должны быть уникальными. Предположим, вы хотите показать пользователям изображения в галерее. На веб-странице будут отображаться изображения небольшого размера. Когда пользователь нажимает на изображение, на странице будет отображаться изображение исходного размера. Demo2 делает именно это. Наслаждайтесь! 

//
<!DOCTYPE html>
<!--
index.html
-->
<html>
<head>
    <title>Image Gallery</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style type="text/css">
        #img-cover {
            position: absolute;
            display: none;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            background-color: black;
            opacity: 0.6;
            z-index: 9998;
        }
        #img-container {
            position: fixed;
            display: none;
            top: 50%;
            left: 50%;
            margin-top: -50px;
            margin-left: -100px;
            z-index: 9999;
        }
        #frame {
            position: absolute;
            display: none;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            background-color: gold;
            opacity: 0.6;
            z-index: 9997;
        }
    </style>
    <script src="pathto/jquery/jquery-1.8.0.js"></script>
    <script type="text/javascript" >
        $(document).ready(function() {
            $('.img4').on('click', function (e) {
               $('#frame').fadeIn('slow');
               $('#img-cover').fadeOut('slow');
               $('#img-container').fadeOut('slow');
            });
           $('img').on('click', function (e) {
               $('#img-cover').fadeIn();
               var img = $(this);
               $('#img-container').html(img.clone())
                   .css({
                   'margin-top': '-' + img.height()/2 + 'px',
                   'margin-left': '-' + img.width()/2 + 'px'
                }).fadeIn();
            });
            $('#img-cover').on('click', function (){
                $('#img-cover').fadeOut();
                $('#img-container').fadeOut();
            });
            $('#btnReset').on('click', function (){
                $('#frame').fadeOut();
            });
        });

    </script>
</head>
<body>
    <div class="img2">
        <h1>Image Gallery2.</h1>
    </div>
    <div class="img3">
        Demo1
        <img src="pathto/images/myimage.jpg" height="110" width="110" alt="MyImage" />
    </div>
    <div id="img-container">
        Image container.
    </div>
    <div id="img-cover">
        Image cover.
    </div>
    <hr>
    <div class="img4">
        Demo2
        <img src="pathto/images/myimage.jpg" height="110" width="110" alt="MyImage" />
    </div>
    <hr>
    <div id="frame">
        Demo3
        <img src="pathto/images/myimage.jpg" alt="MyImage" />
        <hr>
        <input type="button" id="btnReset" value="Reset" />
    </div>
</body>
</html>
//
...