Facebook sliders mediante Mootools

ByLuis

Facebook pone a disposición de sus usuarios unos sliders para poder controlar el valor de ciertos elementos. Para aquellos que estén interesados en usarlos, podrán echar mano de este ejemplo realizado con Mootools, cuyo uso es muy sencillo.
facebook_sliders.png
Hay que tener en cuenta que no es un script accesible, porque no existe una alternativa estándar al control, ya que el slider es una capa y si no hay javascript o entorno gráfico, el valor no se podría cambiar. El script es bueno y añadirle la parte de accesibilidad no implica mucha complicación.
Facebook Sliders With Mootools and CSS
Vía / CSS Globe

Similar Posts

Librerías Javascript para mostrar información de imagenes y añadir efectos

ByLuis

Dos interesantes y currados scripts que te permiten manipular imágenes. Uno de ellos te devuelve la información EXIF de la imágen: formato, versión, ancho, alto, bits por pixel, alpha, mimeType, tamaño en bytes e información EXIF (solo para JPEG).
La otra librería Javascript te permite realizar efectos en las imágenes, usando canvas o lo propio de IE (no todos los efectos los permite IE): flip horizontal, flip vertical, invertir, desaturacización, blur, sharpen, edges, emboss, laplace, ruido, brillo, sepia e histograma.
Librerías muy interesantes para proyectos que permitan subir o manipular imágenes (tipo fotolog).
Javascript Image Effects e ImageInfo
Vía / @rafabayona

Coverflow: visualización de imágenes estilo iPhone

ByLuis

Muy buena librería javascript que nos permite visualizar imágenes como la galería de carátulas que ofrece el iPhone. La transición entre imágenes será mediante una rotación en 3D (un lado es más alto que otro mientras se va colocando en la posición correcta).

coverflow.png

Muestra etiquetas y efecto de reflejo, y su uso es muy sencillo: tan solo habría que ejecutar un script similar a este:

code lang="javascript">Coverflow.init(
[
{src: 'img/img-0-lo.jpg', label: {album: 'All That I Am', artist: 'Santana'}},
{src: 'img/img-1-lo.jpg', label: {album: 'August & Everything After', artist: 'Counting Crows'}},
/* ... */
{src: 'img/img-10-lo.jpg', label: {album: 'Viva la Vida', artist: 'Coldplay'}},
{src: 'img/img-11-lo.jpg', label: {album: 'We Were Here', artist: 'Joshua Radin'}}
],
{
createLabel: function(item)
{
return item.label.album +'
'+ item.label.artist;
},
onSelectCenter: function(item, id)
{
var img = new Image();
img.onload = function()
{
Lightbox.show(this.src, id);
};
img.src = item.src.replace('-lo.jpg', '-hi.jpg');
}
});

JS Coverflow

CodePress: resalta código mediante Javascript

ByLuis

CodePress permite resaltar el código de diversos lenguajes de programación en nuestras páginas web mediante Javascript. El código se puede modificar en tiempo real y permite entre otras el autocompletado de comillas, paréntesis y parecidos, la inclusión de trozos de código (por ejemplo los paréntesis y llaves en una sentencia if) y shortcuts (por ejemplo mostrar entidades html).
codepress.png
Los lenguajes que interpreta son PHP, Javascript, Java, Perl, SQL, HTML y CSS. Y existen fallos detectados son que los números no cambian de tamaño ya que son imágenes y que el copy/paste falla en algunas ocasiones en Internet Explorer.
CodePress
Vía / OpenSourceCommunity.org

Librería Javascript para crear un escritorio

ByLuis

Una buena librería Javascript para crear un entorno de escritorio en nuestra página web.
Permite crear ventanas, con sus opciones más comunes (maximizar, minimizar, mover, redimensionar, bloquear el tamaño, …). A parte una barra de tareas con las ventanas abiertas y un menú. Y por último la posibilidad de añadir iconos en el escritorio.
jsdesktop.png
Widget Environment
Vía / dzone

Formatear el código como en Sentido Web

ByLuis

Para aquellos que les guste como formateamos los comentarios en Sentido Web, vamos a explicar el código creado por Choan:

El proceso que sigue es el siguiente:

  • Obtener todos los elementos pre.
  • Para cada pre leer el primer elemento code que tenga.
  • Obtenemos el texto que contiene.
  • Dividimos el texto en líneas.
  • Por cada línea comprobamos si hay algun tipo de comentario, si hay comentario lo separamos en dos partes para luego darle distintos estilos, diferenciando así el formato del comentario.
  • Nos creamos un elemento ol, y en cada li insertamos una línea obtenida anteriormente.
  • Sustituimos el elemento pre por el ol.

Read More “Formatear el código como en Sentido Web”