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

轨道滑块不会暴露太多方法。幸运的是，有一些简单的解决方法。

例如，您可以这样设置：

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

Answer 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>

Answer 3

您正在使用After Slide Change

参考Orbit的documentation

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

因此，此调用将清空该函数，您必须一次又一次地调用它。

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

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

我希望这样做：）

Answer 4

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

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

4 个答案: