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

[Anvar]

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

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

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

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

https://github.com/bb3mobi/highslide

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

[KEMnEP]

Тобеш грубо говоря что бы работало правильно нужно overall_footer_after.html сделать как то так

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

<!-- 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) {
/* полная рк версия подхвата 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)");
      // 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)"></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 -->

Почему как то? потому что версия файла для расширения, только что правилось мной "на коленках" без проверки.

[Yukh]

KEMnEP, а у меня Ваш код вообще перестал в Chrome выводить картинку в оверлей highslide. Картинка уменьшается, но открывается с удаленного сайта.


UPD: Пока писал сообщение, Вы обновили код и он уже работает нормально. Спасибо!

[KEMnEP]

Yukh, код с какого именно поста?)

[Yukh]

KEMnEP,
Highslide - Слайдер фото для phpBB3.1 - не работает
Highslide - Слайдер фото для phpBB3.1 - заработало.

[KEMnEP]

Yukh, в том коде который у Вас не заработал, сразу было же написано в посте

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

[LavIgor]

KEMnEP, так это раньше было, когда получалась двойная обёртка.
Сейчас всё корректно, проверил на Firefox 44.0.2.

mike2003, можно, но это нужно разбираться.

[KEMnEP]

LavIgor, не знаю, не проверял, себе сразу сделал так как сделал.

Отправлено спустя 3 минуты 38 секунд:
В любом случае доп проверки на до загрузку изображения и лишь после окончательных данных размера, проводить манипуляции, лишними небудут

Отправлено спустя 4 минуты 15 секунд:

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

var size = 420; // Img tag max width
укажите число с которого будет происходить сжимаие до него, это для тега имадж, а для собственных вложений админка/сообщения/настройки вложения
Создавать миниатюры: да
Максимальная ширина миниатюр: сколько нужно

Отправлено спустя 2 минуты 16 секунд:
LavIgor, ну и забыл сказать в моей версии учитываются и устройства с маленьким экраном, в них картинка открывается в новой вкладке

Отправлено спустя 2 минуты 14 секунд:
LavIgor, в оригинальном посте который Вы привели, вся задержка для выяснения размеров делается этой функцией

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

elements.find('.postimage').not('a .postimage').each(function () {
         var src = $(this).attr('src');
         $(this).attr('src', '');
         $(this).attr('src', src);
      });

а если не успеет? в моей версии только цифры реальные решают, а вот если не успеет, быть не может

Отправлено спустя 1 час 14 минут 37 секунд:
LavIgor, кстати вспомнил, этот

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

elements.find('.postimage').not('a .postimage').each(function () {
         var src = $(this).attr('src');
         $(this).attr('src', '');
         $(this).attr('src', src);
      });

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

Сейчас всё корректно, проверил на Firefox 44.0.2.

не знаю не знаю.. корень то и по сей день там в той версии которую Вы от копировали ссылкой.

[Anvar]

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

Есть такое расширение [release] Inline images in attachment

Ширину миниатюр можно настроить в админ разделе:

Изменения коснуться новых, загружаемых изображений. Для старых пока нет возможности пересоздать миниатюры, нужно расширение создавать.

[Yukh]

коде который у Вас не заработал, сразу было же написано в посте

Спасибо за ответ. Пропустил этот момент, моя невнимательность.

[desoto]

не работает расширение
распаковывал и в папку ext и в папку ext/bb3mobi (хрен его знает в какую папку распаковывать надо, нигде не указано), но в админке расширение не видно
версия phpBB - 3.1.6

[rxu]

хрен его знает в какую папку распаковывать надо, нигде не указано

Указано в шапке этой страницы: [FAQ] Как устанавливать расширения.

[desoto]

rxu, спасибо, поставил

а этот слайдер для картинок вставленных через тег Img не работает?

[rxu]

для картинок вставленных через тег Img не работает?

Если изображение в img будет расположено внутри ссылки(в url), то подключен highslide не будет.

[desoto]

Если изображение в img будет расположено внутри ссылки(в url), то подключен highslide не будет

мне не совсем понятно о чем идет речь, у него в шапке ясно написано:

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

я предполагал, что любые картинки, которые я буду вставлять через Img будут увеличиваться слайдером

[KEMnEP]

desoto, Highslide - Слайдер фото для phpBB3.1 замените содержимое файла расширения содержимым из поста в теге код, и будет Вам счастье. В том числе и в имдж внутри урл.

Отправлено спустя 21 минуту 9 секунд:
Только после манипуляции незабываем очистить кеш.