Затемнение картинки в блоке.

@sash · Регистрация: 09.10.2014

Author24 — интернет-сервис помощи студентам

Всем привет, уважаемые! Значит вчера у меня созрел план, сегодня с 8 утра пытаюсь реализовать.
Задумано было, картинка должна появлться в блоке с позициен фикст:
типа эффект затемнения

Javascript

$('img:not(a img)').click(function(){
$(this).after('<div id="none" style="position: fixed;top:0; left:0; display: block; z-index:3;width: 100%; height: 100%; background-color: rgba(0,0,0,0.9); text-align: center; padding-top: 200px;"><img src='+$(this).attr('src')+'></div>');
 
// вот это только раз срабатывает:
$('#none').click(function(){
 $('#none').css({'display':'none','z-index':'1'});
  });   
});

Что мне делать, помогите выйти на чистую воду.. я вроде понимаю в чём дело а сказать словами не могу..)

@alexbbell · 11.10.2014, 11:02

Создадим класс в CSS, который будет скрывать лишние элементы

CSS

    <style>
        .foo {
            display: none;
        }
    </style>

В Javascript - во все элементы li после max = 8 добавляем класс .foo, который делает скрытыми элементы

Javascript

<script>
        $("ul").ready(function () {
            max = 8;
            i = 0;
            $("ul li").each(function() {
                i += 1;
                if(i > max) {
                    $(this).addClass("foo");
                }
            })
        });
     </script>

@sash · 11.10.2014, 12:56 **[ТС]**

Вы видно меня с кем то спутали, я про другое спрашивал)

@Lazy_Den · 11.10.2014, 13:05

И вчера смотрел ваши (продублированные) вопросы, и сегодня перечитывал, но ничего не понял.

Сообщение от sash

я вроде понимаю в чём дело а сказать словами не могу

А вот в это охотно верю

@sash · 11.10.2014, 13:18 **[ТС]**

При нажатии на картинку она появляется в центре экрана в блоке который имеет фиксированное позиционирование 100% ширину и высоту и прозрачность 0.8. тира как эффект затемнения получается. и всё вроде бы сработало но когда на другую картинку на сайте уже жмешь то блок не становится дисплей нон

И ещё пробовал вариант:
в коде хтмл написал блок с дисплей нон и прочими аитрибутами:

$('img:not(a img)').click(function(){
var nonediv=$('#none');
$(nonediv).css('display': 'block').html('<img src='+$(this).attr('src')+'>');
});
ай нид хэлп! уже третий день мучусь))

@Lazy_Den · 11.10.2014, 13:57

sash, буду надеяться, что на этот раз понял правильно. Существуют уже готовые решения, как , например, fancybox (их проект на github), но если какие-то сверх навороты не нужны, то смотрите такой вариант.

Javascript

var overlay = $('#overlay'),
    modal = $('#modal');
$('img').on('click', function(){
    $(this).clone(false).appendTo(modal).addClass('fullimg');
    overlay.fadeIn();
});
overlay.on('click', function(){
    $(this).fadeOut('fast', function(){
        modal.html('');
    });
});
modal.on('click', function(e){
    e.stopPropagation();
});

Элемент с оверлеем (затемняющий слой) и его дочерним элементом (id=modal), можно держать статичными на странице, чтоб постоянно не нагружать созданием новых экземпляров, а потом их удалением. В общем, в примере всё достаточно просто и ясно (надеюсь). Кликаем по картинке - она открывается, кликаем по оверлею - всё в обратном порядке.

@sash · 11.10.2014, 16:49 **[ТС]**

Спасибо. самое оно! Только вот у меня не хочет и всё тут (

всё вставил как книжка пишет и не хочет.. даже когда эти две картинки отдельно записываю в файл, всё-всё подключаю(а как же без этого)и NULL

Добавлено через 12 минут
http://henaro.vindetta.net/ во смотри учебный сайт)))

Добавлено через 45 минут
сохранил страницу теперь работает))) там ещё нужно было какието 2 файла ссs подключать. а я ж такой наивный думал всё получится, возьму и напишу скриптик.. щас!)

@sash 89 / 87 / 49 Регистрация: 09.10.2014 Сообщений: 571
	11.10.2014, 12:56 [ТС]	3
	Вы видно меня с кем то спутали, я про другое спрашивал) 0

@Lazy_Den 3325 / 2845 / 1423 Регистрация: 15.01.2014 Сообщений: 6,170
	11.10.2014, 13:05	4
	И вчера смотрел ваши (продублированные) вопросы, и сегодня перечитывал, но ничего не понял. Сообщение от sash я вроде понимаю в чём дело а сказать словами не могу А вот в это охотно верю 0

@sash 89 / 87 / 49 Регистрация: 09.10.2014 Сообщений: 571
	11.10.2014, 13:18 [ТС]	5
	При нажатии на картинку она появляется в центре экрана в блоке который имеет фиксированное позиционирование 100% ширину и высоту и прозрачность 0.8. тира как эффект затемнения получается. и всё вроде бы сработало но когда на другую картинку на сайте уже жмешь то блок не становится дисплей нон И ещё пробовал вариант: в коде хтмл написал блок с дисплей нон и прочими аитрибутами: $('img:not(a img)').click(function(){ var nonediv=$('#none'); $(nonediv).css('display': 'block').html('<img src='+$(this).attr('src')+'>'); }); ай нид хэлп! уже третий день мучусь)) 0

@sash 89 / 87 / 49 Регистрация: 09.10.2014 Сообщений: 571
	11.10.2014, 16:49 [ТС]	7
	Спасибо. самое оно! Только вот у меня не хочет и всё тут ( всё вставил как книжка пишет и не хочет.. даже когда эти две картинки отдельно записываю в файл, всё-всё подключаю(а как же без этого)и NULL Добавлено через 12 минут http://henaro.vindetta.net/ во смотри учебный сайт))) Добавлено через 45 минут сохранил страницу теперь работает))) там ещё нужно было какието 2 файла ссs подключать. а я ж такой наивный думал всё получится, возьму и напишу скриптик.. щас!) 0

Опции темы

Затемнение картинки в блоке.

Решение