Спойлеры

Поделиться12022-05-10 18:17:56

Автор: Butch
тутошний главнюк

Парочка кодов, имеющая отношение к теме: убирают поля/интервалы у картинок и заменяют на что-то своё/просто удаляют вместе с отступом треугольную стрелку-маркер у хтмл-спойлера. По идее их можно стационарно выставить в хтмл-верх, но они работают и локально, прописанные в какой-то конкретный пост, - для чистоты эксперимента это даже удобнее.

Поделиться22022-05-10 19:42:04

Автор: Butch
тутошний главнюк

Вот так МОНОЛИТНО должна выглядеть картинка, состоящая из 8 элементов, часть из которых изначально спрятана под спойлеры

А ниже - вся конструкция с использованием стандартных медиа-спойлеров: 4 элемента видны сразу, ещё 3 появляются при первом "заглублении", ещё 1 при втором "заглублении". Выглядит, прямо скажем, кондово...

Поделиться32022-05-30 18:20:34

Автор: Butch
тутошний главнюк

А вот здесь - та же самая "матрёшка", собранная из хтмл-спойлеров с использованием уже поминавшихся в первом посте кодов-модов.
Нормально выглядит и закрытая, и частично развёрнутая, и полностью открытая.

[html]
<style>
.punbb .post-content img.postimg {
margin:-3px 0 0!important;
}
</style>

<style>
details summary {
display: block;
}
details summary::-webkit-details-marker {
display: none;
}
details summary::before {
content: "";
}
details[open] summary::before {
content: "";
}
</style>

<details><summary></summary></details><details><summary></summary><details><summary></summary></details></details>[/html]

Недостатки:
- возможно, все картинки подгружаются сразу (коль скоро это не специализированный медиа-спойлер), и если их будет до полусотни в каждом из 10 постов на страницу, то тормозить будет со страшной силой. Конечно, можно схитрожопить и примитивизировать архитектуру соответствующих разделов: "одна тема = один пост с "матрёшкой", но это потянет за собой и общую реструктуризацию... Такой вариант для учебного форума не очень подходит;
- пока не решён вопрос с оформлением хайда в том же стиле, что и вся матрёшка (в данном примере он даже не рассматривался, обсуждение будет ниже на конкретном примере с "ответами" для лаб.работы, которые до поры должны быть спрятаны).