Как повесить слайдер на скрытый блок.

[skoriylight]

использую слайдер http://fotorama.io

вот пример реализации

<script>
  $(function () {
    // 1. Initialize fotorama manually.
    var $fotoramaDiv = $('#fotorama').fotorama({
  width: 500,
  height: 100,
  
  allowfullscreen: true,
  nav: 'thumbs'
});

    // 2. Get the API object.
    var fotorama = $fotoramaDiv.data('fotorama');


    // 3. Inspect it in console.
    console.log(fotorama);
    
    fotorama.load([
  {img: '1.jpg', thumb: '1-thumb.jpg'},
  {img: '2.jpg', thumb: '2-thumb.jpg'},

]);
  });
</script>


<div class="fotorama" id="fotorama">

В данном варианте все прекрасно работает. Но при попытке поместить в модальное окно бутстрапа выдает ошибку

fotorama is undefined

Т.е если блок скрыт, то выдает эту ошибку, в чем причина?

[рони]

skoriylight,
либо ещё нет элемента id="fotorama" либо уже нет $

[skoriylight]

если элемент в таком виде , то все работает
<div class="fotorama" id="fotorama"></div>

Добавляю стиль
<div style="display:none" class="fotorama" id="fotorama"></div>
и уже не работает

[рони]

skoriylight,
тогда вариант

var $fotoramaDiv = $('#fotorama').show().fotorama({
  width: 500,
  height: 100,

  allowfullscreen: true,
  nav: 'thumbs'
}).hide();