проблема с Quick spoiler

[motosimak]

Народ, помогите пожалуйста решить проблемe с отображением изображений в спойлере.

Поставил мод http://custom.simplemachines.org/mods/index.php?mod=2940

На форуме скрываю картинки под спойлер, но они не отображаются, текст нормально схватывает, а картинки нет, что делать?)

вот пример: http://knowpc.ru/index.php?topic=2677

[maestrosite.ru]

у элементов img вставлены адреса http://****.jpg.html, что есть документы с типом Content-Type: text/html

[motosimak]

да, помогло, спасибо

[motosimak]

maestrosite.ru поменял сейчас расширение на нормальное .jpg, все равно под спойлером не показывает изображения, в предварительном просмотре показывает, а при публикации нет.

[maestrosite.ru]

В теме из примера сейчас только мешок с перьями со скрытым текстом. При раскрытии - картинки показываются.

[motosimak]

вот как у меня и у модератора тоже самое

[maestrosite.ru]

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

[motosimak]

если через firebug  смотреть при нажатии на консоль:

Контейнер XUL для элемента noindex содержит inline-потомка a, что приводит к тому, что все его потомки завёрнуты в блок.
   

...firstChild);c.support.checkClone=a.cloneNode(true).cloneNode(true).lastChild.che...

imagef...uery.js (строка 40)

"enabling javascript debugger to support JavaScriptTool"

[GeorG]

Дык, чё с динамической ссылки, убирать? Разница-то? Вставлять нужно прямые ссылки.

Попробуйте это под спойлер вставить:

Код Выделить Развернуть

[img]http://www.simplemachines.ru/Themes/default/images/smflogo.png[/img]

[motosimak]

лого работает. А как быть с изображениями с хостингов? Они составляют 99,99% всех картинок на сайте


UP:  с радикала работает, перезагружаю страницу и не работает

что еще можно придумать?

[motosimak]

сейчас проверил на разных ссылках изображений, статическую тоже, работает через раз., кстати после обновления страницы и ссылка лого тоже не рабоатет

[GeorG]

Где можно посмотреть пример с лого?

А как быть с изображениями с хостингов? Они составляют 99,99% всех картинок на сайте

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

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

Сейчас у вас картинки открываются каждый раз.

[motosimak]

http://knowpc.ru/index.php?topic=2677.0 вот ссылка, которая индексируется, сейчас не открывается, т.е открывается через раз, у модера тоже самое: http://www.youtube.com/watch?v=qnpfNLnZJYg&feature=autoplay&list=ULqnpfNLnZJYg&playnext=1


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

[GeorG]

C модом библиотека jquery идет более высокой версии, чем та что сейчас у вас стоит на форуме.
У вас v1.4.4, а мод должен использовать - v1.7.2 или выше.
Отключите ту, которая фиг знает где подключается, тогда подхватится та что нужна.
Посмотрите, возможно она подключается в файле ../Themes/argentum_enhanced_smf20final/index.template.php (идёт вместе с темой).

Это только вариант возможной ошибки!..

[motosimak]

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

[Bugo]

http://knowpc.ru/index.php?topic=2677

Посмотрел, картинки отображаются.

Вот этот блок в коде явно добавляется каким-то модом, связанным с обработкой изображений:

Код Выделить Развернуть

<script language="JavaScript" type="text/javascript" src="http://knowpc.ru/Themes/default/scripts/imagefit.jquery.js"></script>
<script language="JavaScript" type="text/javascript" src="http://knowpc.ru/Themes/default/scripts/imagefit.jquery.library.js"></script>
    <script language="JavaScript" type="text/javascript">
        if ( JQ == undefined) var JQ = jQuery.noConflict();
    </script>
<script language="JavaScript" type="text/javascript" src="http://knowpc.ru/Themes/default/scripts/imagefit.jquery.library.js"></script>
<script language="JavaScript" type="text/javascript">
jQuery(window).load(function(){
  jQuery("#forumposts").imagefit();
});
</script>
Вспоминайте, что такое ставили. Там и загружается устаревшая версия jQuery.

[motosimak]

ставил этот мод: http://dragomano.ru/page/resize-images-to-fit-screen

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


Up: сейчас jquery  стал конфликтовать с motools, как было в этой теме: http://www.simplemachines.ru/index.php?topic=14918.0

Up: короче решил отказаться от этой темы, перешел обратно на дефолт, мод сжатия картинок тоже не устанавливал, спойлер с картинками работает

[pavelk]

@Bugo, Quick spoiler не работает, если я посещаю форум по протоколу HTTPS

[GeorG]

Укажите относительный путь к файлу jquery (как вариант, прямо исправьте на https, но всё же относительный путь лучше).

[pavelk]

Укажите относительный путь к файлу jquery (как вариант, прямо исправьте на https, но всё же относительный путь лучше).

Файл $sourcedir/Subs-QuickSpoiler.php 41 строка: script src="//code.jquery.com/jquery.min.js"

[kak2z]

Файл $sourcedir/Subs-QuickSpoiler.php 41 строка: script src="//code.jquery.com/jquery.min.js"

значит еще где то прописывается jquery)) его почти все моды пихают в код))

[Yarik]

Файл $sourcedir/Subs-QuickSpoiler.php 41 строка: script src="//code.jquery.com/jquery.min.js"

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

[GeorG]

Я при переезде на https, правил все файлы где идет подзагрузка jquery.
Лучше всего это делать через командную строку.

Чтобы вывести список файлов в которых есть строчка http://ajax:

Код Выделить Развернуть

grep -rl 'http://ajax' /home/полный путь до папку в которой будем искать/public_html/Sources
Перейти в каталог:

Код Выделить Развернуть

cd /home/полный путь до папку в которой будем искать/public_html/Sources
Исправить строки http://ajax на https://ajax:

Код Выделить Развернуть

grep 'http:\/\/ajax' -P -R -I -l  * | xargs sed -i 's/http:\/\/ajax/https:\/\/ajax/g'

[pavelk]

значит еще где то прописывается jquery)) его почти все моды пихают в код))

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

не совсем понятно написал, я написал где исправил, теперь работает.

Исправить строки http://ajax на https://ajax:

Код Выделить Развернуть

grep 'http:\/\/ajax' -P -R -I -l  * | xargs sed -i 's/http:\/\/ajax/https:\/\/ajax/g'

Не слишком радикально?

[GeorG]

Не слишком радикально?

Можно тоже самое вручную проделать, или за пару секунд помощью grep.

[Dark Wizard]

Тоже проблема со спойлером в Mozilla (в Опере всё работает) - не открывается при клике. Причём без авторизации работает...

пример: http://murr.su/forum/index.php?topic=2464.new#new

Пробовал править Subs-QuickSpoiler.php убирал/добавлял адрес, менял http на https, ничего не помогло.

Вот исходный текст этой страницы после авторизации, с неработающим спойлером http://pastebin.com/aEFNRZdM

[GeorG]

Причём без авторизации работает...

Значит при авторизации подключается дополнительный скрипт конфликтующий со скриптом спойлера. Смотрите в сторону jQuery, что у вас дополнительно грузится при авторизации (возможно другая версия).
Используйте фаербаг.

[Dark Wizard]

Проблему помог решить Digger:

из Subs-markItUp.php убрать строку

Код Выделить Развернуть

<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-3.0.0.min.js"></script>
В Subs-QuickSpoiler.php добавить строку

Код Выделить Развернуть

<script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.js"></script>

[Yarik]

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

[plintus]

Подскажите пожалуйста какая последняя версия query-migrate работает со спойлером?

[Anklab]

Доброго вам

Немного подниму тему этого очень даже приятного спойлера. Во-первых, благодарность автору. Но есть несколько досадных вещей, которые хотелось бы поправить.

Вводная: движок форума 2.1.1 (апргейд с 2.1RC2), PHP 7.4.27, спойлер везде работает.
Первая проблема (досадная): при создании поста в какую-либо тему, картинки, положенные под спойлер, не отображаются в области предпросмотра (после нажатия кнопки "Предварительный просмотр"). На их месте просто ничего. При этом, если делать то же самое в "личке", либо при помощи формы быстрого ответа, картинки под спойлером есть.
Если посмотреть html-код, получается такое:
вот это в Personal messages

Код Выделить Развернуть

<div id="personal_messages">
<div id="preview_section">
<div class="cat_bar">
<h3 class="catbg">
<span id="preview_subject">картинки</span>
</h3>
</div>
<div class="windowbg noup">
<div class="post" id="preview_body">
так, да<br><details class="sp-wrap sp-wrap-default"><summary class="sp-head">спойлер</summary>
                                        <div class="sp-body"><img src="https://anklab.ru/images/image.jpg" alt="" width="300" class="bbc_img resized" loading="lazy">
                                        <div class="sp-foot">[свернуть]</div></div></details>
</div>
</div>
<br class="clear">
</div>Примерно так же получается через форму быстрого ответа.
А вот так выглядит такой же кусок кода, если пользоваться "полной" формой через кнопку "Ответить"

Код Выделить Развернуть

<div id="preview_body" class="windowbg">так, да<br><details class="sp-wrap sp-wrap-default" open=""><summary class="sp-head">спойлер</summary>
    <div class="sp-body" style="display: block;"><img src="" alt="" class="bbc_img" loading="lazy">
    <div class="sp-foot">[свернуть]</div></div></details></div>Ну как-то вот так... Суть: картинки в предпросмотре нет потому что img src=""


Мелочь номер два.
У каждого спойлера есть слева, перед именем, "плюсик" - типа индикатор "открыт-закрыт". Спойлер закрыт - "плюсик", открыт - "минусик". Вопрос заключается в том, что если у спойлера есть вложенный спойлер, то у вложенного спойлера пользователю виден всегда "минусик", вне зависимости от того, открыт он или закрыт. Насколько я понимаю, "минусик" унаследуется от верхнего спойлера, который пользователь открыл.

Мелочь номер три - размер поля открытого спойлера, если внутри изображение с "чужого" ресурса (не вложение с форума). Суть: бывают большие изображения, гораздо больше ширины экрана пользователя. Такие изображения форум приводит к ширине своего окна, масштабируя их (на уровне браузера?). Проблема заключается в том, что для таких уменьшенных изображений высота поля открытого спойлера остаётся очень большой, соответственно величины НЕотмасштабированного изображения. Соответственно, остаются большие поля перед и после фото...

Можно ли поправить вот эти вещи?

[Bugo]

Первую проблему можно назвать багом. Попробуйте заменить содержимое /Themes/default/scripts/quick_spoiler.js следующим кодом:

Код (javascript) Выделить Развернуть

jQuery(document).ready(function($) {
    $('.sp-body img').each(addLoader);

    const previewBody = document.getElementById('preview_body');
    if (previewBody) {
        const config = {childList: true};
        const callback = function(mutationsList) {
            for (let mutation of mutationsList) {
                if (mutation.type === 'childList') {
                    $('.sp-body img').each(addLoader);
                }
            }
        };

        const observer = new MutationObserver(callback);
        observer.observe(previewBody, config);
    }

    $('body').on('click', '.sp-head', function() {
        $this = $(this);
        $this.parent().is('open') ? $this.next().slideUp('fast') : $this.next().slideDown('fast');
        $this.parent().children('.sp-body').find('img').each(function() {
            $(this).attr('src', $(this).attr('data-src'));
        });
    });

    $('body').on('click', '.sp-foot', function() {
        $this = $(this).parent();
        $this.parent().removeAttr("open");
    });
});

let addLoader = function() {
    $(this).attr({
        'data-src': $(this).attr('src'),
        src: smf_default_theme_url + '/images/loading_sm.gif'
    });
}



И обновите кэш браузера перед тестом.

[Anklab]

Заменил код скрипта на предлагаемый - изображения под спойлером в области предпросмотра появились
Большое спасибо!

[Bugo]

Можете пример мелочи #3 привести? Ссылку на подобное изображение.

[Anklab]

Сегодня немножко поисследовал это поведение.
Во-первых, я был не прав в предположении, что что-то зависит от того, откуда берётся картинка. Проверка показала, что это всё-равно (просто просто более ранние наблюдения показали якобы зависимость, но нет).

По сути. Я нашёл, что проблема есть только когда в BB-коде явно указано 'height=..." (не важно, в теге img или в теге attach). Вот меньше этого height спойлер и не делается.

Если рядом с картинкой есть текст, текст также отодвинут от картинки на величину разницы между height и реального показываемого размера.

Пример поведения я постарался показать здесь (и то ещё не вставил туда комбинацию из width и height вместе).
--- вот это дописал позже ---
Вот теперь я совсем не уверен, что дело в спойлере (даже наоборот) т.к. БЕЗ спойлера поведение картинок аналогичное...
наверное проще пока что настоятельно рекомендовать пользователям не использовать height...

[Bugo]

Давно уже height не использую, как-то логичнее именно width указывать, а дальше уже высота сама подстроится.
Тем более в index.css сейчас для картинок указывается

Код (css) Выделить Развернуть

.bbc_img {
    object-fit: contain;
}
Попробуйте с этим свойством поиграть, например, cover вместо contain поставьте.

Насчёт мелочи #2 — вроде исправил тоже, завтра выложу обновление. Спасибо за фидбек

[Anklab]

Спасибо, в т.ч. за пинок в нужном направлении.
В общем, 'object-fit: contain' всё-таки оптимальный вариант. Но не хватало прямого указания height...

Вот так стало показывать правильно, без лишних полей

Код Выделить Развернуть

.bbc_img {
object-fit: contain;
height: auto;
}модификатор !important вроде не нужен (будем наблюдать).

ps: Но это тоже неправильное решение: превью стало большим (для изображений с параметром height)...