orbit.js
Simplify the data layer in your client-side applications.
I am trying to use a script I found in this question to run Orbit in Foundation 3, but I can not get it to initialize properly. I added this script in the footer and Foundation.min.js in the header. I get a no method 'foundation' error on line 3 in my console it doesn't work.
Source: (StackOverflow)
I solved my original problem, but I'm wondering if there's a more elegant solution. I'm using Foundation's Orbit to create a slideshow. This is no simple slideshow, it is a slide show where each slide has a data-caption defined, and within this data-caption there is HTML that needs to load a modal dialog.
If you are using Foundation, you immediately think about using the Reveal library to bring up a modal dialog, and I would, but the requirements call for using prettyPhoto. (Those are the requirements.) Well the problem is that the elements in the data-caption are not affected by the original initialization call to:
$("a[rel^='prettyPhoto']").prettyPhoto();
What I need to do is make sure to initialize each data-caption as it is loaded. Well, here's the problem. I've solved this for slide transitions by using the afterSlideChange event, but the problem is the first slide. I need to call this method for the first slide that is displayed.
Here's the code that solves this problem:
<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>
Is there a better way to do this without having to duplicate that code. Should I define an "initializeSlide" event of my own, or is there some answer I'm just missing?
Source: (StackOverflow)
Using Zurb's Foundation 4.1.5 (latest version), the Orbit image slider works great. Unfortunately it looks really for the first couple of seconds where all the images appear as a giant bulleted list. Then the JavaScript kicks in and it all is beautiful.
How do I avoid the initial ugliness? Can I preload the images? Can I have everything with display: none or visibility: hidden until it's ready?
Source: (StackOverflow)
The Orbit slider that comes as part of Zurb's Foundation seems to add a class of hide-for-small to the navigation.
I need the navigation to still show up however in order to show my content. I have tried removing the hide-for-small part of the wrapper in jquery.foundation.orbit.js line 59 but the class keeps getting added.
Does anyone have an idea how to remove it?
Source: (StackOverflow)
I'm trying to build a to scale model of the solar system. I wanted to see if someone could explain to me how the rotation speed works. Here's the important piece:
objects[index].rotation.y += calculateRotationSpeed(value.radius,value.revolution) * delta;
How does the rotation speed relate to actual time? So if you have a speed of 1, is that a movement of 1 px per millisecond? Or if you have a speed of 0.1, is that less that a px a second?
Basically I'm trying to calculate the correct rotation speed for the planets given their radius and amount of hours in a day. So if you were on earth, it would complete 1 rotation in 24 hours. Here's the function that I wrote that's doing the calculation now:
/* 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;
}
I gave it a try and it still seems to be moving too fast. I also need something similar to calculate orbit speeds.
Source: (StackOverflow)
I'm working with Foundation 4 framework. I've been trying to include the Orbit slide into my website, but I can't seem to get it to work.
So I followed the steps in Foundation documentation. I've included all necessary scripts
<script type="text/javascript" src="js/vendor/custom.modernizr.js"></script>
<script type="text/javascript" src="js/foundation.min.js"></script>
<script type="text/javascript" src="js/foundation/foundation.orbit.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script>
$(document).foundation();
</script>
Then I tried to add a simple slideshow
<ul data-orbit>
<li>
Test1
</li>
<li>
Test2
</li>
<li>
Test3
</li>
</ul>
But, instead of generating a slideshow all I get is an unnumbered list. I triple checked to make sure I didn't misspell anything. Here's an example of what I get.
Source: (StackOverflow)
I'm using Foundation 4.3.0 for a project, and am trying to set up Orbit in the most basic way. The javascript and CSS seem to be loading correctly, the images are loading, all the extra elements are inserted, etc. But the main <ul> always has a height of 0px. Here's my 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>
Here's the HTML once foundation.orbit.js does its thing:
<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 rel='nofollow' href="#" class="orbit-prev">Prev <span></span></a>
<a rel='nofollow' href="#" class="orbit-next">Next <span></span></a>
<div class="orbit-slide-number">
<span>1</span> of <span>2</span>
</div>
<div class="orbit-timer">
<span></span>
<div class="orbit-progress" style="overflow: hidden; width: 54.15%;"></div>
</div>
</div>
<ol class="orbit-bullets">
<li data-orbit-slide-number="1" class="active"></li>
<li data-orbit-slide-number="2" class=""></li>
</ol>
</div>
</section>
</div>
I have tried to put explicit width + height on the images, put class="active" on one slide when generating the HTML, change various Foundation settings, etc, and nothing seems to work.
When I compare the HTML to the live example in the Foundation docs, I notice that in the working version, a z-index is always set dynamically on the slides. On my site, no z-index is ever set. And of course, the ul in the working version has an inline CSS height which equals the height of the slides.
If I manually set the ul height to 300px, everything looks right, except I see no images. If I set div.orbit-container to overflow: visible, I will see the edge of one of the slides to the left of the container.
Any ideas would be much appreciated.
Source: (StackOverflow)
The issues is that the slider is not displaying properly when a user first visits the site. In testing the slider worked fine.
Or actually there was problem that it would not load when first visiting the page, but would then show up when (and only when) you refresh the page. But otherwise the slider shows up but not the images
I looked at the documentation from Zurb at Zurbs documentation for the Orbit slider and they have a sample file, That original demo file has a link above the images (which I removed)
I then searched more on Google using the phrase about this topic using the keyword "orbit preload images" and found a One solution with a preload function. Below is the code that I used to preload (I only modified the path to the images)
<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>
I went ahead and added script but it is still not loading. The complete code for that page is viewable in a Gist on GitHub
The code for the setup of the image slider is viewable in a Gist on GitHub
The site is hosted on a server that is in a .net environment that does not support php.
Source: (StackOverflow)
I am trying to rotate an "orbit" using rotation matrix given below:
[cos(angle) -sin(angle) 0;
sin(angle) cos (angle) 0;
0 0 1 ]
First thing I thought I should do was to use sphere():
[x y z] = sphere;
Then concatenate x, y, and z together in a vector:
xyz = [x; y; z];
rotatMat = [cos(angle) -sin(angle) 0; sin(angle) cos (angle) 0; 0 0 1 ];
multiply rotation matrix and xyz to rotate an orbit:
rotated = rotatMat .* xyz;
However, xyz turns out to be 62x22 dimension while my rotatMat is only 3x3 so I cannot multiply them together.
How can i fix this issue?
Thank you in advance.
Source: (StackOverflow)
I have problem with width of orbit slider images. My images has 1600px width, but resolution of monitor can be higher - e.g 1680px.
Is it possible to stretch the size of images to 100% of screen (in this example - 1680px)?
My code is standard and looks like this:
<div id="featured">
<img src="11.jpg" alt="">
<img src="12.jpg" alt="">
<img src="13.jpg" alt="">
</div>
<script src="js/jquery.foundation.orbit.js"></script>
<script type="text/javascript">
$(window).load(function() {
$("#featured").orbit();
});
</script>
Thanks for any help.
Adrian
Source: (StackOverflow)
I'm using foundation and I want to use orbit as a full width slideshow. I need it to cover the whole window, width and height.
It seems the default usage of this slider is simply to adapt the width of the images to the container but I need it to fit the height, cropping the image if needed to keep the ratio. Is there an easy way to do this?
Source: (StackOverflow)
The Orbit slider in Foundation 3 is infinite, meaning it cycles through its slides over and over.
Is there a way to get it to display all its slides only once, stopping on the last slide?
Source: (StackOverflow)
I am using Orbit in Foundation 4 and would like to totally disable the timer function so slides can only be advanced manually by the user. Is this possible?
Source: (StackOverflow)
I'm using Orbit to show some text heavy elements and the arrows are getting in the way of my text. I'm weary of doing any sort of fancy css33 to increase their transparency as I need this to look right in Firefox for OS9, which I think means Firefox 3...
So is there some way I can just move the arrows outside of Orbit's containers? Even better would be if below the container I had prev arrow, then the bullets, then the next arrow?
Source: (StackOverflow)