Highslide - Слайдер фото для phpBB3.1

[Anvar]

Всеми известный highslide, для миниатюр картинок в сообщениях.

Для загруженных изображений и изображений в тегах img.

Если изображение в img будет расположено внутри ссылки(в url), то подключен highslide не будет.
Для этого можно подключить [BETA] External Links - Управление ссылками он определит прямые ссылки на изображения.

Ставить как обычное расширение, без каких либо дополнительных настроек.

https://github.com/bb3mobi/highslide

Доработанная версия расширения: https://github.com/AlexSheer/highslide

[southklad]

Ок, вот заменяем в overall_footer_after.html Работает и уменьшение изображение через

Код: Выделить всё

[img]тут картинка[/img]

и открытие их через Highslide, вложенные картинки тоже отображаются корректно.

Код: Выделить всё

<!-- IF S_VIEWTOPIC or S_IN_UCP or S_IN_POSTING -->
<script type="text/javascript" src="{BOARD_URL}ext/bb3mobi/highslide/highslide-full.min.js"></script>
<script type="text/javascript">
hs.graphicsDir = '{BOARD_URL}ext/bb3mobi/highslide/graphics/';
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.fadeInOut = true;
hs.dimmingOpacity = 0.8;
hs.outlineType = 'rounded-white';
hs.captionEval = 'this.thumb.title';
// This value needs to be set to false, to solve the issue with the highly increasing view counts.
hs.continuePreloading = false;
// Add the slideshow providing the controlbar and the thumbstrip
hs.addSlideshow({
	interval: 5000,
	repeat: false,
	useControls: true,
	fixedControls: 'fit',
	overlayOptions: {
		opacity: .75,
		position: 'top center',
		hideOnMouseOut: true
	}
});
</script>
<script type="text/javascript">
function add_highslide(e, elements) {
/* Add highslide in phpBB3.1 && Anvar bb3.mobi */
   var scr_w = $(document).width();
   var scr_h = $(document).height();
   if (scr_w > 800 && scr_h > 600) {
      elements.find("dl.thumbnail a").addClass("highslide").attr("onclick", "return hs.expand(this)");
      // BBCode [img]highslide[/img]
      elements.find('.postimage').not('a .postimage').load(function () {
         $(this).removeAttr("width")
         $(this).removeAttr("height")
         $(this).css({ width: "", height: "" });
         var h = $(this).height();
         var w = $(this).width();
         var size = 420; // Img tag max width
         if (w > 200) { // Highslide > min width
            $images = $(this).attr("src");
            $(this).wrap('<a class="highslide" href="'+$images+'" onclick="return hs.expand(this)"></a>');
         }
         if (w > size || h > size) {
            if (w > h) {
               h = h*(size/w);
               w = size;
            } else {
               w = w*(size/h);
               h = size;
            }
            $(this).width(w);
            $(this).height(h);
         }
      });
      elements.find('.postimage').not('a .postimage').each(function () {
         var src = $(this).attr('src');
         $(this).attr('src', '');
         $(this).attr('src', src);
      });
      // External Links Fix
      elements.find('a.img-link').each(function () {
         $(this).attr("onclick", "return hs.expand(this)");
         this.href = this.href.replace('{BOARD_URL}url.php?', '');
      });
   }
}
$(document).ready(function (e) {
   add_highslide(e, $(document));
});
$('#qr_posts').on('qr_loaded', add_highslide);
</script>
<!-- ENDIF -->

[romeo_piter]

Не могу справиться с особенностью одного самописного расширения и включить его в условие SCRIPT_NAME

Насколько критично, если я включу подгрузку хайслайда на всех страницах форума, убрав это условие: <!-- IF S_VIEWTOPIC or S_IN_UCP or S_IN_POSTING -->
Это сильно плохо?
На 3.0 хайслайд у меня подключался просто в хидере безусловно. Проблем не было.
Но 3.1 ацки тяжеловесен, не хочется грузить главную.

[Siava]

romeo_piter, примерно такой алгоритм на примере board3 portal:
/ext/board3/portal/controller/main.php

Код: Выделить всё

   protected function assign_template_vars()
   {
      $this->template->assign_vars(array(
         'S_PORTAL'               => true,
         ...

/ext/bb3mobi/highslide/styles/prosilver/template/event

Код: Выделить всё

<!-- IF S_VIEWTOPIC or S_IN_UCP or S_IN_POSTING or S_PORTAL -->

А тащить лишние js и css на каждой странице ни к чему.

[southklad]

Анвар выявлена такая проблема связанная с расширением Неправильное отображение вложений

[Anvar]

Не обязательно было дублировать сообщение в личку, это только увеличит время отклика.

[southklad]

сообщение в личку

Я в личку о другом спрашивал, об ошибке в линейках у меня, ну и об этом заодно написал.

[Sheer]

igorbond, Напомнить?

Правила, пункт: 4.6. Для личного общения с другими участниками конференции используйте e-mail, ЛС, ICQ и т.д. Приватные обращения, связанные с вопросами, консультациями и просьбами об оказании помощи по phpBB, членам команды конференции, если вас специально не приглашали к приватному общению, могут быть расценены получателем как спам с принятием соответствующих мер по наведению порядка.

[Monolith]

Простите, но из обсуждения так и не понял,какой код обрезает до миниатюр и какой файл править , как то конкретнее бы, да в 1 пост.
Хотя и тут от инфы последовательной не откажусь. Вы какие размеры миниатюр выставяете,если можно скрин из админки

[Yukh]

При открытии вложений в highslide в оверлее участвуют все вложения из всех сообщений на странице.
Можно ли сделать так, чтобы количество вложений в оверлее ограничивалось только теми вложениями, которые есть в конкретном сообщении?

[mike2003]

без каких либо дополнительных настроек

Для загруженных изображений и изображений в тегах img

скачал, поставил, вижу в списке "Extension Highslide"
а результата нет

что то еще надо?
я ведь правильно понял, что должно быть так как тут? ^^

[KEMnEP]

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

[mike2003]

что значит

собственно хронящиеся вложения

?

Отправлено спустя 2 минуты 33 секунды:
а вот это сжимание

кто делает?

[LavIgor]

mike2003, попробуйте код отсюда, почти те же доработки, что и на этой конференции.
Странно, что GitHub всё ещё не обновлён.

[KEMnEP]

LavIgor, потому что имеет баг в фаерфоксе иногда, двойное открытие изображения в теги идж
Вот как сделал я

Код: Выделить всё

<!-- IF S_VIEWTOPIC or S_IN_UCP or S_IN_POSTING -->
<script type="text/javascript">
function add_highslide(e, elements) {
/* полная рк версия подхвата highslide с уменьшением */
   var scr_w = $(document).width();
   var scr_h = $(document).height();
   if (scr_w > 800 && scr_h > 600) {
   	  ;(function ($) {
    $.fn.bindImageLoad = function (callback) {
        function isImageLoaded(img) {
            // Во время события load IE и другие браузеры правильно
            // определяют состояние картинки через атрибут complete.
            // Исключение составляют Gecko-based браузеры.
            if (!img.complete) {
                return false;
            }
            // Тем не менее, у них есть два очень полезных свойства: naturalWidth и naturalHeight.
            // Они дают истинный размер изображения. Если какртинка еще не загрузилась,
            // то они должны быть равны нулю.
            if (typeof img.naturalWidth !== "undefined" && img.naturalWidth === 0) {
                return false;
            }
            // Картинка загружена.
            return true;
        }
        return this.each(function () {
            var ele = $(this);
            if (ele.is("img") && $.isFunction(callback)) {
                ele.one("load", callback);
                if (isImageLoaded(this)) {
                    ele.trigger("load");
                }
            }
        });
    };
})(jQuery);
      elements.find("dl.thumbnail a").addClass("highslide").attr("onclick", "return hs.expand(this, config1 )");
      // BBCode [img]highslide[/img]	  
      elements.find('.postimage').not('a.highslide .postimage').bindImageLoad(function () {
         $(this).removeAttr("width")
         $(this).removeAttr("height")
         $(this).css({ width: "", height: "" });
         var h = $(this).height();
         var w = $(this).width();
         var size = 420; // Img tag max width
		if (h > 200) { // Highslide > min height
            var i = $(this).attr("src");
            $(this).wrap('<a class="highslide" href="' +i+ '" onclick="return hs.expand(this, config1 )"></a>');
		}
         if (w > size || h > size) {
            if (w > h) {
               h = h*(size/w);
               w = size;
            } else {
               w = w*(size/h);
               h = size;
            }
            $(this).width(w);
            $(this).height(h);
         }
      });
	}
	else
	{
	elements.find("dl.thumbnail a").attr("target", "_blank");
	}
}
$(document).ready(function (e) {
   add_highslide(e, $(document));
});
$('#qr_posts').on('qr_completed', add_highslide);
$('#qr_postform').on('ajax_submit_preview', function (e) {
   add_highslide(e, $('#preview'));
});
</script>
<!-- ENDIF -->

на без изменений эти правки нельзя вставлять в расширение, ибо писано для другой конфигурации хедслайда.

[mike2003]

попробуйте код отсюда

да, так заработало
а можно сделать ширину миниатюр одинаковой? ширину вообще можно настроить? а то никаких доков нет