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

Я решил свою первоначальную проблему, но мне интересно, есть ли более элегантное решение. Я использую Orbit Foundation для создания слайд-шоу. Это не простое слайд-шоу, это слайд-шоу, в котором для каждого слайда определен заголовок данных, а внутри этого заголовка данных есть 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» или есть какой-то ответ, который мне просто не хватает?


javascript jquery zurb-foundation orbit prettyphoto
person Tim O'Brien    schedule 12.04.2012    source источник
comment
Вы нашли решение для этого?   -  person Bobby Francis Joseph    schedule 24.05.2013

Ответы (4)


arrow_upward
3
arrow_downward

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

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

$(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
    });
});
person A. Wolff    schedule 24.05.2013
comment
Мой первоначальный вопрос был stackoverflow.com/questions/16720069/ . Я решил начать награду здесь, так как она выглядела похожей, и мне нужно было подождать два дня, чтобы начать ее по моему вопросу. Не могли бы вы взглянуть на мой первоначальный вопрос. Я попытался применить то, что вы сказали, но не смог это исправить. Кажется, я что-то упускаю. Большое спасибо за помощь. - person Bobby Francis Joseph; 24.05.2013

arrow_upward
1
arrow_downward

здесь я думаю, вы можете использовать событие загрузки из 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>
person Rohit Agrawal    schedule 29.05.2013
comment
@ Rohit, Вы правы, поскольку Orbit зависит от jQuery.. :) - person MarmiK; 31.05.2013
comment
Его Orbit Framework построен на jQuery, он не будет работать без jQuery.. это одна из зависимостей.. ORbit также использует только jQuery.. :) - person MarmiK; 31.05.2013

arrow_upward
0
arrow_downward

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

см. документацию Orbit

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

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

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

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

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

person MarmiK    schedule 31.05.2013

arrow_upward
0
arrow_downward

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

person Brett DeWoody    schedule 05.09.2013