Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Как повесить слайдер на скрытый блок. (https://javascript.ru/forum/dom-window/59521-kak-povesit-slajjder-na-skrytyjj-blok.html)

skoriylight 14.11.2015 20:27

Как повесить слайдер на скрытый блок.
 
использую слайдер 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
Т.е если блок скрыт, то выдает эту ошибку, в чем причина?

рони 14.11.2015 20:48

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

skoriylight 14.11.2015 21:19

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

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

рони 14.11.2015 21:27

skoriylight,
тогда вариант
var $fotoramaDiv = $('#fotorama').show().fotorama({
  width: 500,
  height: 100,

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


Часовой пояс GMT +3, время: 19:03.