Crear una galería de imágenes con JavaScript

Eso de permutar imágenes, es lo que hace cualquier script de slideshows; lo hará de modo sencillo o lo hará de modo complejo pero, conceptualmente, hacen eso, usan JavaScript para cambiar una propiedad específica que es la que contiene la dirección URL de la imagen que estamos viendo.

Supongamos que diseñaramos algo así:

la primera de las imagenes

anterior | siguiente

<style>
  div.demoSW {
    margin: 0 auto;
    position: relative;
    text-align: center;
    width: 326px;
  }
  div.demoSW img {
    background-color: #FFF;
    border: 3px solid #BBB;
    height: 190px;
    outline: 1px solid #FFF;
    padding: 10px;
    width: 300px;
  }
  div.demoSW span {
    color: #EEE;
    display: block;
    font-family: Georgia;
    font-size: 20px;
    letter-spacing: -1px;
    outline: 1px solid #444;
    padding: 5px 0;
  }
  div.demoSW div a {
    color: #AAA;
    font-family: Georgia;
    text-decoration: none;
  }
  div.demoSW div {
    margin:5px 0 0 0;
  }
  div.demoSW div a:hover {
    color:#FFF;
    text-decoration: none;
  }
</style>

<div class="demoSW">
  <img id="misfotos" src="URL_imagen_1" />
  <span id="mistextos"> la primera de las imagenes </span>
  <div>
    <a href="#"> anterior </a> | <a href="#"> siguiente </a>
  </div>
</div>

La idea es que cuando hagamos click en los enlaces anterior y siguiente, podamos navegar por otras imágenes y claro, así como está, no funcionará porque, como siempre, el tema es decirle al navegador cuáles son las imagenes que usaremos y para eso hay métodos diversos, dependiendo de ellos, nuestro script será más o menos flexible, podremos colocar uno solo de ellos por página o podremos colocar varios. Lo más simple, claro, es lo menos flexible pero así es la vida.

Lo que vamos a hacer entonces es usar un array que no es otra cosa que un conjunto de datos asociados a un nombre a los que podemos acceder con un índice. Muchas palabras raras pero veamos:

var meses = new Array();
meses[0] = "enero";
meses[1] = "febrero";
meses[2] = "marzo";

Son "variables" similares a las que utilizamos normalmente excepto que todas tienen el mismo nombre y se las diferencia por el número de orden que siempre comienza con cero.

No hace falta definirlas de ese modo, también podemos hacerlo en una sola línea:

var meses = new Array("enero","febrero","marzo");

Así que, para este ejemplo, voy a usar dos arrays; la primera contendrá la dirección URL de una serie de imágenes y la segunda, los textos asociados a cada una de esas imágenes:

var foto = new Array();
foto[0] = "URL_imagen_1.png";
foto[1] = "URL_imagen_2.png";
foto[2] = "URL_imagen_3.png";
foto[3] = "URL_imagen_4.png";
foto[4] = "URL_imagen_5.png";

var texto = new Array();
texto[0] = "la primera de las imagenes";
texto[1] = "esta es la segunda";
texto[2] = "esta es al tercera";
texto[3] = "y casi vamos a terminar";
texto[4] = "la ultima de las imagenes";

Los arrays tienen muchas funciones y propiedades internas que podemos utilizar, ahora, nos limitaremos a una de ellas que es la que nos dice cuántos elementos tiene:

var cantidad = foto.length;

que en este caso nos dirá 5 ya que tenemos elementos numerados desde el cero al cuatro; es decir tenemos cinco imágenes y cinco textos.

Ahora, vamos a crear una función para manipular las etiquetas IMG y SPAN a las que hemos identificado como misfotos y mistextos con respectivos IDs. La llamaremos mover y le enviaremos un dato; para decirle que queremos ir hacia atrás le enviaremos un -1 y para decirle que queremos ir hacia adelante, le enviaremos un 1 así que mover(-1) debería mostrar la imagen anterior y mover(1) debería mostrar la imagen siguiente.

Pero necesitamos un dato más, debemos llevar la cuenta, saber cuál es la imagen que estamos viendo para poder saber cuál es la siguiente y cuál es la anterior así que la guardaremos en alguna parte y al inicio, su valor será cero ya que la imagen visible es la primera:

var cualvemos = 0;

function mover(direccion) {

  // accedemos al objeto que contiene la imagen
  var laimagen = document.getElementById("misfotos");

  // accedemos al objeto que contiene el texto
  var eltexto = document.getElementById("mistextos");

  // ¿cuál es el indice de la última imágenes en nuestra array?
  var ultima = foto.length - 1; // en el ejemplo, será el 4
  
  // antes de cambiar los datos, en un auxilar, verificamos cuál sería la imagen a mostrar
  var auxiliar = cualvemos + direccion; // se sumará 1 o se restará 1 al índice
  // si el resultado es menor que cero, le decimos que vaya al otro extremo y muestre la ultima
  if(auxiliar < 0) { auxiliar = ultima; }
  // si el resultado es mayor que la última, le decimos que vaya al otro extremo y muestre la primera
  if(auxiliar > ultima) { auxiliar = 0; }
  
  // listo, ahora ya podemos cambiar el dato sin problemas
  cualvemos = auxiliar;
  
  // ponemos la dirección URL de la imagen en la etiqueta IMG
  laimagen.src = foto[cualvemos];

  // ponemos el texto en la etiqueta SPAN
  eltexto.innerHTML = texto[cualvemos];

}

Así que, para que el ejemplo funcione, bastará entonces cambiar los enlaces y llamar a la función que acabamos de crear:

<a href="javascript:mover(-1);"> anterior </a> | <a href="javascript:mover(1);"> siguiente </a>

Hay cientos de formas de usar imágenes en miniatura y luego expandirlas; podemos emplear JavaScript, CSS o combinar ambas cosas pero, si no se quiere andar lidiando con muchos códigos y sofisticaciones, también podemos usar propiedades simples.

Así como width y height definen el ancho y alto de algún elemento, max-width y max-height nos permiten limitar esos tamaños y dar valores máximos. Por ejemplo, si desconocemos el tamaño de una imagen y queremos que no se desborde, basta establecer la propiedad max-width para que se muestre ... como pueda.

Funcionan igual que width y height así que no es necesario definir ambos datos, si establecemos max-width, la altura la calculará el navegador y será proporcional.; lo mismo ocurre si utilizamos max-height aunque a veces es necesario agregar ambas para insertar cosas en cierto contenedor que tiene un tamaño fijo.

Aprovechando esto, podríamos crear una clase y usarla en una etiqueta IMG donde colocaremos la imagen con su tamaño original:

<img class="expa" src="URL_imagen_original" />

Y ahora, escribimos las reglas:

<style>
  img.expa {
    cursor: pointer;
    max-width: 150px;
  }
  img.expa:hover {
    max-width: none;
  }
</style>

La primera establece el tamaño máximo con que se mostrará la imagen y la segunda, elimina esa propiedad cuando ponemos el cursor encima.

Conocía esta barra por haberla implementado en Tumblr pero, no tenía idea que también era posible agregarla en cualquier otro sitio, incluyendo Blogger.

Se trata de StreamPad y es muy práctica porque detecta de manera automática los archivos mp3 y permite reproducirlos. Eventualmente, deendiendo de los datos que tenga ese archio, mostrará información extra.

¿Que detecta? Cualquier enlace con audio.

Agregarla es simple, basa copiar y pegar el código del script en la plantilla, por ejemplo, en un elemento HTML que agreguemos y una serie de opciones elementales nos permiten personalizarla un poco, estableciendo los colores, los textos por defecto y habilitando o deshabilitando ciertos botones.

REFERENCIAS:makeuseof.com

La idea que muestran en CSS Tricks es interesante pero, sólo funcionará en Chrome o Safari así que poco nos puede interesar al 95% de los los usuarios que no usamos esos navegadores; sin embargo, basándose en eso, podríamos intentar algo menos espectacular pero que funcione más o menos bien en todos.

Nos olvidamos de algunas cosas y vamos a crear un header "torcido" que se mueva un poco cuando ponemos el cursor encima.

El HTML es simple, en un rectángulo, agregamos dos títulos:

<div id="demoBG">
  <h1><span>header</span></h1>
  <h2><span>dando vueltas y vueltas</span></h2>
</div>

Y ahora, el CSS:

<style>
#demoBG { /* el rectángulo */
  margin: 20px auto;
  width: 600px;
}
#demoBG h1, #demoBG h2 { /* los títulos */
  border-bottom: 10px solid rgba(0, 0, 0, 0.1);
  border-top: 10px solid rgba(0, 0, 0, 0.1);
  position: relative;
}
#demoBG h1 span, #demoBG h2 span { /* los textos */
  display: block;
  position: relative;
}

#demoBG h1 { /* el título superior */
  background: #FFF;
  margin: 0;
  position: relative;
  text-align: center;
  z-index: 200;
  /* lo rotamos en los diferentes navegadores */
  -moz-transform: rotate(-4deg);
  -webkit-transform: rotate(-4deg);
  -o-transform: rotate(-4deg);
  filter:  progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.9975640502598242, M12=0.0697564737441253, M21=-0.0697564737441253, M22=0.9975640502598242);
}
#demoBG h1 span { /* el texto en si mismo */
  color: CornflowerBlue;
  font-family: Garamond;
  font-size: 100px;
  line-height: 100px;
  text-transform: uppercase;
}

#demoBG h2 { /* el título inferior */
  background: DarkRed;
  margin: 0;
  z-index: 100;
  /* lo rotamos en los diferentes navegadores */
  -moz-transform: rotate(2deg);
  -webkit-transform: rotate(2deg);
  -o-transform: rotate(2deg);
  filter:  progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.9993908270190958, M12=-0.03489949670250097, M21=0.03489949670250097, M22=0.9993908270190958); 
}
#demoBG h2 span { /* el texto en si mismo */
  color: Tomato;
  font-family: Comic Sans MS;
  font-size: 50px;
  line-height: 90px;
  text-align: center;
}

#demoBG:hover > h1 { /* efecto hover sobre el título superior */
  -moz-transform: rotate(4deg);
  filter:  progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.9975640502598242, M12=-0.0697564737441253, M21=0.0697564737441253, M22=0.9975640502598242); 
}
#demoBG:hover > h2 { /* efecto hover sobre el título inferior */
  -moz-transform: rotate(-2deg);
  filter:  progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.9993908270190958, M12=0.03489949670250097, M21=-0.03489949670250097, M22=0.9993908270190958); 
}
</style>

header

dando vueltas y vueltas

Lo vi por varios lados y uno que es un probador compulsivo de extensiones, no puede resistirse.

F1 es una extensión de Mozilla Labs para Firefox que simplemente agrega un ícono a la derecha del buscador, en la barra de herramientas del navegador que nos permite, con un solo click, compartir la página que estemos viendo, tanto en Facebook como en Twitter y además, enviarla por correo usando la cuenta de GMail.

No hay mucho que explicar, se agrega y nada más, no tiene opciones y puede permanecer logueado a esas cuentas o las podemos remover y usar otras.

REFERENCIAS:arturogoga.com

Más allá de usar el botón de Me Gusta, insertar comentarios o gadgets similares, Facebook no tiene demasiadas opciones de integración con un blog ya que es una red relativamente cerrada donde podemos enviar cosas pero no lo inverso; la mayor parte de su contenido sólo es visible dentro de la misma red.

Sin embargo, algunas de sus funciones poseen feeds que son públicos y por lo tanto, son accesibles desde el exterior; podemos suscribirnos a ellos y también podemos utilizarlos desde nuestros propios sitios tal como haríamos con cualquier otro.

Lamentablemente, desde Blogger, donde sólo podemos usar JavaScript, las posibilidades son limitadas a menos que se usen servicios externos como Feed2JS o similares pero, aún así, algo podemos intentar.

Hay dos de esos feeds a los que podemos acceder, uno para los Enlaces que colocamos en un muro y otro para las Notas.

Para el primero, vamos a Enlaces y allí, a la derecha, veremos que hay una opción con la cual podemos suscribirnos. Haciendo click con el botón derecho del ratón, copiamos la dirección URL que será algo así:

http://apps.facebook.com/feeds/share_posts.php?id=XXXXXXXXXX&viewer=XXXXXXXXXX&key=XXXXXXXXXX&format=rss20

y, eventualmente, podemos modificarla un poco si es que no nos funciona:

http://apps.facebook.com/feeds/share_posts.php?id=XXXXXXXXXX&viewer=XXXXXXXXXX&key=XXXXXXXXXX&format=atom10

Exactamente lo mismo podemos hacer con el feed de las Notas; abrimos la pestaña y copiamos la URL que será similar a las anteriores:

http://www.facebook.com/feeds/notes.php?id=XXXXXXXXXX&viewer=XXXXXXXXXX&key=XXXXXXXXXX&format=rss20

Sea como sea, con esas URL ya podríamos utilizar algunos de los gadgets sencillos de Blogger.

El llamado Feeds nos mostrará una lista de lo último que hayamos hecho:

Es posible que esa URL no sea aceptada o no sirva si se trata de páginas, en ese caso basta saber el ID que es un número único y podemos usar algo así:

http://www.facebook.com/feeds/page.php?format=atom10&id=XXXXXXXXXX

Otra alternativa es el gadget llamado Lista de blogs con el que podemos hacer lo mismo pero, con una diferencia, allí, sólo se mostrará una sola entrada pero nos permite agregar varios feeds diferentes, tanto de Perfiles como de Páginas, sean nuestros o no ya que, salvo que el usuario los tenga como privados, todos esos feeds son públicos.

Para mi, Grooveshark es un vicio que vino a reemplazar al bloqueado Pandora y al famoso spotify que están vedados para quienes viven detrás de los muros del autodefinido primer mundo. Pero, para no llorar sobre la leche derramada ni sentirse un paria en un mundo donde hay hijos y entenados, Grooveshark, en muchos sentidos, es mejor que todos ellos por una simple razón: es un servicio gratuito, sin limitaciones y funciona rápido así que me parece que vale la pena que cualquiera que quiera escuchar música, lo pruebe.

Si bien podemos entrar en la página, buscar y escuchar casi cualquier cosa, al registrarnos gratuitamente, nos permiten crear y mantener listas de reproducción, favoritos y organizar nuestra música online, subiéndola directamente o accediendo a los millones de temas disponibles.

Para quienes no quieren usar el navegador para estas cosas, hay una alternativa llamada GrooveShark Portable y ya que estamos, a eso le podemos sumar SciLor’s Grooveshark Downloader, otro programa portable con el cual podremos descargar las canciones.

Quienes tengan una web y quieran agregar música, tambien pueden usar los widgtes que se crean al hacer click en el botón Exportar:

Se abrirá una ventana donde podremos definir el modelo gráfico (por ahora no hay muchos), los colores, tamaños, etc y luego, seleccionar canciones individuales o playlists completas; el resultado, será un código HTML que podemos agregar en cualquier sitio y que es similar a cualquier otro objeto de Flash. Como eso lo hacemos desde nuestra cuenta personal, podremos crear todas las que se nos ocurra y editarlas en cualquier momento.