1

我需要根据当前图像的大小调整轨道 div（轨道内容所在的容器）的大小。目前，它似乎正在占用最大图像的大小。

是否有可能在 Foundation 4 中的轨道滑块的加载事件线上获得一些东西。

我可以使用 after-slide-change 事件获取句柄，并对除第一张图像之外的所有图像进行大小调整（当然这是因为当图像从 1 变为 2 时会触发幻灯片更改）。

$("#image-gallery-modal").bind('orbit:after-slide-change.fndtn.orbit', function(event){         
  var height = event.target.children[event.data[0].slide_number].children[0].children[0].clientHeight;

  var containerWidth = $("#imgGal").parent().width();
  var childrenCount  = $("#imgGal").children().length;
  var bulletContainerWidth = 14*childrenCount;

  var leftOffest = (containerWidth - bulletContainerWidth)/2;

  $('.orbit-bullets').css('margin-left',leftOffest+'px');
  $("#imgGal").parent().css('height',height+'px');                  
});

image-gallery-modal是我的div，其中包含轨道容器、子弹和关闭按钮。

我从 orbit.js 得到这个想法。有一行代码

.on('orbit:after-slide-change.fndtn.orbit', function(e, orbit) {
  var $slide_number = $container.find('.' + self.settings.slide_number_class);

  if ($slide_number.length === 1) {
    $slide_number.replaceWith(self._slide_number_html(orbit.slide_number, orbit.total_slides));
  }
})

有什么方法可以触发轨道上的事件加载或那些线上的东西。

4

0 回答 0