Archivo de la etiqueta: Background

Jquery

Fondos a pantalla completa con JQuery y el plugin Backstrecht

jquery
Mi idea original era usar CSS, con algún hack para Internet Explorer, sin embargo, al buscar en la web
encontré un plugin de JQuery, que hacía exactamente lo que necesitaba, esto es, poner un fondo a pantalla completa en todos los navegadores (Internet Explorer incluido) y escalar este fondo dinamicamente según se necesite.

El plugin en cuestion se llama Backstrecht y se puede descargar aqui:

http://srobbin.com/jquery-plugins/backstretch/

Tras descargarlo, seguiremos los siguientes pasos para agregarlo a nuestro proyecto web:

 
 

1.- Copiar el plugin al árbol de directorios del proyecto.

 

Al descomprimir el fichero zip que nos hemos descargado, encontraremos un par de ficheros llamados:

  • jquery.backstretch.min.js: Versíón de producción del plugin.
  • jquery.backstretch.js: Versón de desarrollo del plugin.

Ambos ficheros contienen idéntica funcionalidad. Sin embargo la versión terminada en .min.js, se ha comprimido (eliminando saltos de linea y renombrando variables) para optimizar su tamaño y de esta forma optimizar el ancho de banda en entornos de producción.

Si por el contrario deseamos modificar la funcionalidad del plugin, deberemos descargarnos la versión estándar, ya que la versión de producción sería muy complicada de modificar y depurar.

Sea cual sea la versión que decidamos usar, deberemos copiar el fichero .js al arbol de directorios de nuestro proyecto. Típicamente, al directorio js o javascript del proyecto.

 
 

2.- Cargar el plugin en la cabecera de la página

 

El siguiente paso será cargar el plugin en la sección HEAD de nuestro documento HTML. Puesto que se trata de un plugin de la biblioteca javascript JQuery, debemos tener cuidado en nuestro documento HTML de cargar primero dicha biblioteca, ya que Backstrecht depende de las funciones definidas en JQuery para realizar su labor.

Con esto en mente, la cabecera de nuestra página quedaría de forma similar al siguiente fragmento de código:

[sourcecode language=»HTML» gutter=»false» wraplines=»false»]
….. …..
<!– Bibliotecas Javascript –>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
….. …..
<script type="text/javascript" src="js/jquery.backstretch.min.js"></script>
….. …..
[/sourcecode]

 
 

3.- Llamar al plugin cuando el documento termine de cargarse.

 

Por último, llamaremos al plugin, para que coloque el fondo de página que deseemos. Para ello podemos colocar la llamada en un script al final del cuerpo de la etiqueta body o bien usar la expresión de JQuery:
[sourcecode language=»JAVASCRIPT» gutter=»false» wraplines=»false»]
$(document).ready(function() {});
[/sourcecode]
Usando esta ultima expresión, la funcion $(document).ready() quedaria definida de la siguiente manera:

[sourcecode language=»JAVASCRIPT» gutter=»false» wraplines=»false»]
$(document).ready(function() {
$.backstretch("./img/nombre_fondo.png");
});
[/sourcecode]