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

[Anvar]

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

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

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

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

https://github.com/bb3mobi/highslide

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

[Sheer]

Anvar, Внеси в ext\bb3mobi\highslide\styles\prosilver\template\event\overall_footer_after.html
После

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

		$("dl.thumbnail a").attr("onclick", "return hs.expand(this)");

строку

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

		$("dl.thumbnail a").attr("class", "highslide");

тогда вожделенная лупа появится.
PS. Да и засунь его на github уже.

[LavIgor]

Возможно, есть простая возможность добавить лупу в экст, тогда всё будет идеально.

На Гуру вот такой код:

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

<script type="text/javascript">
$(document).ready(function() {
/* Add highslide in phpBB3.1 && Anvar bb3.mobi */
    var scr_w = $(this).width();
    var scr_h = $(this).height();
    if (scr_w > 800 && scr_h > 600) {
        $("dl.thumbnail a").attr("onclick", "return hs.expand(this)");
    /*    $('.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);
            }
        });
        $('.postimage').not('a .postimage').each(function() {
            var src = $(this).attr('src');
            $(this).attr('src', '');
            $(this).attr('src', src);
        });
        $('a.img-link').each(function() { // External Links Fix
            $(this).attr("onclick", "return hs.expand(this)");
            this.href = this.href.replace('http://www.phpbbguru.net/community/url.php?', '');
        });*/
    }
});
</script>

Видно, что много закомментировано.
Лупу можно добавить простой вставкой:
заменить $("dl.thumbnail a").attr("onclick", "return hs.expand(this)"); на $("dl.thumbnail a").addClass("highslide").attr("onclick", "return hs.expand(this)");.

Sheer опередил.

P.S. Кстати, тогда лупа может появиться и на Гуру.

Отправлено спустя 55 секунд:

Sheer опередил.

Кстати, мой код не требует новой строки, так лучше.

[Sheer]

Непонятно, почему это не срабатывает

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

$(this).wrap('<a class="highslide" href="'+$images+'" onclick="return hs.expand(this)"></a>');

Ну мне непонятно, потому что я с java не дружу.

Отправлено спустя 3 минуты 10 секунд:
Да, так

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

<script type="text/javascript">
$(document).ready(function() {
/* Add highslide in phpBB3.1 && Anvar bb3.mobi */
	var scr_w = $(this).width();
	var scr_h = $(this).height();
	if (scr_w > 800 && scr_h > 600) {
		$("dl.thumbnail a").addClass("highslide").attr("onclick", "return hs.expand(this)");
	}
});
</script>

Значительно лучше. И кода меньше, и работает все.

[LavIgor]

Непонятно, почему это не срабатывает

Может, потому, что ссылка уже есть? Тег a нельзя вкладывать внутрь другого тега a.

я с java не дружу

Так это не Java. Это JavaScript, а в данном случае jQuery.

[Sheer]

в данном случае jQuery

Тем более

[romeo_piter]

Лупу можно добавить простой вставкой:
заменить $("dl.thumbnail a").attr("onclick", "return hs.expand(this)"); на $("dl.thumbnail a").addClass("highslide").attr("onclick", "return hs.expand(this)");

Сто раз спасибо, добрый человек.
С лупой оно как -то роднее. С вожделенной лупой. :D

[Alecto]

Anvar, посмотрел код, но так и не понял, как хайслайд подключается к картинкам-вложениям?
можешь носом ткнуть?

Отправлено спустя 3 минуты 15 секунд:
все, разобрался.

[Anvar]

PS. Да и засунь его на github уже.

Загрузил с правкой, ссылка в первом сообщении.

[Alecto]

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

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

<a class="highslide " onclick="return hs.expand(this)" href="http://f6.s.qip.ru/3GS55Asq.gif">
<a class="highslide " onclick="return hs.expand(this)" href="http://f6.s.qip.ru/3GS55Asq.gif">
<img class="postimage" alt="Изображение" src="http://f6.s.qip.ru/3GS55Asq.gif" style="width: 422px; height: 153.181px;">
</a>
</a>

ACP Style

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

[LavIgor]

они дублируются

В смысле, что увеличивается одна картинка, а другая остаётся на месте?

[Alecto]

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

upd: с первой картинкой то же самое.

[KEMnEP]

не подтверждаю (хром) и здесь и у себя нечего не дублируется (взял код вставки с екста)

[LavIgor]

при уменьшении тебе придется сделать это два раза.

Тогда у меня не дублируются.
Нажимаю, как положено, один раз.
Всё увеличивается и уменьшается штатно.
Браузеры IE 11 и Firefox 38.0.5.

[Alecto]

проблема возникает с внешними изображениями в теге img.
первая обертка выполняется здесь

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

		$("dl.thumbnail a").addClass("highslide").attr("onclick", "return hs.expand(this)");

похоже, что вторая добавляется здесь

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

		$('.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>');

для вложений такой ошибки нет.

upd: firefox 39

Отправлено спустя 2 минуты 36 секунд:
проверил на другом компьютере под windows 8.1, firefox 39 и хром - такой ошибки нет

Отправлено спустя 2 минуты 52 секунды:
хз чтото было, вычистил кэш браузера, обновил страницу ctrl R и все заработало нормально.

[KEMnEP]

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