Más sobre imágenes de fondo redimensionables

La propiedad background-size nos permite establecer las dimensiones de la imagen de fondo para definir la relación ancho/alto que debe mantenerse, sin que importe el tamaño del contenedor.

leer artículo actualizado

Oloman dice que Más vale pájaro volando que ciento ... y no termina la frase para dejarnos con la intriga. De todos modos no importa porque no se trata de un concurso de proverbios sino de un script que hace que se nos vuelen los pajaros, mejor dicho, que podamos poner un pajarito de Twitter que vuele sobre nuestra página. No, no sé si será útil pero es divertido, por lo menos por un rato y además, es un pájaro bastante dócil.

El proyecto original se llama TripleFlap pero, está en alemán. Como Oloman se ha tomado el trabajo de alojar el script y la imagen necesaria y adaptar ambas cosas para que esto funcione en Blogger, hay que ir a su sitio y mirar las explicaciones detalladas y algunas ideas agregadas.

En realidad, el script podría ponerse en cualquier parte (acá está incluido solamente en esta entrada) pero, como ademas de ser vistoso y azul, tiene la particularidad de servir de enlace a nuestra cuenta y como botón de retweet y enviar nuestras entradas a Twitter, lo razonable es colocarlo en el LOOP de las entradas y condicionarlo para que sea visible sólo en las páginas individuales así que buscamos <data:post.body/> y justo antes, insertamos lo siguiente:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <script src='http://oloblogger.googlecode.com/files/tripleflap.js' type='text/javascript'></script>
  <script type='text/javascript'>
  //<![CDATA[
    var birdSprite="http://oloblogger.googlecode.com/files/birdsprite.png";
    var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span");
    var twitterAccount = "http://twitter.com/nombre";
    var tweetThisText = "Leyendo: <data:post.url/>";
    tripleflapInit();
  //]]>
  </script>
</b:if>

donde deberemos cambiar twitterAccount por nuestra cuenta en Twitter y a la variable tweetThisText podemos modificarle el texto.

Hecho eso, tendremos al pajaro revoloteando sobre la página y cambiando de posición cada vez que hagamos scroll.

REFERENCIAS:Oloblogger

Web Cartoon" by shlyapnikova
	Contiene 40 íconos 48x48, en formato PNG. descargar

Icons for Designers
	Contiene 10 íconos 64x64, en formato PNG. descargar

Social snow by sultan-design
	Contiene 18 íconos 256x256, en formato PNG. descargar

Tiny Circleslider es un pequeño plugin para jQuery que genera un carrusel de imágenes circular.

No es nada complicado de utilizar tal como muestran en el ejemplo que podemos descargar pero, a la hora de personalizarlo, hay que emplear mucha aritmética. Todos esos detalles pueden verse en la página del autor así que me limito a mostrar lo elemental.

Obviamente necesitamos tener la librería agregada en el head de nuestra plantilla:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.js' type='text/javascript'/>

Y luego, el script del plugin que podemos agregar, copiando el contenido del archivo jquery.tinycircleslider.min.js y pegándolo de este modo:

<script type='text/javascript'>
//<![CDATA[
  ... aquí pegamos el contenido del archivo ...
//]]>
</script>

Nos faltaría el CSS que ponemos debajo y que requiere el uso de tres imágenes que podemos descargar y alojar en el mismo Blogger: bg-rotatescroll.png, bg-rotatescroll2.png, bg-thumb.png:

<style>
  #rotatescroll { /* es el rectángulo contenedor */
    height: 300px;
    position: relative;
    width: 300px;
  }
  #rotatescroll .viewport { /* es el rectángulo que contiene las imágenes */
    height: 300px;
    position: relative;
    margin: 0 auto;
    overflow: hidden;
    width: 300px
  }
  #rotatescroll .overview { /* es la lista con las imágenes */
    left: 0;
    list-style: none; 
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
  }
  #rotatescroll .overview li { /* cada item de la lista */
    float: left;
    height: 300px;
    position: relative;
    width: 300px;
  }
  #rotatescroll .overlay { /* la imagen con el círculo se superpone a la lista */
    background: transparent url(URL_bg-rotatescroll.png) no-repeat 0 0;
    height: 300px;
    left: 0;
    position: absolute;
    top: 0;
    width:300px;
  }
  #rotatescroll .thumb { /* el círculo rojo que nos permite navegar */
    background:transparent url(URL_bg-thumb.png) no-repeat 0 0;
    cursor: pointer;
    height: 26px;
    left: 137px;
    position: absolute;
    top: -3px;
    width: 26px;
    z-index: 200;
  }
  #rotatescroll .dot { /* los puntos que indican ca posición de cada imagen */
    background: transparent url(URL_bg-dot.png) no-repeat 0 0;
    display: none;
    height: 12px;
    left: 155px;
    position: absolute;
    top: 3px;
    width: 12px;
    z-index: 100;
  }
  #rotatescroll .dot span { /* permanecen ocultos por defecto */
    display: none;
  }
</style>

Ahora, el HTML que colocamos donde vayamos a mostrar el carrusel donde, las imágenes pueden ser enlaces o no:

<div id="rotatescroll">
  <div class="viewport">
    <ul class="overview">
      <li><img src="URL:imagen1" /></li>
      <li><img src="URL:imagen2" /></li>
      <li><img src="URL:imagen3" /></li>
      <li><img src="URL:imagen4" /></li>
      <li><img src="URL:imagen5" /></li>
    </ul>
  </div>
  <div class="dot"></div>
  <div class="overlay"></div>
  <div class="thumb"></div>
</div>

Eso es todo, y bastaría activar la función agregando algo así debajo del HTML:

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

Algunas opciones extras permiten definir si funcionará como un slideshow automático:

$('#rotatescroll').tinycircleslider({ interval: true });

y hay otras opciones que se agregan, separándolas por comas:

snaptodots true si se mostrarán los puntos cuando se arrastran (por defecto es false)
hidedots false si no queremos que se muestren los puntos internos (por defecto es true)
intervaltim es el tiempo entre slides (por defecto 3500)
radius define el tamaño del círculo (por defecto es 140)

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.