标签: orbit

我正在尝试建立一个太阳能系统的比例模型.我想看看是否有人可以向我解释旋转速度的工作原理.这是重要的一部分:

objects[index].rotation.y += calculateRotationSpeed(value.radius,value.revolution) * delta;

转速如何与实际时间相关？因此,如果您的速度为1,那么每毫秒的运动速度是1 px吗？或者,如果你的速度为0.1,那么每秒的px是否小于px？

基本上我正在尝试计算行星的正确旋转速度,考虑到它们的半径和一天中的小时数.因此,如果你在地球上,它将在24小时内完成1次旋转.这是我写的现在正在进行计算的函数:

/* In a day */
function calculateRotationSpeed(radius,hrs,delta) {
    var cir = findCircumference(radius);
    if(delta) {
        var d = delta;
    } else {
        var d = 1;
    }
    var ms = hrs2ms(hrs) * d;
    var pxPerMS = km2px(cir) / ms;
    return pxPerMS;
}

我试了一下它似乎仍然移动得太快了.我还需要类似于计算轨道速度的东西.

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

使用Zurb的Foundation 4.1.5(最新版本),Orbit图像滑块非常有效.不幸的是,它看起来真的是前几秒所有图像都显示为一个巨大的项目符号列表.然后JavaScript开始了,一切都很美.

我该如何避免最初的丑陋？我可以预装图像吗？我可以随身携带一切display: none或者visibility: hidden直到它准备好了吗？

问题是当用户首次访问该站点时滑块无法正常显示.在测试中滑块工作正常.

或者实际上存在首次访问页面时无法加载的问题,但是当您刷新页面时(并且仅在何时)显示该问题.但是否则滑块显示但不显示图像

我查看了Zurb在Zurbs文档中关于Orbit滑块的文档,他们有一个示例文件,原始演示文件在图像上方有一个链接(我删除了)

然后,我使用关键词"orbit preload images"使用关于此主题的短语在Google上搜索更多内容,并找到了具有预加载功能的One解决方案.下面是我用来预加载的代码(我只修改了图像的路径)

<script language="javascript">
  function preload(arrayOfImages) {
    $(arrayOfImages).each(function(){
      $('<img/>')[0].src = this;
    });
  }
  preload([
    '../images/products/mill/slider/dentist.jpg',
    '../images/products/mill/slider/side.jpg',
    '../images/products/mill/slider/before.jpg',
    '../images/products/mill/slider/after.jpg',
    '../images/products/mill/slider/radio.jpg'
  ]);
</script>

我继续添加脚本,但仍然没有加载.该页面的完整代码可在GitHub上的Gist中查看

用于设置图像滑块的代码可在GitHub上的Gist中查看

该站点托管在不支持php的.net环境中的服务器上.

我一直在使用Foundaiton Orbit图像滑块,发现它很棒.现在我的高度有问题.

我在画廊中有一些图像比其他图像高得多,因此包含图库的容器设置为"最高"图像的高度.有没有改变它,所以容器根据它显示的当前图像的高度调整它的高度？

点击此处查看网站的实例

这是代码:

        <div class="slideshow-wrapper preloader">
            <ul data-orbit  data-options="animation:fade;
                pause_on_hover:false;
                animation_speed:500;
                timer_speed: 4000;
                navigation_arrows:true;
                slide_number: false;
                swipe: true;
                bullets:false;">

      <li>
         <img src="img/jpg/weapon-wall.jpg" alt="Armoury Tromp l'oeil">
      </li>
       <li>
          <img src="img/jpg/vikings.jpg" alt="Vikings attacking from the sea mural">
      </li>
      <li>
         <img src="img/jpg/chariot.jpg" alt="Ancient chariot Trompe l'oeil">
      </li>
      <li>
          <img src="img/jpg/egypt.jpg" alt="Karen specialises in Trompe l'oeil, Egypt">
      </li>
      <li>
          <img src="img/jpg/army.jpg" alt="army Trompe l'oeil">
      </li>



  </ul>

CSS:

.data-orbit img {
  max-width: 70%;
  min-height:auto;
}

/* Orbit Graceful Loading */
.orbit-container ul li …

我正在使用Foundation 4.3.0进行项目,并试图以最基本的方式设置Orbit.javascript和CSS似乎正确加载,图像正在加载,所有额外的元素都插入,等等.但主要<ul>始终具有0px的高度.这是我的HTML:

<div class="row">
    <section class="large-12 columns">
        <div class="slideshow-wrapper">
            <div class="preloader"></div>
            <ul data-orbit="">
                <li><img src="/media/cache/8a/ec/8aec9d6a99dea3db235f24712e8f3f88.jpg"></li>
                <li><img src="/media/cache/20/88/208812a64eee2e7e9b8efe4b5f73c990.jpg"></li>
            </ul>
        </div>
    </section>
</div>

这是HTML曾经做过foundation.orbit.js的事情:

<div class="row">
    <section class="large-12 columns">
        <div class="slideshow-wrapper">
            <div class="preloader"></div>
            <div class="orbit-container orbit-stack-on-small">
                <ul data-orbit="" class="orbit-slides-container" style="margin-left: -100%; width: 400%; height: 0px;">
                    <li data-orbit-slide="" style="width: 25%;"><img src="/media/cache/20/88/208812a64eee2e7e9b8efe4b5f73c990.jpg"></li>
                    <li class="active" style="width: 25%;"><img src="/media/cache/8a/ec/8aec9d6a99dea3db235f24712e8f3f88.jpg"></li>
                    <li style="width: 25%;"><img src="/media/cache/20/88/208812a64eee2e7e9b8efe4b5f73c990.jpg"></li>
                    <li data-orbit-slide="" style="width: 25%;"><img src="/media/cache/8a/ec/8aec9d6a99dea3db235f24712e8f3f88.jpg"></li>
                </ul>

                <a href="#" class="orbit-prev">Prev <span></span></a>
                <a href="#" class="orbit-next">Next <span></span></a>

                <div class="orbit-slide-number">
                    <span>1</span> of <span>2</span> …

我目前正在使用Foundation 6中的orbit.js滑块,而没有看到显示幻灯片编号的选项.

你能就此提出建议或分享一些例子吗？

谢谢!

我正在尝试使用我在此问题中找到的脚本在Foundation 3中运行Orbit,但我无法正确初始化它.我在页脚中添加了此脚本,在标题中添加了Foundation.min.js.我在我的控制台的第3行得到一个没有方法'基础'错误它不起作用.

我一直在这个基金会制作的网站上工作了一整天.一切顺利,直到我决定使用Foundation的Orbit制作一个图像滑块.

我已经尝试了一切,似乎没有任何工作.我检查了他们的支持页面(http://foundation.zurb.com/docs/components/orbit.html)并尝试了那里描述的每个选项.还是行不通...

任何人都可以看看我的代码并告诉我我做错了什么？谢谢!

<div class="row">
        <div class="large-9 columns logoone">
            <!-- slider --> 
            <ul class="orbit-container">
              <li> 
                <img src="images/1.JPG" alt="whatever" />
              </li>
              <li>
                <img src="images/2.jpg" alt="whatever" />
              </li>
              <li>
                <img src="images/3.JPG" alt="whatever" />
              </li>
            </ul>
            <!-- slider --> 
        </div>
        <div class="large-3 columns logoone">
            <img src="images/logo.jpg" alt="whatever" title="whatever">
            <br><br>
        </div>
      </div>

<script src="js/jquery.js"></script>
    <script src="js/foundation.min.js">
        $(document).foundation({
          orbit: {
            animation: 'slide',
            timer_speed: 1000,
            pause_on_hover: true,
            animation_speed: 500,
            navigation_arrows: true,
            bullets: false,
            next_on_click: true
          }
        });
    </script>

    <script src="js/foundation/foundation.orbit.js">    </script>

这就是代码现在的样子.如上所述,我已经尝试直接编辑orbit.js文件,将类轨道容器添加到div中,添加

data-options="animation:slide; …

我在基础4中使用Orbit并且想完全禁用计时器功能,因此幻灯片只能由用户手动提前.这可能吗？