1.¿En que esta hecha?
Basada en Javascript y en Css, esta herramienta es bastante elegante para mostrar fotográfias. Por supuesto que todo depende de los gustos, pero siempre puedes tener estas herramientas para implementarlas en tu web, con tan solo incluir en el pocos archivos, con un efecto que seguro, gustará.
2. Como lo Implemento en mi Página
Paso 1. Descargar los archivos:
Descargar el archivo desde Aqui
Paso 2. Guardar Archivos en Tu directorio:
Luego de descargarlo, lo descomprimimos y tendras 3 carpetas (css,images,js) y 2 archivos (index.html,zoomy.js). Esos archivos colocalos dentro de la carpeta donde tienes las demas páginas que conforman tu Proyecto Web. En la carpeta images es el sitio donde guardaras las imagenes que quieras que se muestren en tu pagina.
Paso 3. Incluir archivos css y js en tu archivo HTML o PHP
Bien este es un paso muy importante, lo primero que haras es insertar las siguientes lineas de codigo entre las etiquetas <head> </head>
<script src="js/protoculous.js" type="text/javascript"></script>
<script src="zoomy.js" type="text/javascript"></script>
<script type="text/javascript">
Event.observe(window,"load",function() {
$$("ul.zoomy a").each(function(element){
new Zoomy(element, { hideCaption: true });
});
$$("ul.zoomy2 a").each(function(element){
new Zoomy(element, { draggable: true });
});
});
</script>
Bien luego lo que nos queda es colocar las fotos que queremos que se maximicen, cuando el usuario le de click. Hay 2 formas, El simple y el Arrastrable
Simple
<ul class="zoomy">
<li><a href="#" style="background-image: url(images/rubix_cube.jpg)" title="Cuboooo">Rubix Cube</a></li>
<li><a href="#" style="background-image: url(images/frogs.jpg)" title="Ranas!">Frogs</a></li>
<li><a href="#" style="background-image: url(images/dice.jpg)" title="Dice" >Dice</a></li>
<li><a href="#" style="background-image: url(images/prototype.jpg)" title="Prototype Framework" >Prototype Framework</a></li>
</ul>
Bien la forma en que funciona es colocando una lista <ul class="zoomy">, y colocas la ruta de la imagen que quieres que se maximice en la siguiente propiedad style="background-image: url(images/frogs.jpg)"
de este modo, colocando la etiqueta <li> agregas todas las fotos que quieras.
Arrastable
<ul class="zoomy2">
<li><a href="http://www.google.com" style="background-image: url(images/rubix_cube.jpg)" title="Cubo n1">Otro cubo</a></li>
<li><a href="http://www.yahoo.com" style="background-image: url(images/frogs.jpg)" title="Frogs">Frogs</a></li>
<li><a href="http://www.javierpadron.blogspot.com" style="background-image: url(images/dice.jpg)" title="Javier Padron " >Dice</a></li>+
<li><a href="http://prototypejs.org" style="background-image: url(images/prototype.jpg)" title="Prototype Framework" >Prototype Framework</a></li>
</ul>
Este modo funciona igual al otro, con la diferencia que en la etiqueta ul debes colocar cambia solo un detalle <ul class="zoomy2">, que es que ahora el class="zoomy2".
Disfrutenlo