Форум

serdeles · #1 (**permalink**) 11.04.2017, 13:58

Привет!

Делаю галерею для сайта. Есть несколько видов картинок: в моем примере это id «nature, car, girl». По задумке, при наведении курсора на тумбнейл, изображение скрывается, на его месте появляется плашка, залитая цветом (своим для каждого id), плюс дополнительный блок поверх плашки с заголовком и описанием. Убрали курсор, плашка с описанием исчезает, картинка возвращается.

Частично мне удалось сделать рабочий код:

$(function(){
	
	 	 $('div#nature').on('mouseenter mouseleave', function(){ 
		 $(this).toggleClass('hover-nature .dscr');
         $('#nature .dscr').toggle();			 
		 });
        
        $('div#car').on('mouseenter mouseleave', function(){ 
		 $(this).toggleClass('hover-car .dscr2');
         $('.dscr2').toggle();			 
		 });
        
        $('div#girl').on('mouseenter mouseleave', function(){ 
		 $(this).toggleClass('hover-girl .dscr3');
         $('.dscr3').toggle();			 
		 });
        
	 });

Но если добавить новые блоки (с такими же id), при наведении курсора на тумбнейл картинка и плашка ведут себя корректно, а вот описание (дополнительный блок, в коде — dscr) выделяется для одинковых id в разных блоках одновременно.

Подскажите, где я накосячил. В аттаче более наглядный рабочий пример.

laimas · #2 (**permalink**) 11.04.2017, 14:24

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

Но если добавить новые блоки (с такими же id)

Поэтому и косяк - таких же ID не должно быть на странице, каждое ID должно быть уникально.

serdeles · #3 (**permalink**) 11.04.2017, 14:33

Они и так уникальные. Это категории. Их три (возможно, будет больше, это не суть). Но разве не может быть три картинки с одинаковыми id?

К тому же с плашками-то всё в порядке. Они выделяются цветом по одной при ховере.

Возможно, я сформулировал проблему неправильно — в аттаче наглядный пример. Там сразу видно, что не так. Другой вопрос, что решение не столь очевидно :-(

laimas · #4 (**permalink**) 11.04.2017, 14:37

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

Они и так уникальные.

А это как понимать - "добавить новые блоки (с такими же id),... для одинковых id в разных блоках"?

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

Но разве не может быть три картинки с одинаковыми id?

На здоровье, но если будет обращение к ним по ID, получите совсем не то, чего ожидается.

ID одинаковых быть не должно и точка. На то оно и ID.

serdeles · #5 (**permalink**) 11.04.2017, 14:54

Ок. Забудем про id и заменим их на классы ))

Вопрос: почему даже если сделать 100 блоков с классом nature при ховере они срабатывают корректно по одному (а не выделяются все вместе)?

При этом описание становится видимым одновременно на всех блоках.

$('div.nature').on('mouseenter mouseleave', function(){
$(this).toggleClass('hover-nature .dscr');
$('.nature .dscr').toggle();

Думаю, что проблема в 3-й строке. Но как ее изменить, чтобы код отрабатывал корректно, никак не догоню.

рони · #6 (**permalink**) 11.04.2017, 15:33

serdeles,
зачем нужен скрипт?

laimas · #7 (**permalink**) 11.04.2017, 15:55

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

Думаю, что проблема в 3-й строке.

Проблема в не уникальности.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<style>
#slidebox div {
    width: 320px;
    height: 240px;
    float: left;
}

.dscr {
    position: absolute;
    height: 100%;
    background: #017BA3;
}

.dscr * {
    color: #fff;
}

#slidebox div img {
    display: block;
    position: absolute;
    z-index: 10;
}

#slidebox div img:hover {
    opacity: 0;
}
</style> 
</head>
<body>
<div id="slidebox">
    <div>
        <div class="dscr">
            <h1>Заголовок</h1>
            <p>Описание</p>
        </div>
        <img src="http://1fenshui.ru/wp-content/uploads/2012/03/400x300_arbol_luminoso.jpg" />
    </div>
    <div>
        <div class="dscr">
            <h1>Заголовок</h1>
            <p>Описание</p>
        </div>
        <img src="https://fs.net-film.ru/fs41884b.jpg" />
    </div>
    <div>
        <div class="dscr">
            <h1>Заголовок</h1>
            <p>Описание</p>
        </div>
        <img src="http://gtrk-omsk.ru/upload/iblock/8c8/los.jpg" />
    </div>
    <div>
        <div class="dscr">
            <h1>Заголовок</h1>
            <p>Описание</p>
        </div>
        <img src="http://pic.oscdn.net/pic/3409886/m" />
    </div>
    <div>
        <div class="dscr">
            <h1>Заголовок</h1>
            <p>Описание</p>
        </div>
        <img src="http://baikal-turs.ru/wp-content/uploads/2013/12/elnik_456465.jpg" />
    </div>
    <div>
        <div class="dscr">
            <h1>Заголовок</h1>
            <p>Описание</p>
        </div>
        <img src="http://images.bankoboev.ru/thumbnail/bankoboev.ru-456870.jpg" />
    </div>
</div>
</body>
</html>

serdeles · #8 (**permalink**) 11.04.2017, 16:19

Спасибо. Но вариант на CSS, к сожалению, не прокатит :-)
Галерея будет работать по принципу pinterest.com — картинки (и блоки, соответственно) будут разного размера по высоте. Категории будут выделены отдельным цветом. Это касается как цвета фона, так и цвета заголовков. Кроме того, категории планируется динамически отсортировывать, логично это делать при помощи jQuery.

laimas · #9 (**permalink**) 11.04.2017, 16:35

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

Но вариант на CSS, к сожалению, не прокатит

Ну это как сказать. Но проблема то не в этом, это же самое можно и на JS сделать. Вот только зачем дублирование трижды одного и того же кода? Зачем даже без багов ID присваивать одинаковый класс элементам, по которым обращаться к ним и при этом ожидать, что реагировать должен один из них?

На CSS работает? И для работы требуется минимум. Думаем и...

serdeles · #10 (**permalink**) 11.04.2017, 16:46

В общем-то галерея уже сделана, и работает ))
Но вот код получился многэтажный. Собственно, сюда я и обратился с целью его как-то оптимизировать. Зайти, цскыть, с тылов. Все равно спасибо за потраченное время )

Форум

Справочник

Discord чат

Курсы javascript