Primeramente, bajamos fancyBox desde aquí o desde su página web oficial:

• fancyBox-v2.0.4.zip

Una vez que lo tengáis descargado, lo primero que tenéis que hacer es incluir la función dentro de nuestro sitio web:

<script type="text/javascript" src="../js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../js/jquery.fancybox.pack.js"></script>
<link rel="stylesheet" type="text/css" href="../js/jquery.fancybox.css" />

Incluimos los Javascript de jQuery y fancyBox y el CSS de fancyBox.

Para hacerlo funcionar solo tenemos que especificarle un "id" o "class" a nuestros enlaces para después ejecutar fancyBox sobre ese "id" o "class".

En este caso hemos utilizado el enlace con clase (class="ejemplo_1") sobre una imagen que vamos a ampliar. Mostramos la imagen en pequeño (foto1p.jpg) y obviamente vamos a ampliar la imagen (foto1.jpg) que fancyBox coge automáticamente del "href" del enlace:

<a class="ejemplo_1" href="../img/foto1.jpg" title="Imagen simple"><img src="../img/foto1p.jpg" width="200" height="150" /></a>

Ahora vamos a ejecutar la función fancyBox sobre el enlace con este sencillo código:

<script type="text/javascript">
$(document).ready(function(){
	$(".ejemplo_1").fancybox({ });
});
</script>

Recordaros que fancyBox es prácticamente 100% personalizable, en su web oficial encontrareis toda la documentación necesaria para realizar cambios de aspeto, funcionamiento, etc.

En este otro ejemplo vamos a abrir una página web externa en HTML, primero preparamos el enlace:

<a class="ejemplo_4" href="ejemplo.html">Abrir página web externa - ejemplo.html</a>

Como es lógico, la página que se abrirá dentro del fancyBox la coge del "href" del enlace.

Y aquí tenemos el código Javascript que abrirá la página web externa:

<script type="text/javascript">
$(document).ready(function(){
	$(".ejemplo_4").fancybox({
		'autoScale'		: false,
		'transitionIn'		: 'none',
		'transitionOut'		: 'none',
		'width'			: 680,
		'height'		: 450,
		'type'			: 'iframe'
	});
});
</script>

En el código le especificamos que es un "iframe", que el ancho de la ventana es 680 pixeles y la altura son 450 pixeles.

Los parámetros que le hemos especificado son en Inglés, pero se entiende bastante bien para que sirven.

Como os comentaba antes, recordar que es 100% personalizable y tenéis toda la documentación en su web oficial.

Aquí os dejamos unos ejemplos interactivos de su funcionamiento.

• Ejemplo

Por lo general, la mayoría de los artículos se basan en funciones de jQuery, en los que explicamos su funcionamiento con ejemplos. Para que poco a poco vayáis creando vuestras propias funciones y vuestros propios Scripts en jQuery.

En este caso, vamos a hacer una excepción, y os vamos a enseñar una función en jQuery desarrollada por Ivan Lazarevic, para realizar transiciones de imágenes con un resultado realmente espectacular.

Podéis descargarlo de su web oficial, o bien desde aquí:

• Descargar
• workshop.rs

Una vez que lo tengáis descargado, lo primero que tenéis que hacer es incluir la función dentro de nuestro sitio web:

<script type="text/javascript" src="../js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../js/coin-slider.min.js"></script>
<link rel="stylesheet" type="text/css" href="../js/coin-slider-styles.css" />

Incluimos los Javascript de jQuery y Coin Slider y el CSS de Coin Slider.

Para hacerlo funcionar solo tenemos que meter todas las imágenes que queramos dentro de una tabla o una capa y especificarle un "id" para después ejecutar Coin Slider sobre ese "id".

En este caso, hemos utilizado una capa con id (id="animacion"):

<div class="animacion" id="animacion"></div>

Y hemos incluido estas imágenes:

<div class="animacion" id="animacion">
<img src="../img/foto1.jpg" width="600" height="450" />
<img src="../img/foto2.jpg" width="600" height="450" />
<img src="../img/foto3.jpg" width="600" height="450" />
<img src="../img/foto4.jpg" width="600" height="450" />
<img src="../img/foto5.jpg" width="600" height="450" />
</div>

Aunque no es imprescindible, es mejor que las imágenes estén ocultas (style="display:none;") y Coin Slider se encargará de mostrarlas.

Y para terminar, tenéis que ejecutar la función Coin Slider sobre la capa:

<script type="text/javascript">
$(document).ready(function(){
	$('#animacion').coinslider();
});
</script>

Aquí tenéis un ejemplo básico de como funciona Coin Slider en jQuery:

• Ejemplo

Os pongo un ejemplo:

$('#campo_select_append').append('<option value="opcion_nueva_1" selected="selected">Opción nueva 1</option>');

El el campo select con nombre / id "#campo_select_append" agregamos la opción con texto ("Opción nueva 1") y valor (value="opcion_nueva_1")

Podemos personalizarlo como todo lo que queramos, como si fuera HTML. Como en este caso, que además lo hemos marcado como seleccionado (selected="selected")

Ahora que ya sabemos como agregar opciones, vamos a ver como podemos eliminarlas.

Para eliminarlas utilizaremos las funciones find() y remove() de jQuery.

Con find() buscamos la opción que queremos eliminar, especificando su valor ("value=""), la seleccionamos y luego con find() la eliminamos.

Os pongo un ejemplo:

$("#campo_select_remove").find("option[value='opcion_1']").remove();

Buscamos dentro del select con nombre / id "#campo_select_remove" la opción con valor (value='opcion_1') y lo eliminamos.

Para terminar os dejamos unos ejemplos interactivos:

• Ejemplos

Para eliminar elementos y contenidos podemos utilizar la función remove()

En el siguiente ejemplo, borramos el elemento con la clase "elemento_1":

$('.elemento_1').remove();

Es básicamente muy simple, solo tenemos que especificar la clase o el id que lo identifica de los demás:

$('#elemento_1').remove();

En este caso lo haríamos con el "id" que lo identifica los demás.

En el caso anterior de utilizar la clase, si algún elemento más tiene la misma clase, lógicamente borraríamos todos los elementos con esa clase.

Aunque es muy simple, os añadimos unos ejemplos más:

• Ejemplos

La ventaja y/o utilidad de estas funciones es añadir contenidos en tiempo real, una vez que ya se ha cargado completamente nuestro sitio web.

La función append() añade el contenido al final del elemento/capa que nosotros le especifiquemos.

En cambio la función prepend() funciona exactamente igual, pero el contenido se añade al principio del elemento/capa que nosotros le especifiquemos. Ejemplo:

$('.capa1').append("Actualidad jQuery");

En el ejemplo, añadimos el texto "Actualidad jQuery" dentro de la capa con la clase "capa1", al final.

Al igual que hemos añadido un texto, podríamos añadir código HTML, una imagen, etc.

Y la función prepend() funcionaría igual, como vemos en el ejemplo:

$('.capa1').prepend("Actualidad jQuery");

Añadimos el texto "Actualidad jQuery" dentro de la capa con la clase "capa1", pero al principio.

Para terminar de entenderlo mejor, aquí tenéis varios ejemplos interactivos con las 2 funciones.

• Ejemplo