Я решил свою первоначальную проблему, но мне интересно, есть ли более элегантное решение. Я использую Orbit Foundation для создания слайд-шоу. Это не простое слайд-шоу, это слайд-шоу, в котором для каждого слайда определена-заголовок данных, а внутри этого заголовка данных-есть HTML, который должен загрузить модальное диалоговое окно.
Если вы используете Foundation, вы сразу же думаете об использовании библиотеки Reveal для вызова модального диалога, и я бы так и сделал, но требования требуют использования prettyPhoto. (Таковы требования. )Ну, проблема в том, что элементы в data-caption не затрагиваются первоначальным инициализирующим вызовом:
$("a[rel^='prettyPhoto']").prettyPhoto();
Что мне нужно сделать, так это убедиться, что каждый data-caption инициализируется по мере его загрузки. Вот в чем проблема. Я решил эту проблему для перехода между слайдами с помощью события 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» или есть какой-то ответ, который мне просто не хватает?