0

То есть

  1. затемнение (предполагаю, что к body присваивается background-color = black и opacity = 0.5, например)
  2. появившаяся картинка не затемнена, а лежит как будто бы в слое поверх body.

Пример: http://leandrovieira.com/projects/jquery/lightbox/

Спасибо.

1
  • + это реализовано наверно с помощью position:)
    – Undefined
    8 дек 2012 в 18:37

1 ответ 1

2

Не правильно думаете.

Создается какой-нибудь div элемент со свойствами (будет служить затемняющей подложкой):

position: fixed; width:100%; height: 100%; top:0; left:0; background: rgba(0,0,0,.5); z-index:10;

На этот div вешается обработчик, который закрывает просмотр.

Создается второй элемент, который будет служить контейнером для картинок. В css стилях выставляется типа:

position: absolute; left: 50%; z-index:20;

И в javascript (jQuery):

$('img').click(function() {
    $('.lightbox').css({
        'width':this.width, 
        'margin-left':'-'+(this.width/2), 
        'height': this.height
    }).find('img').attr('href', this.src);
});

Примерно вот так.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.