javascript - 有没有办法将初始化函数传递给 Orbit 幻灯片？

Question

我解决了原来的问题，但我想知道是否有更优雅的解决方案。我正在使用 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”事件，还是我只是缺少一些答案？

Answer 1

Orbit slider 没有公开那么多方法。幸运的是，有一些简单的解决方法。

例如，你可以这样设置:

$(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
    });
});