[html]<link rel="stylesheet" href="https://forumstatic.ru/files/0007/e3/f7/40249.css?v=13">
<script>$('#pun-viewtopic #pun-crumbs1').after('<div class="superlink"><a href="/pages/portfolio_code">Портфолио команды</a></div>');</script>
<div id="port-block1" class="free">
<a class="tip" id="cover" title="Превью первой картинки топика в списках тем">
<div id="icon"><div id="my-ic" class="fa-solid fa-gift"></div></div>
<img src="https://sg.uploads.ru/PG6hI.jpg" class="postimg">
</a>
<div id="cover-block">
Дата: 13.10.2020<br>
Автор: <a href="/profile.php?id=2" target="_blank">Герда</a><br>
Бесплатный скрипт<br>
Описание: Добавляет к ячейке с названием топика первую картинку из первого сообщения топика.
</div>
</div>
<style>
.punbb .topicpost .post-content .spoiler-box {
border: 1px solid #26af33;
background-color: rgba(38,175,51,0.1);
}
.punbb .post-content .spoiler-box > div:hover {background-color: rgba(38,175,51,0.6);}
.punbb .post-content .spoiler-box > div {background-color: rgba(38,175,51,0.3);}
.post-content .spoiler-box > div.visible {background-color: rgba(38,175,51,0.8); color: #fff !important;}
#pun .punbb .post-content hr {border: 3px solid #279933;}
.post-content td {background-color: rgb(0,0,0,0.5) !important;}
.visible .quote-box {background-color: rgba(0,0,0,0.5);}
</style>[/html]
За метод поочередных запросов и фикс для html-картинок огромная благодарность Deff
За подсказки по API спасибо Romych
За идею благодарим nouДемо: Портфолио // Каталог стилей
В Html-низ:
Пояснения
Размер превью картинки настраивается тут:Форумы, в которых работает скрипт настраиваются здесь:
var prevForum = [33, 97];
Стиль блока с картинкой можно настроить через селектор:
.prev-pic {
...тут коды...
}Скрипт импортирует первую картинку каждого топика. Если нужно убрать картинки с важных тем, то впишите между тегами <style>:
.punbb .isticky .prev-pic {display: none;}
по аналогии можно поступить с закрытыми темами (.iclosed) и другими типами топиков.
Если вам нужно, чтобы скрипт работал на ВСЕ форумы, воспользуйтесь этим кодом:
Скрипт идеально сочетается со скриптом разворота картинок
Если установить его, при клике на картинку, она развернется на полный размер.За перестройкой стиля страницы топик-листа под эдакий "форум-галерею" (как на скринах) можно обратиться к команде ForumD.ru - Сделать заказ
Написала свеженький вариант скрипта, работающий через новые методы API.
Использует всего два последовательных запроса вместо десятков их - потому должен работать заметно быстрее и не вызывать ошибки из-за перегрузки сервера запросами.
Имеет кучу настроек.
Можно легко добавить команды, которые сработают после вставки превьюшек - чуть ниже настроек есть соответствующая функция.... Требует вдумчивого тестирования с разными вариантами настроек. Если что не так - пишите в этой теме, поправлю.
В Html-низ:
Пример использования события prev_img_end. Если у вас стоит скрипт разворачивания картинок на полный размер, и вы хотите, чтобы он срабатывал после загрузки превьюшек, впишите в функцию события prev_img_end вот такую строчку:
Код:$('.postimg').on('mouseover', (e)=>{postimgOnhover(e.target)});(С настройкой link: 1 это лучше не использовать - одновременно с разворачиванием картинки сработает ссылка.)
