Orbit and Reveal: complementos de jQuery para controles deslizantes de imágenes y ventanas modales

Dos complementos de jQuery que se desarrollaron exclusivamente para los lectores de Smashing Magazine para darle vida a sus herramientas de desarrollador: Orbit, un control deslizante; y Reveal, un complemento modal.

Crear una experiencia pulida y única para sus usuarios se vuelve cada vez más crítico a medida que la Web se sobrecarga más. Destacar es difícil. Al rescate vienen marcos como jQuery, que ofrecen una experiencia modular y altamente personalizable para sus visitantes.

Hoy, estamos encantados de presentar dos nuevos complementos de jQuery que fueron desarrollados exclusivamente para los lectores de Smashing Magazine para darle vida a sus herramientas de desarrollador: Orbit , un nuevo control deslizante; y Reveal , un complemento modal.

¿Por qué crear el nuestro?

Rápidamente, antes de profundizar en los detalles, sería útil tener algunos antecedentes. Hay cientos de controles deslizantes de contenido e imágenes de jQuery y probablemente miles de complementos modales. Entonces, ¿por qué crear el nuestro? Los escribimos por varias razones , siendo las más importantes:

• Flexibilidad . Usamos estos complementos para clientes, proyectos internos, nuestras aplicaciones y muchos otros lugares. Podemos modificar y reutilizar fácilmente el código para implementaciones específicas y especiales.
• Experiencia . No hay mejor manera de aprender a crear mejores complementos y códigos que hacerlo usted mismo y publicarlo públicamente. Orbit ha pasado por una serie de iteraciones y reescrituras de las que hemos aprendido. La revelación ha sido sometida solo a unos pocos. Conseguimos Raptorize correctamente la primera vez y no hemos tenido que actualizarlo.
• Mejores interacciones y desarrollo . Quizás el factor más importante fue que, en todo nuestro equipo, utilizamos varios complementos que tienen diferentes peculiaridades y características, pero ninguno de ellos logró las características e interacciones que queríamos. El desarrollo de complementos nos permitió trabajar desde una base de código uniforme, iterar y optimizar nuestro trabajo.

Eche un vistazo a algunos de nuestros artículos anteriores:

• Dale sabor a tu sitio web con jQuery Goodness
  Demuestra varias técnicas creativas para aumentar la usabilidad con jQuery.
• Diseño más potente, mejor y más rápido con CSS3
  Presenta algunos usos potentes del próximo estándar CSS3.

Órbita: control deslizante de imagen jQuery

Primero está nuestro nuevo control deslizante jQuery, Orbit. Con tan solo 4 KB, Orbit puede manejar imágenes, imágenes vinculadas y bloques de contenido directo. Configurarlo toma solo unos minutos y tiene algunos estilos listos para usar. Comenzamos a trabajar en Orbit debido a la gran cantidad de controles deslizantes de imágenes de jQuery, ninguno parecía sencillo de implementar ni tenía buenos estilos predeterminados. Después de varias iteraciones y lanzamientos, la adición y eliminación de una serie de funciones y un aprendizaje serio, teníamos un complemento que se adaptaba perfectamente a nuestras necesidades.

Profundicemos en el código, ¿de acuerdo?

El código

Para comenzar, necesitará jQuery y el complemento Orbit (asegúrese de que jQuery esté conectado primero).

script src="js/jquery.min.js" type="text/javascript"/scriptscript src="js/jquery.orbit.min.js" type="text/javascript"/script

Ahora podemos conectar rápidamente el CSS que necesitamos:

link rel="stylesheet" href="css/orbit.css"

Finalmente, profundicemos en el margen de beneficio.

div   img src="overflow.jpg" alt="Overflow: Hidden No More" /   img src="captions.jpg"  alt="HTML Captions" /   img src="features.jpg" alt="and more features" //div

Sólo un par de notas antes de continuar:

1. Orbit determinará dinámicamente la altura y el ancho de su conjunto de imágenes y escalará en consecuencia, pero asegúrese de que todas sus imágenes tengan el mismo tamaño o, de lo contrario, las más grandes se asomarán por los lados.
2. Notarás que el iddiv principal es featured, pero no tiene por qué serlo. Cuando llamas al complemento Orbit, puedes configurar tu propio selector y luego orbitse aplicará la clase mágica.

Todo lo que tenemos que hacer ahora es activar el complemento Orbit.

script type="text/javascript"   $(window).load(function() {      $('#featured').orbit();   });/script

Ahí lo tienes: Orbit, implementado y listo para usar con todas las configuraciones predeterminadas. Para ver más opciones, limpiar el control deslizante y realizar una personalización más avanzada, continúe leyendo.

Opciones de Neato

Por supuesto, querrás algunas otras características como subtítulos HTML, navegación con viñetas (con miniaturas) y uso de contenido en lugar de imágenes. A continuación se explica cómo ponerlos en marcha.

Aquí están todos los parámetros del complemento y sus estados predeterminados. Las opciones están comentadas a la derecha. ¡Vuélvete loco!

$('#featured').orbit({  animation: 'fade',               // fade, horizontal-slide, vertical-slide, horizontal-push  animationSpeed: 800,             // how fast animations are  timer: true,                     // true or false to have the timer  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});

Subtítulos HTML completos

Orbit tiene subtítulos HTML completos , por lo que puede agregar estilos, enlaces, listas o cualquier otra cosa que desee su corazón de codificación.

1. Agregue un intervalo con la clase orbit-captiony una identificación de su elección después del control deslizante div. Coloque el HTML que desee que aparezca en el título del interior. Están a nivel de bloque, así que todo vale.
2. Agregue el ID de tramo que eligió al data-captionatributo de la etiqueta de imagen correspondiente.

Échale un vistazo:

div   img src="overflow.jpg" alt="Overflow: Hidden No More" /   img src="captions.jpg"  alt="HTML Captions" data-caption="#htmlCaption" /   img src="features.jpg" alt="and more features" //div!-- Captions for Orbit --spanI'm a badass caption/span

¿Quieres animar esos subtítulos? Simplemente cambie el captionAnimationparámetro ( fade, slideOpen, none).

Navegación con viñetas

Obtener una nueva navegación con viñetas es tan fácil como pasar un parámetro cuando llamas a la función Orbit. La navegación con viñetas es de forma nativa una lista desordenada, pero en el ejemplo y en el kit las hemos reemplazado con pequeñas y bonitas viñetas redondas. (Cambiar esto es solo cuestión de cambiar el CSS a lo que quieras).

script type="text/javascript"   $(window).load(function() {      $('#featured').orbit({         bullets: true      });   });/script

¡ Orbit ahora puede extraer miniaturas para tu navegación con viñetas! Primero, cree su miniatura y guárdela en algún lugar de su directorio de archivos. A continuación se muestra HTML, CSS y JavaScript para que funcione:

!-- THE MARKUP --div   img src="overflow.jpg" alt="Overflow: Hidden No More" /   img src="captions.jpg"  alt="HTML Captions" data-thumb="captions-thumb.jpg"/   img src="features.jpg" alt="and more features" //div// The JSscript type="text/javascript"$(window).load(function() {   $('#featured').orbit({      'bullets' : true,      'bulletThumbs': true,      'bulletThumbLocation': 'orbit/'   });});/script/* The CSS: Just provide a width and height for the thumb.All bullet navigation thumbs will have a class added "has-thumb"*/.orbit-bullets li.has-thumb {   width: 100px;   height: 75px; }

Usando texto

Orbit también es compatible con texto . Se puede mezclar con imágenes, pero solo asegúrese de que su texto esté en una divetiqueta y tenga algún tipo de fondo (de lo contrario, las imágenes detrás serán visibles). Para que el texto se vea bien, dale un fondo (para que otras imágenes en Orbit no sangren detrás de él). Simplemente colóquelo directamente en el marcado, de esta manera:

div   div      h1Orbit does content now./h1      h3Highlight me: I'm text./h3   /div   img src="overflow.jpg" alt="Overflow: Hidden No More" /   img src="captions.jpg"  alt="HTML Captions" /   img src="features.jpg" alt="and more features" //div

¿Usando sólo texto? Orbit se basa en el tamaño de las imágenes para obtener sus dimensiones. Sin embargo, puede simplemente ingresar al CSS de Orbit y buscar la .orbitdeclaración div y configurarla con el ancho y alto de píxel exacto que desee.

Hacer brillar la órbita

Orbit parece bastante razonable desde el primer momento (por así decirlo), pero lograr un pulido real requiere un par de tareas más: en particular, cargar antes de que aparezcan las imágenes y agregar correcciones para algunos navegadores menos afortunados (es decir, IE). .

Estado de carga glorioso y fluido

Para aquellos que buscan el máximo pulido, hemos facilitado la creación de un estado de carga simple para su control deslizante. Agregue la siguiente declaración en cualquier parte del CSS (simplemente reemplácela featuredcon el ID de su control deslizante y use los anchos y altos de sus propias imágenes):

#featured {      width: 940px;      height: 450px;      background: #000 url('orbit/loading.gif') no-repeat center center; overflow: hidden; }   #featured img,   #featured div { display: none; }

Aplique el CSS a su ID de control deslizante único, porque el complemento no conocerá el ID hasta que se cargue. Agregar este CSS evitará que cualquier contenido sin estilo parpadee antes de que el complemento termine de cargarse. Estos estilos están en el CSS de demostración del kit.

Posicionamiento no relativo

La forma en que funciona Orbit es que su contenedor es envuelto por otro contenedor. Esto significa que si está posicionando su control deslizante absoluteo desea centrarlo con margin: 0 auto, aplicarlos al ID de su control deslizante ( #featureden este ejemplo) no funcionará. La mejor manera de resolver esto es colocar todas las piezas de posicionamiento en su ID y div.orbit-wrapper.

#featured, div.orbit-wrapper {   position: absolute;   top: 50px;   left: 50px;}

Nota: También puede simplemente colocar el contenedor principal del control deslizante Orbit, si lo hay.

Como todos sabemos, IE no es el mejor amigo de un diseñador o desarrollador, pero intentaremos ponérselo fácil. A partir de la versión 1.1, Orbit funciona en IE7+ , pero debido a que las transformaciones CSS3 y RGBa no están disponibles, tenemos que hacer algo de magia para arreglar el fondo predeterminado del temporizador y los subtítulos. La forma más sencilla de solucionar estos problemas es ocultar el temporizador y utilizar la solución alfa patentada de Microsoft. Puede utilizar la siguiente declaración condicional en el encabezado de su documento.

!--[if IE]   style type="text/css"      .timer { display: none !important; }      div.caption { background:transparent;      filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);      zoom: 1; }   /style![endif]--

Órbita: control deslizante de imagen jQuery

Orbit te ayuda a hacer que tus imágenes se deslicen. Consulte nuestra demostración para ver el complemento en acción. Funciona mejor en Chrome, Safari, Firefox 3.5+ (pero está probado para IE 7+, Firefox 3.5+, Chrome y Safari).

Demo en vivo

Revelar: Modales jQuery simplificados

Puede crear hermosas ventanas modales en su página con nuestro complemento jQuery Reveal. Las ventanas modales permiten a los desarrolladores resaltar la información crítica. Configurar los modales Reveal requiere solo tres sencillos pasos. Adjunte los archivos necesarios, coloque el marcado modal y luego agregue un atributo a su botón.

Creamos Reveal porque no pudimos encontrar una solución sólida y simple. A menudo usábamos y reutilizábamos nuestros propios scripts para crear modales porque los complementos existentes eran demasiado pesados ​​(permitían la integración de Flash y cientos de cosas más) y no usaban CSS básico para crear código flexible y reutilizable. Creemos que hemos resuelto ambos problemas con Reveal.

Reveal es útil porque es fácil de implementar, compatible con navegadores modernos (con cierta degradación elegante, por supuesto) y liviano (solo pesa 1,75 KB). Lo que esto significa para ti es que es rápido, sexy y simplemente funciona.

¡Veamos cómo puedes hacer que Reveal funcione!

Paso 1: adjunte los archivos necesarios

/* Attach the Reveal CSS */link rel="stylesheet" href="reveal.css"/* jQuery needs to be attached */script src="jquery.min.js" type="text/javascript"/script/* Then just attach the Reveal plug-in */script src="jquery.reveal.js" type="text/javascript"/script

Claramente, necesita el kit Reveal (.zip) para hacer esto, así que descárguelo primero.

Paso 2: el margen modal

div   h1Modal Title/h1   pAny content could go in here./p   a×/a/div

Simplemente proporcione a su div modal la clase reveal-modaly una identificación única (usaremos la identificación para iniciar este modal). El ancla con la clase close-reveal-modalproporciona un botón para cerrar el modal (aunque de forma predeterminada, al hacer clic en el fondo negro descolorido también se cerrará el modal). Por lo general, lo mejor es colocar el marcado justo antes de la bodyetiqueta de cierre.

Paso 3: conecte su controlador

a href="#" data-reveal-id="myModal"Click Me For A Modal/a

Al colocar el data-reveal-idatributo en el ancla, el complemento, al hacer clic en él, hace coincidir el valor del data-reveal-idatributo (en este caso, myModal) con un elemento HTML con ese ID. Básicamente, coloque el data-reveal-idatributo en un objeto y haga que su valor sea el ID de su modal.

Si bien data-reveal-ides una excelente manera de facilitar la activación de un modal, a menudo será necesario activarla mediante programación. Eso también es bastante fácil:

/* Programmatic Launching Of Reveal */script type="text/javascript"$(document).ready(function() {   $('#myButton').click(function(e) {      e.preventDefault();      $('#myModal').reveal();   });});/script

Opciones

Los buenos complementos tienen opciones, y este tiene solo algunas, pero importantes:

$('#myModal').reveal({   animation: 'fadeAndPop',                 // fade, fadeAndPop, none   animationspeed: 300,                     // how fast animations are   closeonbackgroundclick: true,            // if you click background will modal close?   dismissmodalclass: 'close-reveal-modal'  // the class of a button or element that will close an open modal});

Si se pregunta cómo usar las opciones cuando usa la data-reveal-idimplementación, es fácil: simplemente tome la opción, agregue el data-valor anterior y pase un valor válido. Aquí está con los valores predeterminados:

a href="#" data-reveal-id="myModal"data-animation="fadeAndPop" data-animationspeed="300"data-closeonbackgroundclick="true" data-dismissmodalclass="close-reveal-modal"Click for a modal/a

Revelar: complemento modal jQuery

Sorprende a tus visitas con unas elegantes ventanas modales. Descargue nuestro complemento modal liviano y comience a mostrar cuadros de diálogo informativos y variados en sus páginas. Vea la demostración para ver este complemento en acción.

Demo en vivo

Bonificación: complemento Raptorize jQuery

Todos hemos pasado por eso: sentados en tu escritorio, codificando un sitio web grande, sumergidos hasta las rodillas en Extreme Cheddar Doritos , bebiendo un litro de Code Red Mountain Dew, cuando te das cuenta de que esta página sería...

Inmediatamente corres a casa para agarrar tus DVD de Jurassic Park, para poder capturar un ataque de velociraptor. Entonces te das cuenta de lo difícil que sería hacer que un ave rapaz recorra el sitio web que estás codificando. Además, ¿cómo conseguirás ese chillido distintivo del velociraptor? Te contaremos un pequeño secreto...

Ya lo hemos hecho.

Raptorize se creó porque había un meme circulando en la comunidad de diseño sobre poner velociraptores en diseños visuales, y pensamos que había un gran potencial para que eso viviera en código. ¡También queríamos jugar con algunas animaciones, etiquetas de audio HTML5 y el Código Konami!

Lo primero es lo primero: debes descargar el kit Raptorize. Tiene:

• Un impresionante gráfico de aves rapaces, cortesía de Raptorize ;
• Archivos de audio MP3 y OGG para audio HTML5 en Webkit y Firefox;
• Nuestro complemento jQuery, que hace que suceda la magia;
• La biblioteca jQuery, para que todas las piezas funcionen juntas;
• Un archivo HTML de muestra que tiene todas las piezas de configuración.

Primero, adjunte los scripts y active el complemento en el encabezado de su documento:

script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"/scriptscript!window.jQuery  document.write('script src="jquery-1.4.3.min.js"/script')/scriptscript src="jquery.raptorize.1.0.js"/scriptscript type="text/javascript"   $(window).load(function() {      $('.myButton').raptorize();   });/script

Lo único que debes saber aquí es que necesitas un ancla o elemento con la clase myButton.

Y ahí lo tienes. ¡Ya terminaste!

Las opciones

¿Qué es eso? ¿Quieres poder controlar el controlador de entrada? ¡Puede! Raptorize se puede activar con un evento de clic (que es el valor predeterminado), con un temporizador que se activa solo después de que se haya cargado la página o con el legendario Código Konami. Nuestro favorito personal es el Código Konami (pero solo funciona una vez por carga de página).

//The options for this plug-inscript type="text/javascript"   $(window).load(function() {      $('.button').raptorize({         'enterOn' : 'click', //timer, konami-code, click         'delayTime' : 5000 //time before raptor attacks on timer mode   });});/script

Adelante, prueba el Código Konami: ↑ ↑ ↓ ↓ ← → ← → BA .

Si no desea almacenar los archivos de imagen y sonido de Raptor en el mismo directorio que su JavaScript, simplemente abra el complemento y edite la ubicación de los recursos en las dos primeras variables del código ( raptorImageMarkupy raptorAudioMarkup).

Si bien lo maravilloso que es el complemento Raptorize es un código 100% original, la idea de incluir un raptor glorioso en un diseño no lo es. Le debemos crédito a Phil Coffman y Noah Stokes por los recursos de las aves rapaces y la brillantez de agregar una rapaz a un diseño.

Raptorize: complemento jQuery

¿Quieres revivir las gloriosas películas cinematográficas de acción y aventuras de dinosaurios de los 90 en las páginas de tu sitio web? Tenemos la solución para ti.

Demo en vivo "

Esperamos que estas nuevas y sabrosas delicias animen sus páginas y hagan que la experiencia sea más agradable para usted y sus visitantes.

Otras lecturas

• Obsequio: complemento jQuery Slider responsivo Flexslider
• Cómo migrar de jQuery a Next.js
• Genialidad de JavaScript: o cómo animar sin jQuery
• Reemplazo de jQuery con Vue.js: no es necesario ningún paso de compilación

(kw, señor)Explora más en

• Codificación
• javascript
• jQuery