Background tipo Slider con Views y jQuery

Ésta vez vamos a crear un background con movimiento con efecto tipo slider. Para este ejemplo es para Drupal y debemos tener instalados los siguientes módulos: CCK, Views, Views Slideshow. Paso 1.- Creamos un tipo de contenido con CCK que se llame: "Slidehome", un campo de tipo imagen que se llame "Imagen slide home" y eliminamos el campo "body". Paso 2.- Agregamos 3 contenidos de tipo "Slidehome" y a cada uno se le adjunta una imagen, para efectos de este ejemplo el tamaño es de 1900px de ancho por 770px de alto. Paso 3.- Construimos una vista con el nombre: "Slideshow home", definimos un bloque con el nombre "Slideshow". Agregamos los siguientes parámetros: Format: Slideshow. Fields: Content: Imagen slide home Filter Criteria: Content: Published (Yes), Content: Type (= Slidehome) Paso 4.- Asignamos el Bloque creado por la vista a una región de nuestro sitio, de preferencia que sea en el header y que el contenedor tenga el id="background". Ejemplo utilizando ninesixty, agregando la región al archivo ninesixty.info: regions[slideshow] = Slideshow Home Y al inicio del archivo page.tpl.php agregamos:
Paso 5.- Creamos una carpeta llamada "js" dentro de nuestro tema y dentro de ésta agregamos un archivo con el nombre "scripts.js" y lo habilitamos en el archivo ninesixty.info de la siguiente forma: scripts[] = js/scripts.js Paso 6.- Agregamos las siguientes líneas de código Javascript al archivo scripts.js: jQuery(document).ready(function () { jQuery(window).resize(function () { jQuery('#background').css({ display: 'inline', left: ((1900 - jQuery('#background').width()) / 2) * -1, //el ancho se divide entre 2 y se convierte en negativo. height: 770, overflow: 'hidden', //oculta las barras de desplazamiento position: 'absolute', right: 0, top: 0, 'z-index': -1 //para que todo lo demás aparezca por "encima". }); }); jQuery(window).resize(); }); Obviamente los elementos que van "debajo", que en realidad sería el contenido del sitio, se le tendría que aplicar css, en cuanto a posición se refiere para que queden acomodados y como en ésta parte seria muy variable, dependemos mucho del diseño, no tocaremos ese tema. Paso 7.- Limpiamos todas las cachés y ejecutamos. Podemos ver el ejemplo en funcionamiento Aquí