3D Gallery

[Wiz]

Всем привет! Помогите компетентные, кто в курсе как заставить 3D панораму подгружаться сразу.

Пример если я иду в объект напрямую через страницу - Республиканская инфекционная больница (http://monolitmproekt.ru/designing/projects/republican-hospital/) она работает и подгружается сразу.

Если же я захожу в объект через главную страницу вкладка> проекты - Проекты (http://monolitmproekt.ru/designing/projects/) то, панорама срабатывает только после перезагрузки страницы внутри объекта.

[òbiòbi верифицированный пользователь.]

@Wiz (https://forum.antichat.xyz/members/914828/), при переходе Главная -> Проекты -> 'Какой-то проект', страница загружается с таким разметкой

HTML:






Если обновить страницу

HTML:






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

jquery.threesixty.js:

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

возможно у родительского элемента проблемы с высотой/шириной

Видел подобный плагин у Spectre css

360-Degree Viewer - Experimentals - Spectre.css CSS Framework (https://picturepan2.github.io/spectre/experimentals/viewer-360.html)

360-Degree Viewer is an interactive product photo viewer. It is built in pure CSS. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.

picturepan2.github.io

[Wiz]

@òbiòbi верифицированный пользователь. (https://forum.antichat.xyz/members/893543/), Спасибо, за наводку, буду смотреть.

@òbiòbi верифицированный пользователь. (https://forum.antichat.xyz/members/893543/), Плагин у spectre css работает корректно, так как полностью на чистом css, не совсем то, что нужно для нашего решения. Jquery.threesixty.js: наш плагин считывает размеры с картинки. Пока не удалось разрешить проблему(.

[òbiòbi верифицированный пользователь.]

@Wiz (https://forum.antichat.xyz/members/914828/), попробуйте так

CSS:



#product1
{
display
:
block
;
width
:
100%
;
height
:
auto
;
}

[Mizuwokiru]

Если придерживаться именно того же подхода, то div`у задавать конкретные размеры нужно уже после того, как картинки загружены, а именно внутри:

JavaScript:



if
(
totalProgress
==
options
.
images
.
length
-
1
)

[Wiz]

Если придерживаться именно того же подхода, то div`у задавать конкретные размеры нужно уже после того, как картинки загружены, а именно внутри:

JavaScript:



if
(
totalProgress
==
options
.
images
.
length
-
1
)




JavaScript:



$
.
each
(
options
.
images
,
function
(
index, record
)
{
var
o
=
$
(
""
)
.
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
)
;
}
)
;
}
)




@Wiz (https://forum.antichat.xyz/members/914828/), попробуйте так

CSS:



#product1
{
display
:
block
;
width
:
100%
;
height
:
auto
;
}



Слишком просто), не работает, к сожалению.

[L2Banners]

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



то, панорама срабатывает только после перезагрузки страницы внутри объекта.


В подтверждение моих слов, обнови страницу через ctrl+f5 панорама так же не грузится.

[Wiz]

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

В подтверждение моих слов, обнови страницу через ctrl+f5 панорама так же не грузится.


Через ctrl+f5 со второго раза заводиться.

[L2Banners]

Через ctrl+f5 со второго раза заводиться.


Это все просто случайность, иногда скрипт выполняется чуть позже и изображение успевает загрузится, в общем такой подход неправильный, скрипт должен выполняться только тогда когда изображение загружено, по сути нужно найти изображение которое задает размер, повесть на него событие image.onload по выполнению которого запустить инициализацию

https://i.gyazo.com/5e27e30cf392eee54c7f86fc6d164a2b.mp4

[Wiz]

Это все просто случайность, иногда скрипт выполняется чуть позже и изображение успевает загрузится, в общем такой подход неправильный, скрипт должен выполняться только тогда когда изображение загружено, по сути нужно найти изображение которое задает размер, повесть на него событие image.onload по выполнению которого запустить инициализацию

https://i.gyazo.com/5e27e30cf392eee54c7f86fc6d164a2b.mp4


Да, тоже заметил, что просто случайность.

[òbiòbi верифицированный пользователь.]

@Wiz (https://forum.antichat.xyz/members/914828/), ну как вариант (не самый лучший) закостылить путем отложенного выполнение инициализации галереи

custom.js:

JavaScript:



...
refreshComponents
:
function
(
)
{
...
setTimeout
(
(
)
=>
{
ddGallery
.
init
(
)
;
}
,
1000
)
;
}
,
...

[Wiz]

Всем спасибо, за попытки помочь. Мой вопрос разрешил @L2Banners (https://forum.antichat.xyz/members/891289/) за что ему большое спасибо!

[L2Banners]

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