Actualmente en Internet podemos encontrar un sinfín de plugins jQuery a cada cual más interesante o útil. Es por esto que actualmente cualquier desarrollador web tiene que ser capaz de usar cualquier plugin a su merced. En éste tutorial vamos a explicar como usar el plugin PrettyPhoto aprovechando para repasar las claves para ser capaz de usar cualquier otro plugin basado  en ésta maravillosa librería javascript.

Toda la información que damos puede ser extraída de la pagina del autor del plugin, tan solo destacamos aquello que normalmente se da por supuesto y que a fin de cuentas, nos puede llevar a tener mas dolores de cabeza de los que deseariamos.

El plugin que vamos a usar de ejemplo sirve para mostrar de una forma seria pero innovadora contenidos. Permite mostrar tanto imágenes como marcos (iframes), videos, etc.

Carga de ficheros

Se da por supuesto que se han descargado los ficheros de jQuery (jQuery Download) y se habran subido a nuestro servidor.

Seguidamente deberemos bajarnos el plugin a usar des de la pagina del autor ( prettyphoto ). Como podremos comprobar, el paquete descargao incluye un fichero ‘index.html’ un ‘README’ y tres carpetas: js, css y images. Si nosotros abrimos el fichero index.html des de un navegador web, podremos ver un ejemplo de los distintos usos de este plugin y por consiguiente, tenemos a nuestra disposición un fantástico ejemplo de como usar el plugin, algo que acostumbran a llevar la mayoria de los plugins y algo interesante y a tener en cuenta.

Los ficheros que hay que subir a nuestro servidor son los ficheros que componen el plugin, los .css y .js ( en la carpeta js y css, correspondientemente). A pesar de que en el plugin se encuentren en estas carpetas no quiere decir que sea estrictamente necesario subirlos en las mismas carpetas, pues los podemos subir allí donde nos vayan bien para la estructura de nuestro proyecto.

Hay que tener en cuenta que los estilos que estamos subiendo requieren de imagenes que se encuentran en la carpeta images. Si es posible no distorsionar la estructura predefinida en el plugin, no sera necesario modificar el fichero ‘prettyPhoto.css’. Si, en cambio, ponemos éstas imagenes en carpetas distintas, deberemos modificarlo para que apunte a la direccion que deseamos. Para ello debemos buscar toda referencia a ficheros externos y modificar la dirección de las imagenes por aquella que a nosotros nos vaya bien. Lineas como:

background: url(../images/prettyPhoto/light_rounded/loader.gif)

Deberan ser modificadas para qeu apunten a nuestra dirección.

Una vez subidos los ficheros necesarios para el correcto funcionamiento, hay que cargarlos en nuestra pagina. Primero debemos cargar la libreria jQuer, y seguidamente los estilos y los ficheros javascript del plugin. Debe quedar algom como:

<script src="tutoriales/t007/js/jquery-1.4.2.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="tutoriales/t007/css/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" />
<script src="tutoriales/t007/js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>

Hay que tener en cuenta que el orden de la carga de fichersos es importante. Esto es debido a que cada libreria javascript carga un conjunto de objetos que son usados por otros ficheros .js. De esta forma, la primera libreria en cargar siempre es la libreria de mas bajo nivel (en este caso jQuer) luego los css de los plugins y finalmente, los javascripts de los plugins que usan las funciones de jQuery para funcionar.

Construccion de la muestra de contenidos:

Seguidamente deberemos mostrar los contenidos como nosotros deseamos, en nuestro caso hemos elegido mostrar un listado de imagenes las cuales, en cuanto se clicke sobre ellas, se muestra una imagen mas grande con el efecto que proporciona PrettyPhoto.

Algunos de los plugins permiten montar nuestra estructura de pagina de formas muy distintas. Estas posibilidades se acostumbran a poder ver en la pagina de documentacion del autor, o en los ejeemplos que incluyen los mismos. En nuestro caso hemos elegido mostrarlo en una lista de links a aquel contenido que sera mostrado con el efecto PrettyPhoto. Además hemos elegido euqe el enlace contenga la imagen en un tamaño mas pequeño.

<ul class="gallery galeriaDeImagenes">
  <li>
    <a href="ruta-de-la-imagen-1.jpg" class="PRETTYPIXELIZAR" rel="pixelizar[galeria1]" title="El titulo de la imagen se puede usar para mostrar textos en la imagen.">
      <img src="ruta-de-la-imagen-1_THUMB.jpg" width="60" height="60" alt="Texto alternativo" />
    </a>
  </li>
  <li>
    <a href="ruta-de-la-imagen-2.jpg" class="PRETTYPIXELIZAR" rel="pixelizar[galeria1]">
      <img src="ruta-de-la-imagen-2_THUMB.JPG" width="60" height="60" alt="Texto alternativo" />
    </a>
  </li>
  <li>
    <a href="ruta-de-la-imagen-3.jpg" class="PRETTYPIXELIZAR" rel="pixelizar[galeria1]">
      <img src="ruta-de-la-imagen-3_THUMB.JPG" width="60" height="60" alt="Texto alternativo" />
    </a>
  </li>
  <li>
    <a href="ruta-de-la-imagen-4.jpg" class="PRETTYPIXELIZAR" rel="pixelizar[galeria1]">
      <img src="ruta-de-la-imagen-4_THUMB.jpg" width="60" height="60" alt="Texto alternativo" />
    </a>
  </li>
  <li>
    <a href="ruta-de-la-imagen-5.jpg" class="PRETTYPIXELIZAR" rel="pixelizar[galeria1]" title="Titulo de la imagen">
      <img src="ruta-de-la-imagen-5_THUMB.jpg" width="60" height="60" alt="Texto alternativo" />
    </a>
  </li>
</ul>

Como ya hemos mencionado, esta estructura no es estricta, sino todo lo contrario, pordemos componer nuestra pagina de distintas formas, tansolo tenemos que ser capaces de seleccionar los elementos que intervienen mediante javascript, tal y como se explica a continuación.

Uso del plugin

La libreria jQuery es una libreria javascript, de forma que los plugins basados en ella también los son. Todos ellos, una vez tienen cargados los ficheros necesarios para su correcto funcionamiento y se han dispuesto los elementos de la pagina correctamente, deberan ser inicializados con las llamadas correspondientes al plugin.

		<script type="text/javascript" charset="utf-8">
		$(document).ready(function(){
			$(".gallery a[class='PRETTYPIXELIZAR']").prettyPhoto({theme:'facebook'});
		});
		</script>

Estas inicializaciones se rigen por unas caracteristicas muy habituales en las inicilizaciones de plugins:

una vez se ha cargado toda la pagina y los elementos que al componen:

$(document).ready(function(){

, se lanza un comando jQuery que, para todos aquellos elementos con clase “PRETTYPIXELIZAR” aplica la función PrettyPhoto.

$(".gallery a[class='PRETTYPIXELIZAR']").prettyPhoto({theme:'facebook'});

Con tansolo este comando, estamos lanzando el PrettyPhoto, con todo lo que conlleva, y paginando los contenidos que muestr con todos los elementos que dicha clase. Esto es posible al potencial modular de jQuery, y al poder de los selectores jQuery, Información que podréis encontrar en jQuery Selectors. En este caso estamos seleccionando los enlaces (a) que se encuentren dentro de los objetos con la clase ‘galery’ y que tengan por clase ‘PRETTYPIXELIZAR’.

Como podemos ver, a la función prettyPhoto, se le pasa por “parámetro” theme:’facebook’. Qué es esto? Es parte de la configuración posible de éste plugin.

Configuración de plugins.

La gran mayoria de plugins jQuery permiten cierto grado de configuración. Ésta información la encontraremos nuevamente en la página del autor, en el apartado de documentación. La configuración normalmente consiste en ‘atributos’ del objeto javascript que estamos construyendo con la comanda de inicialización, que inicializamos a nuestro gusto. Si nos fijamos con el código mostrado por el autor, hay un enorme listado de atributos a configurar, algunos tan simples como la opacidad del fondo, los tamaños por defecto, etc. y algunos tan complejos y útiles como la función de retorno que será ejecutada una vez se cierre el diálogo.

Siempre, en todos los casos. Lo mas importante y productivo, es mirar la pagina del autor para encontrar ejemplos de uso del plugin que pretendemos usar.

El ejemplo que os mostramos lo podeis encontrar aquí.

Etiquetas: galeria · galeria de imagenes · galeria jquery · instalar plugin jquery · javascript · jQuery · lightbox jquery · plugins jquery · PrettyPhoto