Una de las mejores librerías en javascript que e visto hasta hoy, de las muchas que existen. Ya hemos tratado aquí varias diferentes, ¿cual es el punto especial de LightWindow?. Pues son varios pero sobre todo destacan 3: Que ha sido testeada en FireFox, IE6, IE7, Safari3 y Opera corriendo bajo Windows así como en FireFox, Safari, Opera y Netscape corriendo bajo Mac. La multitud de cosas que podemos mostrar con sus diálogos: imágenes (una o varias), swf, páginas externas, páginas alojadas en nuestro servidor, formularios etc etc. Y finalmente la simplicidad de instalación (esto siempre relativo que depende de los conocimientos del que lo quiera usar).
Para mostrar un poco su funcionamiento y lo que se puede hacer con esta librería vamos a ver como implementar 4 acciones: Abrir una página de Internet en un dialogo, mostrar un .html, cargar una imagen y cargar varias imágenes.
*Para seguir los ejemplos que ...
Hace unos días los de IBM, en su sección dedicada a los desarrolladores, publicaban un post donde explicaban varios efectos diferentes hechos en AJAX de los que se llevan tanto ahora. Están basados en las librerías estrellas de javascript como scriptaculous o prototype juntando 5 técnicas en total. Todos los ejemplos los tenemos recopilados en un .rar, con las librerías que usan, código html y css. Vamos a ver como implementar dos de ellos, uno para mostrar información al pasar el ratón por encima de un enlace y otro para mostrar texto en un cuadro superpuesto al picar sobre determinado lugar.
Antes de nada nos descargamos el pack donde vienen todos los ejemplos con sus códigos correspondientes.
Mostrando información al pasar el ratón (tooltips) – DEMO
Hacemos una nueva carpeta y le ponemos el nombre Popup. Dentro hacemos otra con el nombre js. Metemos dentro de esta última las librerías prototype.js y ...
Con esta librería podremos hacer webs o portafolios dándoles un bonito efecto de slide entre sección y sección. Está basado en prototype y scriptaculous y es bastante simple de entender como funciona, para implementarla primero descargamos el .rar dentro del cual se encuentra un ejemplo de cómo funciona, con el código html, css y las tres librerías necesarias. Aquí tenéis una demo.
Para ponerlo en funcionamiento primero llamaremos a las tres librerías y la hoja de estilos:
[html]
[/html]
Luego creamos la estructura html entre body /body:
[html]
Section 1 |
Section 2 |
Section 3 |
Section 4 |
Section 1
You can put any kind of HTML in here:
Section 2
Style the sections however you want
Section 3
I-frames? Yes, but only if scrollbars are hidden:
Section 4
Flash? Sort-of works:
Previous | Next
var my_glider = new Glider('my-glider', {duration:0.5});
[/html]
Y la estructura de la hoja de estilos:
[css]
div.scroller {
width: 635px;
height: 300px;
overflow: hidden;
border:1px solid #cccccc;
}
div.scroller div.section {
width:635px;
height:300px;
overflow:hidden;
float:left;
padding:1em;
}
div.scroller div.content {
width: 10000px;
}
[/css]
Si quisiéramos cambiar el tamaño del cajon modificamos div.scroller, ...
Con Pamoorama podrás mostrar tus fotografías de la mejor manera posible, en 360 grados y de una forma muy simple. Funciona aprovechando mootools y no es necesario css, solamente algo de html. Vamos a ver como implementarlo. Aquí tenéis la demo que yo e hecho para que veáis como queda.
1.- Lo primero descargamos Pamoorama0.3 y mootools.
2.- Creamos una carpeta que llamaremos pamoorama, dentro de la cual hacemos otra con nombre js. Metemos en esta última las dos librerías javascript que hemos descargado y en pamoorama la imagen que queramos usar para la vista en 360 grados.
3.- Creamos un archivo html con el siguiente código que veis debajo, y lo guardamos con el nombre que queramos y extensión .html dentro de la carpeta pamoorama.
[html]
window.addEvent('load', init);
function init() {
var myPamoo = new pamoorama('pamoorama1', {activateSlider: false, width: 650, footercolor:"#ff7100", captioncolor:"#8fb50d", caption: "diarioTHC", autoscrollSpeed:90000, enableAutoscroll: true, autoscrollOnLoad:true});
}
[/html]
Explicando cada parte del código:
Primero de todo llamamos ...
Se llama 13Styles y están centrados exclusivamente en la creación de menús hechos en css/xhtml para que luego nos los podamos descargar. Ahora mismo cuenta con 11 menús diferentes, todos muy simples de implementar y bastante resultones. Vemos una miniatura de cada uno de ellos, cuando nos hayamos decidido por cual, picaremos sobre él y nos saltará una nueva pestaña con toda la información del menú (peso, archivos del paquete, condiciones de uso). En el archivo que descargamos nos viene el .html, la hoja de estilos, las imágenes e incluso un archivo en photoshop con todos los botones, barras, etc totalmente configurable.
Enlace: 13styeles.com ...
Desde CSSplay proporcionan otros 10 menús más, hechos en css/xhtml y todos con un diseño en común, un aspecto profesional, con características de lo que se lleva ahora, reflejos, esquinas redondeadas etc. Veremos un ejemplo de cada uno de ellos en acción para decidirnos mejor por cual nos gusta más o interesa y los podremos descargar cada uno comprimido, con sus imágenes y códigos correspondientes.
Enlace: Professional horizontal ...
Como lo escuchas, en CSS Menu Maker no solamente nos proporcionan menús decentes en CSS/XHTML sino que también han sacado un concurso con el que podemos ganar un iPhone. Empecemos por el principio.
CSS Menu Maker es un servicio que nos ofrece la obtención de unos cuantos menús en css/xhtml, clasificados en horizontales y verticales. Podemos descarga los códigos e imágenes directamente, pero también podemos entrar en la opción “Customize” de cada uno de los menús para adaptarlos a nuestras necesidades. Primero indicamos el numero de botones que queremos, luego el texto que aparecerá en cada uno de ellos y el link donde apuntarán y finalmente tendremos nuestro menú listo para descargar completo, solamente las imágenes o usar el código CSS y HTML que nos aparecerá en esta ultima página. También veremos una “premilitar” del aspecto que tiene el menú que hemos generado en la parte superior de esta ultima página ...
Recopilatorio desde CSS-Tricks con varios de sus códigos hechos en css, html para obtener varios fines diferentes: Un menú estilo MAC, un theme, como hacer un marco especial para videos de youtube embebidos en nuestro sitio… Así hasta 10 ejemplos con los que hacer diferentes cosas, de los que tenemos el código para descargar y poder trastear con él así como la visión del ejemplo que se trate en plena acción.
Enlace: Ten Free Downloadable Examples ...
