Orbit
Orbit es una herramienta fácil de usar, potente regulador de la imagen construida para responder, al igual que Foundation.
Primeros pasos
Implementación de orbit es fácil, pero hay algunas cosas a tener en cuenta cuando se trata de usar Orbit en su forma más simple.
Archivos incluidos
En primer lugar, asegurarse de que está incluida la JS y CSS de orbit. Si estás utilizando la versión SCSS de la Fundación, estos serán parte de su entorno ya, y si se descarga la Fundación como CSS sencilla los dos archivos será parte de foundation.js y foundation.css , respectivamente.También asegúrese de que está incluyendo jQuery, también se brinda como parte de cualquier distribución de la Fundación.
Configuración del control deslizante
El control deslizante de orbit es más que un
div con un ID único. Para nuestros ejemplos usaremos <div id="featured"> , un ejemplo de lo que se puede ver arriba. El código es el siguiente:
<div id="featured" >
<img src="../images/orbit-demo/demo1.jpg" />
<img src="../images/orbit-demo/demo2.jpg" />
<img src="../images/orbit-demo/demo3.jpg" />
</div>
La activación de orbit
Con su elemento #featured en su lugar, sólo tenemos que llamar a la órbita. Recuerde: su llamada a Orbit tiene que venir después de haber incluido jQuery y foundation.js. Por defecto, estos son al final de su documento, por lo que este fragmento de código debe venir al final:
<script type="text/javascript" >
$(window).load(function() {
$('#featured').orbit();
});
</script>
Eso es todo lo que necesita para activar la órbita de una serie de imágenes. Se incluye el elemento temporizador, y las paletas de mano izquierda y derecha.
Opciones
Orbit tiene un número de opciones disponibles, que se puede especificar cuando se llama .orbit() . En el ejemplo anterior, hemos mantenido todos los valores por defecto, pero si lo desea, puede utilizar cualquiera de estas opciones:
$('#featured').orbit({
animation: 'fade', // fade, horizontal-slide, vertical-slide, horizontal-push
animationSpeed: 800, // how fast animtions are
timer: true, // true or false to have the timer
resetTimerOnClick: false, // true resets the timer instead of pausing slideshow progress
advanceSpeed: 4000, // if timer is enabled, time between transitions
pauseOnHover: false, // if you hover pauses the slider
startClockOnMouseOut: false, // if clock should start on MouseOut
startClockOnMouseOutAfter: 1000, // how long after MouseOut should the timer start again
directionalNav: true, // manual advancing directional navs
captions: true, // do you want captions?
captionAnimation: 'fade', // fade, slideOpen, none
captionAnimationSpeed: 800, // if so how quickly should they animate in
bullets: false, // true or false to activate the bullet navigation
bulletThumbs: false, // thumbnails for the bullets
bulletThumbLocation: '', // location from this file where thumbs will be
afterSlideChange: function(){}, // empty function
fluid: true // or set a aspect ratio for content slides (ex: '4x3')
});
Sliders de contenido
Orbit no solo se creó como un control deslizante simple de imágenes, sino que también soporta elementos
div con contenido arbitrario. Usted podría tener un control deslizante de bloques de texto, cualquier cosa en realidad. Recuerde: para que un control deslizante de contenido funcione sin ningún tipo de imágenes, es necesario especificar una relación de aspecto cuando se llama al .orbit(). Como se muestra en las opciones anteriores, la opción que se necesita es la relación fluid: 16x9 u otra.
<div id="featuredContent" >
<div>
<h4>This is a content slider.</h4>
<p>Each slide holds arbitrary content, like text or actions.</p>
</div>
<div>
<h4>We can include text and buttons, like this!</h4>
<p>We take no responsibility for what happens if you click this button.</p>
<p><a href="http://www.youtube.com/watch?v=dQw4w9WgXcQ" class="button" target="_blank" > Rock My World!</a></p>
</div>
<div>
<h4>What? You didn't click it?</h4>
<p>We'll give you the benefit of the doubt. Maybe you did, and now you're back!</p>
</div>
</div>
<script type="text/javascript" >
$(window).load(function() {
$('#featuredContent').orbit({ fluid: '16x6' });
});
</script>
Nota: Hemos puesto algunos de los estilos simples de nuestro control deslizante de contenido, en particular, un fondo y el relleno de los elementos
div. Orbit apila las diapositivas, las diapositivas transparentes serán visibles en la parte superior de la otra.Graceful Orbit Loading State
Dado que orbit se ejecuta a través de Javascript, antes de que se active es posible que vea sus imágenes o todo el contenido apilados uno encima del otro. Para evitar esto se puede hacer uso de una propiedad de orbit: se añade una clase de .orbit, lo que significa que puede orientar su
div#featured con estilos específicos que sean anulados cuando la clase se añade.
Por ejemplo, si queremos que la orbit cargue una pantalla de color gris claro sencillo con una ruleta, la CSS se vería así:
#featured { background: url(spinner.gif) center center #f4f4f4; height: 300px; }
#featured img { display: none; }
#featured.orbit { background: none; }
#featured.orbit img { display: block; }
Nos escondemos las imágenes por defecto, y dar el #featured bloque de una altura fija y de fondo con una ruleta. Una vez que las cargas de Orbit se muestran las imágenes y eliminar ese fondo.
