ForumDesign TechSupport - Дизайн для форумов и техническая поддержка

Объявление

Акция! Дизайн «MyBB Technical Support»

Дизайн для форума MyBB в тематике компьютерных сообществ или технической поддержки
Стоимость при покупке эксклюзивно: 2000р 1200р
Скидка 40%. В стоимость входит настройка и корректировка дизайна.

Подробнее

Дизайн «Warlords of Draenor»

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

Подробнее

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

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

Подробнее

Дизайн для MyBB форума гильдии WoW Exodar

Детализированный rpg-дизайн для mybb форума гильдии в тематике Экзодара.
Стоимость: 2150р*
В стоимость входит настройка и корректировка дизайна.

Подробнее

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

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

Предложения

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

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


Вы здесь » ForumDesign TechSupport - Дизайн для форумов и техническая поддержка » Каталог скриптов » Превью первой картинки топика (MyBB) [satsana]


Превью первой картинки топика (MyBB) [satsana]

Сообщений 1 страница 5 из 5

1

Превью первой картинки топика на странице списка тем
Добавляет к ячейке с последним сообщением топика первую картинку из топика. Работает совместно со скриптом разворота картинок.

http://sg.uploads.ru/PG6hI.jpg

http://s3.uploads.ru/LwnZr.jpg

Автор: satsana (за идею благодарим nou)
Скрипт создан по заказу администрации проекта ForumD.ru!
При копировании информации указывайте ссылку на эту тему!

Платформа: MyBB
Демо: Портфолио // Каталог стилей

В Html-низ:

Код:
<!-- Превью первой картинки топика (с) satsana, 2018 -->
<style>
.punbb .prev-pic img {
 max-width: 300px;
 min-height: 160px;
}
</style>
<script type="text/javascript">
var prevForum = [33, 97]; 

if (url.indexOf('viewforum.php?id=') != -1) {
  var forumNow = +url.match(/viewforum.php\?id=\d+/)[0].match(/\d+/)[0];
} else {var forumNow = 0}
if (prevForum.indexOf(forumNow) != -1 || (forumNow != 0 && (!prevForum || prevForum.length == 0))) {
  $('.forum table tbody tr td.tcr').prepend('<div class="prev-pic"></div>');

  var prevTheme = $('.forum table tbody tr');
  for (c=0; c<prevTheme.length; c++) {
    var hr = $(prevTheme[c]).find('.tcl .tclcon a').attr('href');
    $.ajax({
      url:hr,
      context:prevTheme[c],
      success:function(res){
        res = $(res).find('.post-content:first-of-type').html().replace(/\&quot;/mgi, '"').replace(/\&lt;/mgi, '<').replace(/\&gt;/mgi, '>').match(/<img[\s\S]*?src="[\s\S]*?"[\s\S]*?>/mi)[0];
        $(this).find('td.tcr div.prev-pic').html(res);
      }
    }); 
  }
}
</script>

<!-- Развертывание картинок Увеличение картинок -->
<script type="text/javascript">
 function postimgOnhover (img) {if (img.offsetWidth != 0  && img.naturalWidth > img.offsetWidth) {
  img.style.cursor = 'zoom-in'; img.onclick = function () {
   var imgHeight = img.naturalHeight, winHeight = window.innerHeight; var topShift = (winHeight>imgHeight ? (winHeight-imgHeight)/2 : 0);
   $('body').append('<div class="lightbox" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.9); overflow: auto; text-align: center; z-index: 10000;">' + '<img class="lightimg" src="' + img.src + '" onclick="this.parentNode.remove()" style="position: relative; top: ' + topShift + 'px; cursor: zoom-out;border: 3px solid #f98561;">' + '</div>');}}}
window.onload = function() {var postimges = document.getElementsByClassName('postimg');
 for (var i=0; i<postimges.length; i++) {postimges[i].onmouseover = function () {postimgOnhover (this)};}}
</script>


Пояснения
1. Размер превью картинки настраивается тут:

<style>
.punbb .prev-pic img {
max-width: 300px; /* ширина */
min-height: 160px; /* высота */
}
</style>

2. Форумы, в которых работает скрипт настраиваются здесь:

var prevForum = [33, 97];

Если удалить эту строчку, скрипт сработает на ВСЕ топики во всех форумах.

3. Если у вас уже установлен скрипт разворота картинок, то копируйте только первую часть скрипта.
Если скрипт разворота картинок не нужен, то можно его не ставить - тогда в ячейке будет просто картинка-превью нужного размера, без увеличения по клику.

4. Внимание! скрипт импортирует ПЕРВУЮ картинку каждого топика.
Если нужно убрать картинки с важных тем, то впишите между тегами <style>:

<style>
.punbb .prev-pic img {
max-width: 300px;
min-height: 160px;
}
.punbb .isticky .prev-pic {display: none;}
</style>

по аналогии можно поступить с закрытыми темами (.iclosed).

5. За перестройкой стиля страницы топик-листа под эдакий "форум-галерею" (как на скринах) можно обратиться к команде ForumD.ru - Сделать заказ

+1

2

а у меня не работает

форум Фото. только немного поднимаются посл сообщения

0

3

тартар написал(а):

форум Фото.

ссылку на форум

0

4

я с вами вконтакте связался

0

5

тартар
Вконтакте я переписку только по вопросам ПЛАТНЫХ заказов.
Бесплатная техническая поддержка оказывается на форуме.

0

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

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



Вы здесь » ForumDesign TechSupport - Дизайн для форумов и техническая поддержка » Каталог скриптов » Превью первой картинки топика (MyBB) [satsana]