3D Gallery

Wiz

Путник
Участник
Сообщения
32
Розыгрыши
0
Репутация
27
Реакции
9
Баллы
53
Всем привет! Помогите компетентные, кто в курсе как заставить 3D панораму подгружаться сразу.

Пример если я иду в объект напрямую через страницу -
Вы не можете просматривать ссылку пожалуйста воспользуйтесь следующими ссылками Вход или Регистрация
она работает и подгружается сразу.

Если же я захожу в объект через главную страницу вкладка> проекты -
Вы не можете просматривать ссылку пожалуйста воспользуйтесь следующими ссылками Вход или Регистрация
то, панорама срабатывает только после перезагрузки страницы внутри объекта.
 
Wiz, при переходе Главная -> Проекты -> 'Какой-то проект', страница загружается с таким разметкой
HTML: 
<div style="height: 0px; width: 0px; overflow: hidden; position: relative;">
    <img src="/images/cms/data/projects/designing/object-gragdanskoi-oborony/32a.jpg" id="product1" style="max-width: 100%; position: relative; top: 0px; left: 0px; cursor: all-scroll;">
</div>

Если обновить страницу
HTML: 
<div style="height: 445px; width: 791px; overflow: hidden; position: relative;">
    <img src="/images/cms/data/projects/designing/object-gragdanskoi-oborony/32a.jpg" id="product1" style="max-width: 100%; position: relative; top: 0px; left: 0px; cursor: all-scroll;">
</div>

проблема может быть либо в кривом плагине jQuery.threesixty, либо в неправильной его настройке
jquery.threesixty.js:


начните с отладки var pic = $(this);, что это за элемент и почему его ширина/высота при первом переходе на страницу равны 0
возможно у родительского элемента проблемы с высотой/шириной

Видел подобный плагин у Spectre css
Вы не можете просматривать ссылку пожалуйста воспользуйтесь следующими ссылками Вход или Регистрация
 
Реакции: Wiz
òbi, Спасибо, за наводку, буду смотреть.

òbi, Плагин у spectre css работает корректно, так как полностью на чистом css, не совсем то, что нужно для нашего решения. Jquery.threesixty.js: наш плагин считывает размеры с картинки. Пока не удалось разрешить проблему(.
 
Wiz, попробуйте так
CSS: 
#product1 {
    display:block;
    width:100%;
    height:auto;
}
 
Реакции: Wiz
Если придерживаться именно того же подхода, то div`у задавать конкретные размеры нужно уже после того, как картинки загружены, а именно внутри:
JavaScript: 
if (totalProgress == options.images.length-1)
 
Реакции: Wiz
JavaScript: 
        $.each(options.images, function(index, record) {
            var o =$("<img>").attr("src",record).load(function() {
                if (index>pic.data("tempIndex"))
                {
                    pic.data("tempIndex", index)
                    pic.attr("src", $(this).attr("src"))
                }   

                var progress = pic.parent().find(".progressBar");
                totalProgress++;
                var maxsize = pic.parent().find(".progressBg").width();
                var newWidth = (totalProgress/options.images.length)*maxsize;
                progress.stop(true,true).animate({width:newWidth},250);
                if (totalProgress == options.images.length-1)
                {    loaded=true;
                    pic.parent().find(".overlay, .progressBar, .progressBg").remove();
                }
            });
            cache.push(o);
        });

    })

òbi написал(а):
Wiz, попробуйте так
CSS: 
#product1 {
    display:block;
    width:100%;
    height:auto;
}
Нажмите, чтобы раскрыть...
Слишком просто), не работает, к сожалению.
 
Размер блока задается исходя из размера первого изображения в массиве, скорее всего изображение просто не успевает прогрузится, чтобы можно было получить его размер. Даже если точку останова поставить и продолжить, то все прогружается. Ну это так на вскидку, без доступа к коду особо нечего дебажить.

В подтверждение моих слов, обнови страницу через ctrl+f5 панорама так же не грузится.
 
Реакции: Wiz
Через ctrl+f5 со второго раза заводиться.
 
Wiz написал(а):
Через ctrl+f5 со второго раза заводиться.
Нажмите, чтобы раскрыть...
Это все просто случайность, иногда скрипт выполняется чуть позже и изображение успевает загрузится, в общем такой подход неправильный, скрипт должен выполняться только тогда когда изображение загружено, по сути нужно найти изображение которое задает размер, повесть на него событие image.onload по выполнению которого запустить инициализацию

Вы не можете просматривать ссылку пожалуйста воспользуйтесь следующими ссылками Вход или Регистрация
 
Да, тоже заметил, что просто случайность.
 
Wiz, ну как вариант (не самый лучший) закостылить путем отложенного выполнение инициализации галереи

custom.js:
JavaScript: 
    ...
    refreshComponents: function () {
        ...
        setTimeout(() => { ddGallery.init(); }, 1000);
    },
    ...
 
Всем спасибо, за попытки помочь. Мой вопрос разрешил L2Banners за что ему большое спасибо!
 
Там было много повторов, поэтому я вынес все в одну функцию, в которую просто передаются целевые селекторы как и раньше, ну и прокомментировал все, чтобы было понятно. Проблема та что я и говорил, изображение не успевало загрузиться. Хвастаться нечем, логику не менял, на скорую руку как-то так:
 

Вложения

  • js.jpg
    251,8 КБ · Просмотры: 18
Войдите или зарегистрируйтесь для ответа.

Похожие темы

  • Статья
Обновление XenForo Media Gallery
Ответы
0
Просмотры
1К
kick
Adrenaline, SmartGuard - кидалы и мошенники. Сенсация года !
2 3 4
Ответы
73
Просмотры
22К
Logan22
Меню
Вход
Регистрация