Открытие блока с содержимым при клике на картинку
Добрый вечер всем.
Уже несколько дней не могу добиться конкретного результат с любых вариантов скриптов. Суть такова: Есть порядка 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. Очень прошу помочь вас. |
<!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>
|
Decode,
2 состояния либо открыт один из блоков, либо все закрыты. |
рони, изменено.
|
Decode,
ок :) ура ты написал открывашку № 225 :dance: http://javascript.ru/forum/misc/2599...-po-kliku.html |
Здравствуйте. Спасибо большое.
Извините, я совсем забыл кое что добавить. Хотелось не просто картинки, а картинки с подписью и возможно некоторыми другими атрибутами. Вижу в скрипте подпись и есть содержимое. Помогите пожалуйста доделать этот недочет. |
Цитата:
|
Цитата:
<figure class="sign"> <img src="http://placehold.it/100x100" alt="" /> <figcaption>Подпись под рисунком</figcaption> </figure> И таким образом получается, что вместо содержимого начинает отображаться фраза "Подпись под рисунком", а содержимое вообще не выводится. |
+ к сожалению содержимое в зависимости от расположения картинки тоже сдвигается, а это лишнее.
Т.е. чем правее картинка расположена, там правее и ее содержимое. |
TRIGUN, вы можете показать вашу разметку?
|
| Часовой пояс GMT +3, время: 22:58. |