alexfedoseev
@alexfedoseev
React & Rails Dev

Fotorama: как решить проблему с получением API объекта?

Я использую Fotorama 4.5.0 (Rails gem) и всплыла проблема с получением API объекта.

При загрузке страницы fotorama падает в скрытый div и открывается в модальном окне по клику.
Вот код (coffee):
$objects = $('*[rel="fotorama"]')
$fotorama_div = $('.fotorama')

$fotorama_div
.on('fotorama:showend', (e, fotorama, extra) ->
  # адаптирую высоту контента
).fotorama()
fotorama = $fotorama_div.data('fotorama')
console.log(fotorama) # здесь undefined

$objects.on 'click', ->
  # определяю индекс картинки
  modal.open({content: $('#fotorama-container')})
  fotorama.show(index)

Тут fotorama всегда undefined.
Я добавил проверку через if:
$objects = $('*[rel="fotorama"]')
$fotorama_div = $('.fotorama')

$fotorama_div
.on('fotorama:showend', (e, fotorama, extra) ->
  # адаптирую высоту контента
).fotorama()
fotorama = $fotorama_div.data('fotorama')
console.log(fotorama) # здесь undefined

$objects.on 'click', ->
  # определяю индекс картинки
  modal.open({content: $('#fotorama-container')})
  if typeof fotorama == "undefined"
    fotorama = $fotorama_div.data('fotorama')
    console.log(fotorama) # здесь undefined после первого открытия модального окна
  fotorama.show(index)


После открытия модального окна fotorama всё ещё undefined. Но когда я закрываю модальное окно и открываю его второй раз — я получаю API объект, и всё работает как задумывалось.

Также когда я исполняю $fotorama_div.data('fotorama') в консоли, объект получается.

Почему не работает получение объекта при загрузке страницы?
  • Вопрос задан
  • 4071 просмотр
Пригласить эксперта
Ответы на вопрос 3
Вопрос был задан давно, но я, всё же, отвечу. Только что возникла такая же проблема, нагуглил этот топик, и его копию на stackoverflow :) и там и там нет ответов, может быть кому-то поможет. Решил проблему так:
var images = [];
var fr = $('.fotorama').fotorama();
var fotorama = fr.data('fotorama');
for (var i in resp.product.images) {
	if (resp.product.images[i])
		images.push({img: resp.product.images[i]});
}

if (fotorama) {
	fotorama.load(images);
} else {
	$('.fotorama').fotorama({data: images});
}


Возможно дело в том, что объект не инициализирован, а вызвав fotorama с data - мы его инициализируем корректно.
Ответ написан
Комментировать
Askew
@Askew
Web developer
var el =$.find('.fotorama');
if (el.length > 0) {
    if (!el.data('fotorama')) {
        el.fotorama();
    }
}

Тоже не очень элегантное решение. Но работает.
Ответ написан
Комментировать
Столкнулся с такой же проблемой.
Фоторама находилась в модальном окне, которое display: none;
При этом, сама фоторама инициализировалась, но до .data было не достучаться.

fotoramaInit: function () {
    this.fotorama_init = this.texture_collection_wrapper.fotorama(this.fotorama_param);
    this.fotorama_data = this.fotorama_init.data("fotorama");
},

console.log(this.fotorama_data) === undefined;


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

$("#open-modal")
    .on("click", function () {
        ModelEdit.fotoramaInit();
    });


Возможно кому-то будет полезно!
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы