jQuery, как центрировать изображение по вертикали и горизонтали, иначе изображение лайтбокс?

0

jsFiddle

  $(document).ready (function(){
    $("a").click(function(){
            $(".myCanvas").fadeIn();
            $(".myCanvas").html ($(this).html());               
    }); 
});

a - ссылка изображения. Возможно ли это поставить $(this).css({}); внутри $(this.html)? То, что я пытаюсь сделать, - это когда я нажимаю на изображение, я хочу, чтобы изображение появлялось в середине веб-страницы с прозрачным черным фоном позади него, чтобы покрыть другие изображения, не используя Fancybox и lightbox.

Теги:

2 ответа

2
Лучший ответ

Здесь вы идете чувак:

http://jsfiddle.net/mattdlockyer/SyJSS/1/

CSS:

#img-container {
    position:fixed;
    display:none;
    top:50%;
    left:50%;
    margin-top:-50px;
    margin-left:-100px;
    z-index:9999;
}

JS:

$('.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();
});

Источник: http://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/

Мнение: использовать библиотеки. Обычно есть несколько легких, которые учитывают совместимость браузера. Это боль, чтобы все время сворачивать свое собственное решение.

Поделиться
  • 0
    Сэр, как вы можете сделать так, чтобы он не исчез с задней страницы. Я попробовал это, используя 2 изображения. Всякий раз, когда я нажимаю на изображение, оно исчезает с веб-сайта и отображается в середине. Спасибо
  • 0
    Обновлены скрипка и код, это должно делать то, что вы ищете. Пожалуйста, примите мою правку, так как это делает вопрос более ясным и решение более ценным.
Показать ещё 4 комментария
0

Вот скрипка с решением. Нажмите на изображение (цветной блок), чтобы открыть myCanvas и заполнить его выбранным изображением. Нажмите в любом месте myCanvas чтобы скрыть его и выбрать другое изображение.

HTML:

<div id="wrapper">
    <div class="images_box">
        <a><img style="background: red;" /></a>
         <a><img style="background: blue;" /></a>
         <a><img style="background: green;" /></a>
         <a><img style="background: black;" /></a>
         <a><img style="background: pink;" /></a>
    </div>
    <div class="myCanvas"></div>
</div>

CSS:

* {
    padding: 0px;
    margin: 0px;
}
#wrapper {
    position: relative;
    width: 80%;
    margin-right: auto;
    margin-left: auto;
    height: 300px;
    /*background: #123;*/
}
.images_box {
    width: 100%;
    height: 60px;
}
img {
    display: inline-block;
    height: 50px;
    width: 50px;
    margin: 0px;
    padding: 5px;
}
.myCanvas {
    display: none;
    width: 100%;
    height: 300px;
    position: absolute;
    top: 0px;
    left: 0px;
    background: #999;
}

JavaScript:

$(document).ready(function () {
    $('a').click(function () {
        $('.myCanvas').fadeIn();
        $('.myCanvas').html($(this).html());
        $('.myCanvas').children().css('display', 'block');
        $('.myCanvas').children().css({
            'margin-left': 'auto',
            'margin-right': 'auto'
        });

        var topMargin = 125;

        $('.myCanvas').children().css('margin-top', topMargin);
    });

    $('.myCanvas').click(function () {
        $('.myCanvas').fadeOut();
    });
});

Он принимает изображение (копирует html на myCanvas), а затем центрирует его.

Поделиться
  • 0
    Это много CSS и предполагает фиксированную ширину и высоту ...
  • 0
    Это просто пример. Вы можете взять все ширины и высоты и изменить их, или изменить скрипт, чтобы сделать их динамическими. Это просто доказательство концепции. И только жесткое значение - это topMargin в коде JS, и его можно легко заменить на динамическое значение, рассчитанное по ширине и высоте div.
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню