Есть ли способ передать функцию инициализации на слайд-шоу 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
. Событие срабатывает при загрузке слайдера.