Применить плагин jQuery к скрытым элементам

Question

У меня есть страница, в которой есть несколько скрытых div. Эти divs скрыты с помощью обработчика CSS .div {display: none}.

Внутри каждого из этих скрытых divs находится слайд-шоу с поддержкой jQuery, построенное с использованием плагина jQuery под названием TN3.

Каждый скрытый div связан с фотографией, которая видна на странице. Нажав на фотографию, вы увидите соответствующий скрытый div и сдвиньте его на место. При повторном нажатии на фотографию или на кнопке закрытия внутри скрытого div, она снова удерживает ее и снова скрывает. Это делается с помощью простого сценария jQuery show/hide toggle.

Моя проблема заключается в том, что когда вы нажимаете на фотографию, и скрытый div становится видимым, слайд-шоу jQuery в видимом теперь div не работает.

Я думаю, это связано с тем, что сценарий для слайд-шоу использует функцию $(document).ready(). Поскольку скрытые divs не являются частью DOM (поскольку они установлены на display:none) - jQuery, необходимый для запуска слайд-шоу, не срабатывает.

Я думаю, что это оставляет меня с двумя вариантами:

1. Скрыть скрытые дивы на странице загрузки с JQuery, а не устанавливать CSS для display: none. Я думаю, это означало бы, что скрытые divs будут видны на долю секунды при загрузке страницы, а затем они будут скрыты с кодом jQuery - это будет выглядеть неуклюжим и нежелательным.

2. Как-то установить код jQuery, необходимый для работы слайд-шоу, когда пользователь нажимает на фотографию, чтобы переключить видимость скрытого div. Вот где я отклеился - я не уверен, как это сделать.

Мое знание JavaScript ограничивается JQuery, и обычно ограничивается использованием функций, которые имеют $(document).ready(). Я не знаю, как вызвать код на другом событии, кроме загрузки страницы.

Код слайд-шоу приведен ниже.

Любые идеи были бы оценены

$(document).ready(function() { 
    $('.tn3-gallery').tn3({ 
     image: { 
      transitions: [{ 
       type: "fade", 
       easing: "easeInQuad", 
       duration: 423 
      }] 
     }, 
     thumbnailer: { 
      overMove: false 
     }, 
     mouseWheel: false 
    }); 
}); // end ready 

Answer 1

Элементы с дисплеем: ни присутствуют в DOM, но когда вы применяете галерея плагин для них, это, вероятно, рассчитывает высоту/ширину тех элементов, которые будут использоваться для галерея dimantions, и так как не отображается элемент он принимает .width 0.

Jquery (в) или .height() возвращает 0 для элементов с дисплеем: нет

Если это так, то возможные решения будут:

1) INIT галерея только после «скрытой» DIV становится видимым первый раз

2) временно установить элемент дисплея: блок, но с ОТОБРАЖЕНИЕ: скрытый до инициализации галереи - это позволит принять правильную высоту/ширину элемента

Пример для 2-го:

$('.tn3-gallery') 
     .css({'display':'block','visibility':'hidden'}) 
     .tn3({ 
      //your tn3 options 
      init:function(){ 
      //turn element back to display:none after gallery is built 
      $('.tn3-gallery').css({'display':'none','visibility':'visible'}) 
      } 
     });