04.10.2015, 22:53
|
|
Интересующийся
|
|
Регистрация: 13.04.2014
Сообщений: 26
|
|
|
Открытие блока с содержимым при клике на картинку
Добрый вечер всем.
Уже несколько дней не могу добиться конкретного результат с любых вариантов скриптов.
Суть такова:
Есть порядка 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.
Очень прошу помочь вас.
|
|
05.10.2015, 00:22
|
|
Профессор
|
|
Регистрация: 31.01.2015
Сообщений: 576
|
|
<!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, 05.10.2015 в 15:29.
|
|
05.10.2015, 14:34
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,072
|
|
|
Decode,
2 состояния либо открыт один из блоков, либо все закрыты.
|
|
05.10.2015, 15:30
|
|
Профессор
|
|
Регистрация: 31.01.2015
Сообщений: 576
|
|
|
рони, изменено.
|
|
05.10.2015, 18:17
|
|
Интересующийся
|
|
Регистрация: 13.04.2014
Сообщений: 26
|
|
|
Здравствуйте. Спасибо большое.
Извините, я совсем забыл кое что добавить. Хотелось не просто картинки, а картинки с подписью и возможно некоторыми другими атрибутами.
Вижу в скрипте подпись и есть содержимое.
Помогите пожалуйста доделать этот недочет.
|
|
05.10.2015, 18:30
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,072
|
|
|
Сообщение от TRIGUN
|
|
Хотелось не просто картинки, а картинки с подписью и возможно некоторыми другими атрибутами.
|
измените html как вам требуется |
|
05.10.2015, 19:44
|
|
Интересующийся
|
|
Регистрация: 13.04.2014
Сообщений: 26
|
|
Сообщение от рони
|
|
измените html как вам требуется
|
Дело в том, что вместо картинки должно быть такое:
<figure class="sign">
<img src="http://placehold.it/100x100" alt="" />
<figcaption>Подпись под рисунком</figcaption>
</figure>
И таким образом получается, что вместо содержимого начинает отображаться фраза "Подпись под рисунком", а содержимое вообще не выводится. |
|
05.10.2015, 19:58
|
|
Интересующийся
|
|
Регистрация: 13.04.2014
Сообщений: 26
|
|
|
+ к сожалению содержимое в зависимости от расположения картинки тоже сдвигается, а это лишнее.
Т.е. чем правее картинка расположена, там правее и ее содержимое.
|
|
05.10.2015, 23:24
|
|
Профессор
|
|
Регистрация: 31.01.2015
Сообщений: 576
|
|
|
TRIGUN, вы можете показать вашу разметку?
|
|
|
|
