Espacio Daycry - Espacio de programación

Este plugin es realmente útil para generar animaciones en las transiciones de las imágenes dentro de un contenedor.

El plugin se puede descargar desde el siguiente link:
http://workshop.rs/projects/coin-slider/

Para integrarlo en nuestra página web es realmente sencillo:

Añadimos las referencias de nuestros ficheros en el HTML

<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" />

Seguidamente creamos un contenedor que contendrá todas las imágenes que quedamos añadir al slider.

<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.

Como último paso habrá que aplicar al contenedor "animacion" el plugin.

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

Fancy Box una librería js con el que podemos abrir imágenes, páginas web, vídeos, o lo que se nos ocurra, de forma muy elegante, en ventanas tipo Popup, con jQuery.
Esta librería la podemos descargar desde la siguiente página web: Enlace

<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" />

<!-- Para disponer de nuevas transiciones -->
<script type="text/javascript" src="/fancybox/jquery.easing-1.4.pack.js"></script>

<!-- Para navegar entre los elementos de la galería-->
<script type="text/javascript" src="/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>

<!-- css -->
<link href="/fancybox/jquery.fancybox-1.3.4.css" media="screen" rel="stylesheet" type="text/css"></link>

Para hacerlo funcionar solo tenemos que indicar un "id" o "class" a nuestros enlaces para aplicar la librería fancy Box sobre estos elementos.

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

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

Ahora aplicamos la librería fancy Box a la clase que hemos creado.

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

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

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

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

En la página web existe mucha documentación sobre como personalizar la librería según nuestras necesidades, ya que es personalizable al 100% de forma sencilla