現在の画像のサイズに応じて、軌道 div (軌道コンテンツが存在するコンテナー) のサイズを変更する必要があります。現在は一番大きい画像のサイズをとっているようです。
Foundation 4 の軌道スライダーの onload イベントの行で何かを取得することは可能ですか?
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
軌道コンテナー、弾丸、閉じるボタンを含むmyです。
このアイデアは 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));
}
})
軌道のイベントオンロードまたはそれらの行で何かをトリガーできる方法はありますか?