ForumD.ru - Дизайн для форумов, скрипты для форумов, техническая поддержка

Объявление

Загадочный Дом «Кузнечик»

Форумные игры, кино, позитивное отношение и душевное общение!
Есть в мире место, где душе тепло...
Заходи, мы будем тебе рады!

Подробнее

Мийрон

Качественный пиар быстро и недорого.
Красивейшие дизайны по низким ценам.
Каталог ролевых игр.

Подробнее

Дизайн «Warlords of Draenor»

Детализированный rpg-дизайн для MyBB форума гильдии «Warlords of Draenor»
Стоимость при покупке эксклюзивно: 6300р
В стоимость входит настройка и корректировка дизайна под ваш проект.

Подробнее

Светлый дизайн в фентези стиле с аниме-графикой

Макет для светлого дизайна в фентези стиле с аниме-графикой.
Стоимость: 2600р*
Дизайн продается эксклюзивно (в одни руки).

Подробнее

Поддержать проект

Если у вас есть желание помочь нам сделать наш проект лучше:
Реклама на сайте
Стать модераторомОтзывы

Предложения

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » ForumD.ru - Дизайн для форумов, скрипты для форумов, техническая поддержка » Портфолио » Превью первой картинки топика в списках тем


Превью первой картинки топика в списках тем

Сообщений 41 страница 50 из 50

1

[html]<link rel="stylesheet" href="https://forumstatic.ru/files/0007/e3/f7/40249.css">
<div id="port-block1" class="free">

<a class="tip" id="cover" title="Превью первой картинки топика в списках тем">
  <div id="icon"></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 - Сделать заказ

Новая версия (с) satsana

Написала свеженький вариант скрипта, работающий через новые методы API.
Использует всего два последовательных запроса вместо десятков их - потому должен работать заметно быстрее и не вызывать ошибки из-за перегрузки сервера запросами.
Имеет кучу настроек.
Можно легко добавить команды, которые сработают после вставки превьюшек - чуть ниже настроек есть соответствующая функция.

... Требует вдумчивого тестирования с разными вариантами настроек. Если что не так - пишите в этой теме, поправлю.

В Html-низ:

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

Пример использования события prev_img_end. Если у вас стоит скрипт разворачивания картинок на полный размер, и вы хотите, чтобы он срабатывал после загрузки превьюшек, впишите в функцию события prev_img_end вот такую строчку:

Код:
$('.postimg').on('mouseover', (e)=>{postimgOnhover(e.target)});

(С настройкой link: 1 это лучше не использовать - одновременно с разворачиванием картинки сработает ссылка.)

+4

41

del

Отредактировано ACT3255 (29.11.2020 10:15:03)

+1

42

ACT3255 написал(а):

del

Я так понимаю - получилось? ;)

+1

43

satsana написал(а):
ACT3255 написал(а):

del

Я так понимаю - получилось? ;)

Я поставил Ваш скрипт, со своим стилем, но при старом при нажатии в форуме (на превью) открывалась фотка, это не то что бы не критично, это и фиг с ним, главное запросов на сервак меньше )))

+1

44

ACT3255, я поняла, почему не работает. Попробуйте изменить функцию подключения разворачивания картинок на вот такую:

Код:
$('.postimg').on('mouseover', (e)=>{postimgOnhover(e.target)});

+4

45

satsana написал(а):

$('.postimg').on('mouseover', (e)=>{postimgOnhover(e.target)});

Теперь работает. Спасибо большое.

+4

46

ACT3255, не за что. Если вдруг ещё какие проблемы обнаружатся - пишите.

+4

47

Здравствуйте, скрипт перестал работать только у меня?
Добавлено спустя 2 часа 47 минут 58 секунд:
заработало.

Отредактировано ACT3255 (16.01.2021 17:40:23)

+3

48

Здравствуйте!
Не помню (не могу найти сообщение) задавал ли я этот вопрос или нет, простите если задавал.
Вопрос по этому скрипту.
Возможно ли вывести картинку не только в список тем, а так же и в Последнее сообщение на главной станице?
https://nude-celebrity.ru/

0

49

ACT3255, добрый день. Текущая версия скрипта такой возможности не предусматривает.

+1

50

:cool: Крутяк вообще :glasses:

+2

Быстрый ответ

Напишите ваше сообщение и нажмите «Отправить»


ВНИМАНИЕ! При обращении за техподдержкой и вопросами по скриптам/оформлению, оставляйте ссылку на форум/сайт с проблемой! Специалист должен вживую видеть проблему, чтобы подсказать как ее решить.

ВНИМАНИЕ! Гости (не зарегистрированные на форуме) могут писать сообщения, но не могут вставлять прямые ссылки! Чтобы оставить сообщение со ссылкой на сайт, форум или скриншот удалите символы: "http://", "https://" или "www."


Вы здесь » ForumD.ru - Дизайн для форумов, скрипты для форумов, техническая поддержка » Портфолио » Превью первой картинки топика в списках тем