1

我正在使用 Fotorama 4.5.0 (Rails gem)，但在获取 API 对象时遇到问题。

在页面加载时 Fotorama 位于隐藏的 div 中。它在点击时以模式打开。
这是代码（咖啡）：

$objects = $('*[rel="fotorama"]')
$fotorama_div = $('.fotorama')

$fotorama_div
.on('fotorama:showend', (e, fotorama, extra) ->
  // resizing fotorama
).fotorama()
fotorama = $fotorama_div.data('fotorama')
console.log(fotorama) // here is undefined

$objects.on 'click', ->
  // finding index of an image
  modal.open({content: $('#fotorama-container')})
  fotorama.show(index) // index is ok

有了这个代码fotorama对象总是undefined.
好的，我添加if了检查：

$objects = $('*[rel="fotorama"]')
$fotorama_div = $('.fotorama')

$fotorama_div
.on('fotorama:showend', (e, fotorama, extra) ->
  // resizing fotorama
).fotorama()
fotorama = $fotorama_div.data('fotorama')
console.log(fotorama) // here is undefined

$objects.on 'click', ->
  // finding index of an image
  modal.open({content: $('#fotorama-container')})
  if typeof fotorama == "undefined"
    fotorama = $fotorama_div.data('fotorama')
    console.log(fotorama) // here is undefined after the first click on object
  fotorama.show(index) // index is ok

在第一次单击对象之后 -fotorama仍然是undefined，但是在我关闭模式并进行第二次单击之后 - 我得到fotorama对象并且一切都按预期工作。

当我$fotorama_div.data('fotorama')在控制台中进行操作时，它可以工作。

如何fotorama在页面加载时获取对象？

4

2 回答 2

1

我遇到了完全相同的问题 - 在 div 中加载 fotorama 在控制台中给出了“未定义”，只有在再次显示 div 之后，fotorama 对象才被正确加载。

I found the cause of this was loading fotorama in an object with "display: none;" css styling. I dont know why but if fotorama loads in something that is hidden then it breaks.

I dont know any RoR but my sugestion would be to first show the modal, then load fotorama $fotorama_div.fotorama() after the modal is opened.

于 2014-07-01T06:59:28.353 回答
0

我遇到了同样的问题，并找到了它返回的原因undefined。
如果$fotorama_divhasstyle="display: none;"属性$fotorama_div.data('fotorama')则将返回undefined。

所以解决办法是style="display: none;"在运行之前去掉这个属性$fotorama_div.data('fotorama')。

$fotorama_div.show().data('fotorama');

如果它仍然返回undefined然后检查是否有任何父母$fotorama_div有display: nonecss。

let hiddenParents = $fotorama_div.parents().filter(function() { 
    return $(this).css('display') == 'none';
});
hiddenParents.show();
let fotorama = $fotorama_div.data('fotorama');
hiddenParents.hide();
// Now enjoy with your fotorama from here.
于 2020-12-13T16:30:18.950 回答