Вход

Просмотр полной версии : Открытие блока с содержимым при клике на картинку

TRIGUN
04.10.2015, 22:53
Добрый вечер всем.
Уже несколько дней не могу добиться конкретного результат с любых вариантов скриптов.

Суть такова:
Есть порядка 6 картинок. По 3 картинки в строку. Нужно, чтобы при клике на картинку под ней открывался блок с содержимым. При нажатии на другую картинку, первый блок закрывался и открывался второй. И так далее. Также чтобы при нажатии на ту же самую картинку, то ее содержимое скрывалось.
Еще момент, чтобы картинка и ее содержимое не двигало то, что находится справа или слева от нее и ее содержимого, но сдвигало то, что находится под ними.

Пробовал переделать такой вариант, но тщетно.

<style>
div.popup-credit{
border:red 1px solid;
display:none;
}
a.cancelComment {
cursor:pointer;
float:right;

margin:-12px 12px;
}
</style>


<a class="pp-credit-block-button" href="#" onclick="return false">Открыть</a>
<div class="popup-credit">
<div class="credit_block">
<a class="cancelComment" title="Закрыть">X</a>
<h2>Заголовок</h2>
<p>Текст</p>
<p>Текст</p>
<p>Текст</p>
<a class="pp-credit-block-button" href="#" target="_blank">Ссылка</a>
</div>
</div>



<script>
$(".pp-credit-block-button").click( function(){
$(this).next(".popup-credit").toggle("fast")
});
$(".cancelComment").click( function(){
$(this).parents(".popup-credit:first").hide("fast")
});
</script>



Вообще проблема в том, что непосредственно с картинками что либо не получается. И уж тем более, если картинки с подписями или прочим форматирование через css.

Очень прошу помочь вас.
Decode
05.10.2015, 00:22
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<style>
.images > div {
display: flex;
}

figure {
width: 20%;
}

figure > figcaption {
display: none;
}

figure > img {
cursor: pointer;
}
</style>
</head>
<body>
<section class="images">
<div>
<figure>
<img src="http://placehold.it/100x100" alt="" />
<figcaption>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, aperiam cumque dolor facilis fugiat id itaque modi molestiae qui saepe veniam voluptas, voluptatem? Cupiditate id iusto minima vel. Consequatur, ipsam.</figcaption>
</figure>
<figure>
<img src="http://placehold.it/100x100" alt="" />
<figcaption>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, aperiam cumque dolor facilis fugiat id itaque modi molestiae qui saepe veniam voluptas, voluptatem? Cupiditate id iusto minima vel. Consequatur, ipsam.</figcaption>
</figure>
<figure>
<img src="http://placehold.it/100x100" alt="" />
<figcaption>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, aperiam cumque dolor facilis fugiat id itaque modi molestiae qui saepe veniam voluptas, voluptatem? Cupiditate id iusto minima vel. Consequatur, ipsam.</figcaption>
</figure>
</div>

<div>
<figure>
<img src="http://placehold.it/100x100" alt="" />
<figcaption>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, aperiam cumque dolor facilis fugiat id itaque modi molestiae qui saepe veniam voluptas, voluptatem? Cupiditate id iusto minima vel. Consequatur, ipsam.</figcaption>
</figure>
<figure>
<img src="http://placehold.it/100x100" alt="" />
<figcaption>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, aperiam cumque dolor facilis fugiat id itaque modi molestiae qui saepe veniam voluptas, voluptatem? Cupiditate id iusto minima vel. Consequatur, ipsam.</figcaption>
</figure>
<figure>
<img src="http://placehold.it/100x100" alt="" />
<figcaption>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, aperiam cumque dolor facilis fugiat id itaque modi molestiae qui saepe veniam voluptas, voluptatem? Cupiditate id iusto minima vel. Consequatur, ipsam.</figcaption>
</figure>
</div>
</section>

<script>
var section = document.querySelector('.images'), figcaption;

section.onclick = function(e) {
if ( e.target.tagName.toLowerCase() != 'img' ) return;

var figcaptions = document.querySelectorAll('.images figcaption');

figcaption = e.target.nextElementSibling;

[].forEach.call(figcaptions, function(item) {
if(item == figcaption) return;

item.style.display = '';
});

figcaption.style.display = (figcaption.offsetHeight) ? '' : 'block';
};
</script>
</body>
</html>
рони
05.10.2015, 14:34
Decode,
2 состояния либо открыт один из блоков, либо все закрыты.
Decode
05.10.2015, 15:30
рони, изменено.
рони
05.10.2015, 15:51
Decode,
ок :)

ура ты написал открывашку № 225 :dance:
http://javascript.ru/forum/misc/25996-zakrytie-i-otkrytie-diva-po-kliku.html
TRIGUN
05.10.2015, 18:17
Здравствуйте. Спасибо большое.
Извините, я совсем забыл кое что добавить. Хотелось не просто картинки, а картинки с подписью и возможно некоторыми другими атрибутами.

Вижу в скрипте подпись и есть содержимое.
Помогите пожалуйста доделать этот недочет.
рони
05.10.2015, 18:30
Хотелось не просто картинки, а картинки с подписью и возможно некоторыми другими атрибутами.
измените html как вам требуется
TRIGUN
05.10.2015, 19:44
измените html как вам требуется
Дело в том, что вместо картинки должно быть такое:

<figure class="sign">
<img src="http://placehold.it/100x100" alt="" />
<figcaption>Подпись под рисунком</figcaption>
</figure>


И таким образом получается, что вместо содержимого начинает отображаться фраза "Подпись под рисунком", а содержимое вообще не выводится.
TRIGUN
05.10.2015, 19:58
+ к сожалению содержимое в зависимости от расположения картинки тоже сдвигается, а это лишнее.
Т.е. чем правее картинка расположена, там правее и ее содержимое.
Decode
05.10.2015, 23:24
TRIGUN, вы можете показать вашу разметку?