Vegas: jQuery plugin para mostrar backgrounds a pantalla completa

Con Vegas podemos mostrar fondos que abarquen la pantalla completa del navegador, cuenta con múltiples opciones para personalizar y es muy fácil implementarlo como se muestra a continuación.

INSTALACIÓN

Lo primero es incluir los archivos javascript: jquery, query.vegas.js y la hoja de estilos: query.vegas.css


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
<script type="text/javascript" src="/vegas/jquery.vegas.js"> </script>
<link rel="stylesheet" type="text/css" href="/vegas/jquery.vegas.css" />

PUESTA EN MARCHA

Dentro de la etiqueta head colocamos el siguiente código para iniciarl el plugin

$(document).ready(function(){
    $.vegas('slideshow', {
        delay:5000,         // Indica el tiempo que se muestra una imagen
        backgrounds:[       // imagenes a mostrar
            { src:'http://lorempixel.com/1100/1000/nightlife/',fade:1000 },
            { src:'http://lorempixel.com/1100/1000/sports/',fade:1000 },
            { src:'http://lorempixel.com/1100/1000/nature/',fade:1000 }
        ]
    })('overlay', {
        src:'imagenes/01.png' // Imagen que se superpone sobre las imágenes de fondo
    });
});

Listo con eso ya funciona el slideshow mostrando las imágenes ocupando todo el ancho y alto del navegador, pero eso no es todo también se puede trabajar con algunos eventos como anterior, siguiente, pausa, etc. Veamos un ejemplo de como podemos agregar controles de navegación para el slideshow.

Vamos a comenzar con el código html que va a mostrar los botones anterior, pausa, reproducir y siguiente, le asignamos a cada control un id y la clase control-slides para los estilos CSS

<div class="navegacion-slider">
    <img id="prev-slide" class="control-slides" src="imagenes/prev.png"/>
    <img id="pause-slide" class="control-slides" src="imagenes/pause.png"/>
    <img id="play-slide" class="control-slides" src="imagenes/play.png"/>
    <img id="next-slide" class="control-slides" src="imagenes/next.png"/>
</div>

Ahora procedemos a agregar el código javascript dentro de $(document).ready()


    $("#play-slide").hide(); //Oculta el control play al cargarse la pagina

    //A cada control se le agrega el evento click
    $("#prev-slide").click(function(){
        $.vegas('previous'); // llama al slide anterior
    });
    $("#next-slide").click(function(){
        $.vegas('next'); // llama al siguiente slide
    });
    $("#pause-slide").click(function(){
        $.vegas('pause');         // detiene la reproduccion
        $("#play-slide").show();  // Muestra el control play
        $("#pause-slide").hide(); // Oculta el control pausa
    });
    $("#play-slide").click(function(){
        $.vegas( 'slideshow' );   // Inicia la reproduccion
        $("#play-slide").hide();  // Oculta el control play
       $("#pause-slide").show();  // Muestra el control pausa
    });

Ahora escribimos el css para los controles, se pueden colocar dentro de <head> utilizando la etiqueta <style>

.navegacion-slider{
    position:fixed;
    top:10px;
    right:10px;
}
 .control-slides{
    margin:5px;
    cursor:pointer;
}

Con eso termina este post, para más información puedes visitar el sitio de este plugin donde encontraras la documentación completa.
demo

5 comentarios en “Vegas: jQuery plugin para mostrar backgrounds a pantalla completa”

  1. Pilar dice:

    Hola tengo un problema implementando este slide , el error dice que $.vegas no es una función

  2. Luis angel dice:

    Hola muy buena publicación, solo tengo una duda si quiero ponerlo dividido en secciones, por ejemplo adentro de un div especifico se puede?

  3. david dice:

    y como hago para pararlo en dispositivos moviles? espero me ayuden

    1. sun2012 dice:

      utiliza los media query para el tamaño de los fondos y las cajas, o utiliza la versión más reciente del plugin http://vegas.jaysalvat.com/ saludos

  4. Pablo dice:

    y si en vez de poner en esta parte backgrounds:[ // imagenes a mostrar
    { src:’http://lorempixel.com/1100/1000/nightlife/’,fade:1000 },
    { src:’http://lorempixel.com/1100/1000/sports/’,fade:1000 },
    { src:’http://lorempixel.com/1100/1000/nature/’,fade:1000 }
    ]

    las imagenes quisiera llamarle desde una lista de html como le puedo hacer dame una mano

Deja un comentario