За метод поочередных запросов и фикс для 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 это лучше не использовать - одновременно с разворачиванием картинки сработает ссылка.)