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

【问题标题】：Is there a way to pass an initialization function to an Orbit slideshow?有没有办法将初始化函数传递给 Orbit 幻灯片？
【发布时间】：2012-04-12 03:02:53
【问题描述】：

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

【问题讨论】：

你找到解决方案了吗？

标签： javascript jquery zurb-foundation prettyphoto orbit

【解决方案1】：

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

【讨论】：

我最初的问题是 stackoverflow.com/questions/16720069/… 。我选择在这里开始赏金，因为它看起来很相似，我需要等待两天才能开始我的问题。请你看看我原来的问题。我尝试应用你所说的但无法修复它。似乎我错过了一些东西。非常感谢您的帮助。

【解决方案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>

【讨论】：

@Rohit，你是对的，作为 Orbit，依赖于 jQuery.. :)
它的 Orbit 框架是建立在 jQuery 之上的，没有 jQuery 它将无法运行.. 它是依赖项之一.. ORbit 也仅使用 jQuery.. :)

【解决方案3】：

您正在使用 After Slide Change

参考 Orbit 的documentation

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

所以这个调用会清空函数，你必须一次又一次地调用它..

现在，我的问题是您为什么要这样做，有什么特别的原因吗？如果没有，那就删除它。

根据我的看法，上面 Rohit 的回答将完成剩下的工作......

我希望这样做:)

【讨论】：

【解决方案4】：

随着 Foundation 4 的更新，现在有一个 orbit:ready 事件。加载滑块时触发该事件。

【讨论】：