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

Question

[Леша Федосеев]

Я использую 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') в консоли, объект получается.

Почему не работает получение объекта при загрузке страницы?

Answer 1

[Александр]

Вопрос был задан давно, но я, всё же, отвечу. Только что возникла такая же проблема, нагуглил этот топик, и его копию на 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 - мы его инициализируем корректно.

Answer 2

[Артём Дубинин]

var el =$.find('.fotorama');
if (el.length > 0) {
    if (!el.data('fotorama')) {
        el.fotorama();
    }
}

Тоже не очень элегантное решение. Но работает.

Answer 3

[Станислав Хмелевский]

Столкнулся с такой же проблемой.
Фоторама находилась в модальном окне, которое 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();
    });

Возможно кому-то будет полезно!