Есть ли способ передать функцию инициализации на слайд-шоу Orbit?

Я решил свою оригинальную проблему, но мне интересно, есть ли более элегантное решение. Я использую Foundation Orbit для создания слайд-шоу. Это не просто слайд-шоу, это слайд-шоу, где каждый слайд имеет определенный заголовок для данных, и внутри этой надписи есть HTML, который должен загружать модальный диалог.

Если вы используете Foundation, вы сразу же подумаете об использовании библиотеки Reveal для создания модального диалога, и я бы хотел, но требования требуют использования prettyPhoto. (Таковы требования.) Ну, проблема заключается в том, что исходные элементы в заголовке данных не влияют на исходный вызов инициализации:

$("a[rel^='prettyPhoto']").prettyPhoto();

Что мне нужно сделать, это обязательно инициализировать каждый заголовок данных, когда он загружен. Ну, вот проблема. Я решил это для слайд-переходов, используя событие afterSlideChange, но проблема - первый слайд. Мне нужно вызвать этот метод для первого слайда, который отображается.

Вот код, который решает эту проблему:

<script type="text/javascript">
$(window).load(function () {
    $('#featured').orbit({
        afterSlideChange:function () {
            $("a[rel^='prettyPhoto']").prettyPhoto({
                default_width:640,
                default_height:500,
                theme:'light_square'
            });
        }, // empty function
        fluid:true                         // or set a aspect ratio for content slides (ex: '4x3')
    });
    $("a[rel^='prettyPhoto']").prettyPhoto({
        default_width:640,
        default_height:500,
        theme:'light_square'
    });
});
</script>

Есть ли лучший способ сделать это, не дублируя этот код. Должен ли я определить собственное событие initializeSlide, или есть какой-то ответ, который я просто отсутствую?

Ответ 1

Слайдер орбит не раскрывает столько методов. К счастью, есть несколько простых обходных решений.

Например, вы можете установить его так:

$(window).load(function () {
    var sliderChanged = (function sliderChanged(prevActive, active) {
        $("a[rel^='prettyPhoto']").prettyPhoto({
            default_width: 640,
            default_height: 500,
            theme: 'light_square'
        });
        return sliderChanged;
    }());
    jQuery('#featured').orbit({
        afterSlideChange: sliderChanged,
        fluid: true
    });
});

Ответ 2

здесь, я думаю, вы можете использовать событие загрузки из jquery

 <script type="text/javascript">
  $(window).load(function () {
      $('#featured').orbit({fluid:true});
      $("a[rel^='prettyPhoto']").load(function(){
        $(this).prettyPhoto({
          default_width:640,
          default_height:500,
          theme:'light_square'
        });
      });
  });
 </script>

Ответ 3

Вы используете After Slide Change

ссылаться на Orbit документация

'afterSlideChange function(){}, //Empty Function for you to use after slide change'

Таким образом, этот вызов очистит функцию, и вы должны будете ее снова и снова вызывать.

Теперь, мой вопрос, почему вы делаете это, какую-то особую причину? Если нет, просто удалите это.

и согласно моему восприятию, ответ Рохита выше сделает все остальное...

Я надеюсь, что это будет делать:)

Ответ 4

С обновлением к Foundation 4 теперь будет orbit:ready. Событие срабатывает при загрузке слайдера.