11

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

4

4 回答 4

3

轨道滑块没有公开太多方法。幸运的是，有一些简单的解决方法。

例如，您可以这样设置：

$(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
    });
});
于 2013-05-24T12:26:17.777 回答
1

在这里我认为你可以使用来自 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>
于 2013-05-29T19:46:45.137 回答
0

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

于 2013-09-05T19:24:19.213 回答
0

您正在使用幻灯片更改后

参考 Orbit 的文档

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

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

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

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

我希望这会做:)

于 2013-05-31T09:32:04.450 回答