Videos de tamaños fluidos con jQuery

FitVids es un pequeño plugin para jQuery que nos permite agregar videos y establecer su tamaño de tal manera que se adapte al espacio disponible, manteniendo su proporción y sin necesidad de tener que calcular nada previamente por lo que basta escribir el código de inserción tal como nos lo dan los distintos servicios y dejar que el script se encargue del resto.

Para usarlo, debemos tener la librería de jQuery agregada antes de </head>:

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

Y debajo, agregamos el script jquery.fitvids.js que podemos descargar desde github.

<script type='text/javascript'>
//<![CDATA[
(function( $ ){
  $.fn.fitVids = function() {
    var div = document.createElement("div"), ref = document.getElementsByTagName("base")[0] || document.getElementsByTagName("script")[0];
    div.className = "fit-vids-style";
    div.innerHTML = "<style>.fluid-width-video-wrapper {width:100%;position:relative;padding:0;} .fluid-width-video-wrapper iframe,.fluid-width-video-wrapper object,.fluid-width-video-wrapper embed {position:absolute;top:0;left:0;width:100%;height:100%;}</style>";
    ref.parentNode.insertBefore(div,ref);
    return this.each(function(){
      var selectors = ["iframe[src^='http://player.vimeo.com']", "iframe[src^='http://www.youtube.com']", "iframe[src^='http://www.kickstarter.com']", "object", "embed"];
      var $allVideos = $(this).find(selectors.join(","));
      $allVideos.each(function(){
        var $this = $(this), height = this.tagName == "OBJECT" ? $this.attr('height') : $this.height(), aspectRatio = height / $this.width();
        $this.wrap("<div class='fluid-width-video-wrapper' />").parent(".fluid-width-video-wrapper").css("padding-top", (aspectRatio * 100)+"%");
        $this.removeAttr("height").removeAttr("width");
      });
    });
  }
})( jQuery );
//]]>
</script>

Por último, ejecutamos la función donde sólo deberemos establecer el nombre de la clase CSS que usaremos como contenedor:

<script>
  $(document).ready(function(){ $(".elvideo").fitVids(); });
</script>

¿Cómo lo aplicamos a nuestro sitio? Colocando el IFRAME del video dentro de un DIV con esa clase que hayamos elegido:

<div class="elvideo">
  <iframe width="425" height="349" src="http://www.youtube.com/embed/lzN5fbFlFJs" frameborder="0" allowfullscreen></iframe>
</div>

Tal como está, funcionará con sitios de videos que utilicen un IFRAME como código para compartir videos: YouTube, Vimeo, Kickstarter, etc. Ellos también hablan de blip.tv o Viddler pero, ninguno de esos está contemplado sin embargo, podemos agregarlos si editamos esta línea:

var selectors = ["iframe[src^='http://player.vimeo.com']", "iframe[src^='http://www.youtube.com']", "iframe[src^='http://www.kickstarter.com']", "object", "embed"];

por ejemplo, así agrego blip.tv y elimino kickstarter.com:

var selectors = ["iframe[src^='http://player.vimeo.com']", "iframe[src^='http://www.youtube.com']", "iframe[src^='http://blip.tv']", "object", "embed"];

Condicionar algo significa que en función de cierto dato, ocurrirán ciertas cosas o no. En Blogger, las condiciones están limitadas a que ese dato a evaluar sea alguno a los que ellos nos permiten acceder y no cualquier otro de allí que ciertas ideas no puedan ser aplicadas de manera simple porque carecemos de esa información y por lo tanto, debemos usar JavaScript que es el otro método disponible.

No es lo mismo en absoluto ya que, cuando se condiciona usando las etiquetas propias de Blogger, la página web resultante se crea en función de esas condiciones, si por ejemplo, decidimos que tal parte no forme parte de ella, el código fuente resultante, eso que muestra el navegador, no lo incluirá. Por el contrario, usando JavaScript, sólo podemos "ocultar" cosas pero eso que ocultamos, será parte de la página y se ejecutará aunque no lo veamos.

Partiendo de la idea de colocar una imagen asociada a una etiqueta en la sidebar, Adrián J. Messina preguntaba si era posible que, en lugar de mostrar una imagen, lo que se condicionara fuera un widget o gadget.

Como para hacer eso necesitamos conocer la etiqueta de esa entrada y este dato sólo es accesible dentro del LOOP que muestra los posts, no queda otro remedio que usar JavaScript lo que implica que sólo podremos mostrarlo u ocultarlo pero siempre estará allí así que su contenido será cargado por lo que es aconsejable que sean cosas relativamente livianas.

Hacer esto implica varios pasos. Para empezar, vamos a guardar en alguna variable, el dato que necesitamos; hay que ir a la plantilla y buscar:

<b:includable id='post' var='post'>

Allí, en alguna parte, veremos un código de Blogger que es el que muestra las etiquetas de la entrada y que tiene distintos formatos pero, básicamente, dice algo así:

<b:loop values='data:post.labels' var='label'>
  <a expr:href='data:label.url' rel='tag'><data:label.name/></a>
  <b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>

donde data:label.name es la etiqueta de la entrada; allí es donde deberemos guardar ese dato; por ejemplo:

<b:loop values='data:post.labels' var='label'>
  <script>var etiquetaPOST=&#39;<data:label.name/>&#39;;</script>
  <a expr:href='data:label.url' rel='tag'><data:label.name/></a>
  <b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>

Esto está pensado para entradas donde sólo hay una etiqueta, si son varias, empieza a carecer de sentido y debería pulirse el método, usar arrays o cualquier otro sistema.

Ahora, necesitamos agregar lo widgtes, uno, dos, los que queramos. Lo hacemos como lo hacemos siempre y luego, los buscamos; cualquiera sea siempre tendrá un ID que los identifica:

<b:widget id='XXXXX' locked='false' title='XXXXXXXX' type='XXXX'>
   .......
</b:widget>

Por defecto, los ocultaremos; suponiendo que uno de ellos es un elemento HTML cuyo id es HTML7 y el otro es una lista de enlaces cuyo id es LinkList3, pondremos lo siguiente antes de </head>

<style>
  #HTML7 {display:none;}
  #LinkList3 {display:none;}
</style>

Con esto, ya estamos listos para condicionar la visibilidad de los gadgets y se me ocurre que lo mejor es agregar el script dentro de cada uno de ellos. Suponiendo que el elemento HTML sólo se mostrará cuando la etiqueta sea "Fotos"; haríamos algo así:

<b:widget id='HTML7' locked='false' title='XXXXXXXX' type='HTML'>
<b:includable id='main'>
  <script>
  //<![CDATA[
    if(etiquetaPOST=="fotos") {
    document.getElementById("HTML7").style.display = "block";
    }
  //]]>
  </script>
   .......
</b:includable>
</b:widget>

Esto, sólo es uno de muchos métodos que deberán ser adaptados a cada situación; como dije antes, si las entradas poseen varias etiquetas habría que buscar variantes como usar arrays o variables auxiliares en el LOOP, por ejemplo:

<script>
  etiquetaPOST=&#39;<data:label.name/>&#39;;
  if(etiquetaPOST==#39;Fotos#39;) {
    flagFotos = 1;
  } else if (etiquetaPOST==#39;Videos#39;) {
    flagVideos = 1;
  }
</script>

y en el widget colocaríamos:

if(flagFotos==1) {
  document.getElementById("HTML7").style.display = "block";
}

Sea como sea, siempre hay que tener en cuenta que mostrar ese widget oculto es algo que deberá hacerse una vez que se haya creado así que, si la sidebar está a la izquierda y se genera ANTES que los posts, la condición deberá colocarse en otro lado, al final de la plantilla o en el mismo LOOP de los posts, caso contrario, no funcionará porque estaremos evaluando un dato que aún se desconoce.

Claro, todo se resolvería si Blogger nos permitiera acceder a ese dato desde cualquier parte de la plantilla pero, eso es pedirle peras al olmo.

Bitdefender es un conocido anti-virus que incluye versiones gratuitas y no gratuitas, además de otros servicios de seguridad como la posibilidad de scanear la PC online. A esto, se le había sumado un servicio extras llamado Safego que también es gratuito y que nos permiten proteger nuestra cuenta de Facebook.

Tal como dicen en SpamLoco, la aplicación trabaja en segundo plano y no molesta en absoluto.

Ahora, ghacks.net anuncia la llegada de un servicio más para ser agregado a Twitter.

Como en el caso anterior, basta ir a la página darle autorización y listo. Una vez dentro, podremos configurar las alertas, analizar a quienes seguimos y mantenernos razonablemente seguros.

Desde el inicio de los tiempos ... de los de este blog, digo, no desde Adán y Eva, he tenido la costumbre de hacer una entrada cada año, más o menos de manera sistemática, cuando terminaba agosto. Una entrada que pretendía no sé si celebrar o recordar o reafirmar el paso de un nuevo año en la existencia de este blog; un cumpleblog o como quiera llamarse. Algo así como un punto y seguido.

Esta vez, la fecha se pasó. Se pasó porque no tenía ganas, se pasó porque estaba ocupado con otras cosas ... se pasó porque se pasó.

Tampoco la demora ha sido significativa; sólo un par de días desde el 30 de agosto hasta hoy; apenas un instante pero, lo que en la vida es nada más que un suspiro, en la web es mucho pero mucho tiempo. Y cinco años son: una eternidad. Acá, las cosas pasan tan rápido que apenas las vemos desaparecen, lo que hoy es top, mañana es demodé; lo que hoy nos fascina, mañana nos aburre.

Pero el tiempo en la web y el tiempo de un blog no se rigen por los calendarios; los días no tienen 24 horas y los años no tienen 365 días. Acá, todo es efímero y a la vez, todo es infinito. Siempre hay alguien para quien lo viejo es novedad y la novedad siempre tiene algo de viejo. Eso es la web. Un lugar sin tiempos; una red que nos entrecruza, nos comunica y nos distancia pero que a la vez, es el germen de ese nuevo mundo que vendrá, que es inevitable y nos contendrá a todos, con nuestras diferencias.

5Si ahora me pongo a escribir esto es porque de alguna manera me siento obligado. Obligado sin obligación. Obligado porque los blogs son para eso, para dejar salir lo que uno tiene atravesado en al garganta.

Obligado porque un comentario del amigo Jabba me recordaba el aniversario y sus palabras me dejaron asombrado: ¿Dónde está el post del quinto cumpleblog? preguntaba sabiendo que no había ninguno.

Y me quedé pensado ¿cuál es la magia que hace que alguien se acuerde de una fecha como esta? Una fecha que bien podría pasar desapercibida porque no significa demasiado y aún así, sabiendo que es una nimiedad, se acerca desde la distancia y celebra y festeja y deja felicitaciones.

Sí eso no es magia qué alguien me explique qué es la magia.

Magia es eso. Magia es la distancia sin distancias. Magia es la realidad de lo virtual. Magia es cruzar los límites sin culpa ni disculpas. Magia es que un blog persista y se apropie de nuestra vida para multiplicarnos; que nos maneje, nos domine y nos moldee. Magia es eso que no se ve y no debe ser explicado. Qué está o no está. Que es o no es.

Obviamente, no puedo traer orquesta ni champan aunque no es por razones de "ajustes presupuestarios" sino más bien por razones de logística pero, de todas maneras, la imaginación podría llegar a servir para cubrir los faltantes.

Y entonces, acá estamos. Cumpliendo con las tradiciones auto-impuestas y sonriendo un poco. Feliz porque a uno lo recuerdan. Triste por lo que se ha perdido. Melancólico, ilusionado, todo al mismo tiempo, igual que frente a cualquier aniversario donde uno se para frente al espejo y se dice a si mismo:

Cinco años ... pensar que yo era tan joven!!!!!!!!!!!

Desde que Google cambió el algoritmo que establece la forma en que se muestran los resultados en su buscador, se ha producido un revolución en muchos sitios ya que eso ha significado que sus páginas aparezcan en posiciones menos privilegiadas y por lo tanto, la cantidad de visitas se ha reducido de manera significativa, con caídas que muchas veces, superan el 50%.

Este nuevo sistema, llamado Google Panda, hace tiempo que ya estaba en funcionamiento pero sólo en idioma inglés; sin embargo, a partir del 12 de agosto, se ha extendido a todos los idiomas.

La explicación de Google, siempre excitado con la imagen que le devuelve su propio espejo, es que quieren ofrecer mejores resultados cuando alguien busca algún tipo de información y privilegiar los contenidos originales sobre las copias pero ... el resultado final es más que dudoso. Google Panda dice premiar a sitios con contenido original, integrado a redes sociales y poca publicidad; Google Panda dice penalizar el contenido copiado, los artículos con escasa información pero esta imagen hurtada del Foro de SpamLoco lo desmiente; tal como se ve, el artículo original no es el primero sino ¡el séptimo!

Seguramente, algo similar nos debe estar pasando a cualquiera de nosotros; no hablo de personas que deben mantener un blog ya que tal vez, no han sido afectados sino de personas que usan el buscador y sin duda, habrán notado que los resultados que se muestran tienden a ser ... raros.

La verdad, las recomendaciones de Google para construir sitios de alta calidad son ... incalificables; como todos los consejos genéricos, son abstractos, discutibles y, en lo personal, van a contrapelo de lo que yo entiendo que debería ser internet. Hablan de "importancia", de "autoridad" pero ¿quién define la importancia o establece la autoridad? Hablan mucho de "originalidad" y si fuera sarcástico, me preguntaría: ¿Google eliminará de sus resultados las alevosas copias que ellos mismos hacen de otros servicios?

Algo que dicen es clarito: "Por supuesto, no vamos a develar los auténticos indicadores que usamos para la clasificación en nuestros algoritmos porque no queremos que nadie juegue con los resultados de las búsquedas" lo que traducido al español significa que, al no ser públicas, al carecer de controles independientes, son reglas tan arbitrarias como ellos quieran y simplemente, nos piden que confiemos en su bondad, su sabiduría y su buena fe cosa que, obviamente, cualquier sociedad civilizada debería repudiar; no porque uno dude (yo dudo) sino porque en ciertos casos, no solo se debe ser sino también parecer y la no regulación de cualquier tipo de monopolio sólo lleva al desastre.

Un reciente artículo de Ayuda Wordperss intenta ayudar a entender los problemas prácticos o por lo menos, hecha algo de luz sobre lo que es y lo que debería ser. Dice: "parece ser que está valorando de manera excesiva el ratio de rebote, el tiempo de permanencia en el sitio y la marca del sitio", de allí que frente a cualquier búsqueda, suelen verse muchos resultados de Wikipedia, YouTube, ¡¡¡Taringa!!!! o sitios "grandes" en detrimento de sitios "pequeños". No sería extraño, es el resultado lógico de la concentración

¿Qué puede hacerse si un sitio se ve afectado por esta "mejora"? Insultar, rezar, pero, también se pueden tener en cuanta algunas ideas expresadas en el articulo al que me refería y que trataré de resumir en lo que considero que puede ser aplicado de modo genérico, sin importar el servicio o tipo de sitio que uno tenga:

• crear contenido original, indicar las fuente y evitar las copias
• evitar los artículos cortos que aporten poco más allá de un enlace a la fuente original
• usar siempre texto alternativo (ALT) para las imágenes
• incitar a la lectura completa de las entradas
• añadir contenido que fomente la permanencia en el sitio
• facilita que los lectores compartan las entradas en redes sociales
• eliminar la publicidad excesiva
• revisar los enlaces rotos
• fomentar el debate en los comentarios siempre que estos sean relevantes
• reducir la cantidad de categorías o etiquetas
• evitar que se indexen las páginas secundarias, Archivos, Etiquetas, Búsquedas, etc.

REFERENCIAS:Recopilación de artículos sobre Google Panda para aprender más

Las pestañas que se crean usando sólo CSS, tienen una limitación, sólo es posible activarlas utilizando :hover ya que no existe la posibilidad de usar el evento click así que su contenido se muestra cuando ponemos el cursor encima y desaparece cuando lo sacamos pero, CSS-tricks ha encontrado una variante que nos permite controlar esa visibilidad de manera eficiente, utilizando etiquetas que normalmente no usaríamos; específicamente, las etiquetas input y label.

Veamos el HTML básico de un ejemplo con tres pestañas:

<div class="tabs">
   <div class="tab">
       <input type="radio" id="tab-1" name="tab-group-1" checked>
       <label for="tab-1">Primera</label>
       <div class="content"> el contenido de la pestaña 1 </div>
   </div>
   <div class="tab">
       <input type="radio" id="tab-2" name="tab-group-1">
       <label for="tab-2">Segunda</label>
       <div class="content"> el contenido de la pestaña 2 </div>
   </div>
    <div class="tab">
       <input type="radio" id="tab-3" name="tab-group-1">
       <label for="tab-3">Tercera</label>
       <div class="content"> el contenido de la pestaña 3 </div>
   </div>
</div>

No. Nada de esto funcionará en las viejas versiones de Internet Explorer aunque podría intentarse hacer modificaciones y probar, cosa que no he hecho y no pienso hacer por ahora.

Ahora el CSS que ponemos antes de &head>

<style>

.tabs { /* es el rectángulo contenedor */
margin: 0 auto;
min-height: 200px;
position: relative;
width: 550px;
}
.tab { /* cada una de las pestañas */
float: left;
}
.tab label { /* la parte superior con el título de la pestaña */
background-color: #456;
border-radius: 5px 5px 0 0;
box-shadow: -3px 3px 2px #678 inset;
color: #DDD;
cursor: pointer;
left: 0;
margin-right: 1px;
padding: 5px 15px;
position: relative;
text-shadow: 1px 1px #000;
}
/* el control input sólo lo necesitamos para que las pestañas permanezcan abiertas así que lo ocultamos */
.tab [type=radio] { display: none; }

/* el contenido de las pestañas */
.content {
background-color: #678;
bottom: 0;
left: 0;
overflow: hidden;
padding: 20px;
position: absolute;
right: 0;
top: 23px;
}
/* y un poco de animación */
.content > * {
opacity: 0;

-moz-transform: translateX(-100%);
-webkit-transform: translateX(-100%);
-o-transform: translateX(-100%);

-moz-transition: all 0.6s ease;
-webkit-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
}

/* controlamos la pestaña activa */
[type="radio"]:checked ~ label {
background-color: #678;
box-shadow: 0 3px 2px #89A inset;
color: #FFF;
z-index: 2;
}
[type=radio]:checked ~ label ~ .content { z-index: 1; }
[type=radio]:checked ~ label ~ .content > * {
opacity: 1;
-moz-transform: translateX(0);
-webkit-transform: translateX(0);
-o-transform: translateX(0);
-ms-transform: translateX(0);
}

</style>

Primera

esta es la primera pestaña

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Otra pestaña

Etiam tempor posuere risus, eget suscipit felis ultricies ac. Aenean mattis dignissim purus, at fringilla dui placerat ac. Ut sit amet pellentesque tellus. Aenean fermentum mattis mi. Nullam quis orci aliquam ante tincidunt dapibus sit amet id magna. Duis semper, dui vitae blandit lacinia, justo purus adipiscing purus, id mattis nulla.

Ultima pestaña

Hay muchas formas de mostrar imágenes con efectos diversos utilizando sólo CSS; el problema que tienen muchos es que estas cosas suelen no ser "amigables", no es cosa de copiar y pegar para que funcione sino que requiere intentar entender cómo funcionan para poder adaptarlas a determinado contexto. Por ejemplo, eso pasa con CSS3 Gallery de Andrea Giammarchi que tiene una idea muy interesante sobre la que uno puede jugar, modificar y probar distintas alternativas.

Por lo general, todo se ve bien pero los ejemplos tienen sus trampas; se muestran en páginas vacias donde todo se posiciona de manera absoluta y no hay nada otra cosa que influya; son contextos asépticos y si queremos usarlo en un blog o una página web donde haya otros elementos alrededor, las cosas se complican; más aún si no se tienen en cuenta que los navegadores no funcionan igual y que hay propiedades que no reconocen.

Todo eso suele tener solución; basta jugar un poco con las propiedades y probar a ver que sale aunque, eventualemente, es posible que no salga nada.

En este caso, voy a usar cuatro imágenes y las colocaré en una lista ordenada a la que idendificaré con un ID:

<ul class="thumb">
  <li><img src="URL_imagen_1"/></li>
  <li><img src="URL_imagen_2"/></li>
  <li><img src="URL_imagen_3"/></li>
  <li><img src="URL_imagen_4"/></li>
</ul>
<div> ....... cualquier contenido ....... </div>

Eso es lo de menos, la clave, claro, es el CSS así que acá va un modelo de ejemplo:

<style>

  /* la lista flota a la izquierda porque quiero que el DIV con el texto se muestre a su lado */
  /* por ese motivo, debo dimensionarla con width y height  */
  ul.thumb {
    float: left;
    height: 240px;
    list-style: none;
    margin: 0;
    position: relative;
    width: 260px;
  }

  /* cada item es una imagen que fuerzo a que se muestren pequeñas */
  ul.thumb li {
    /* se posicionand e manera absoluta */
    position: absolute;
    left: 50px;
    top: 0;
    z-index: 0;
    /* algo de decoración */
    background-color: #FFF;
    box-shadow: 0 0 10px #444 inset;
    padding: 10px;
    /* el tamaño de la imagen a mostrar */
    height: 112px;
    width: 150px;
    /* la transición será el efecto */
    -moz-transition: all 1s ease-in-out 0s;
    -webkit-transition: all 1s ease-in-out 0s;
    -o-transition: all 1s ease-in-out 0s;
  }
  ul.thumb li img {
    height: 100%;
    width: 100%;
  }

  /* cada item se posiciona y se rota a gusto */
  ul.thumb li:nth-child(1) {
    -moz-transform: rotate(20deg);
    -webkit-transform: rotate(20deg);
    -o-transform: rotate(20deg);
    margin-top: 100px;
  }
  ul.thumb li:nth-child(2) {
    -moz-transform: rotate(-30deg);
    -webkit-transform: rotate(-30deg);
    -o-transform: rotate(-30deg);
    margin-top: 0px;
  }
  ul.thumb li:nth-child(3) {
    -moz-transform: rotate(-15deg);
    -webkit-transform: rotate(-15deg);
    -o-transform: rotate(-15deg);
    margin-top: 75px;
  }
  ul.thumb li:nth-child(4) {
    -moz-transform: rotate(10deg);
    -webkit-transform: rotate(10deg);
    -o-transform: rotate(10deg);
    margin-top: 50px;
  }

  /* el efecto al poner el cursor encima */
  ul.thumb li:hover {
    /* se elimina la rotación */
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    /* se muestra la imagen con su tamaño real */
    height: 375px;
    width: 500px;
    /* se la posiciona y se la pone en primer plano */
    margin-left: 0px;
    margin-top: -50px;
    z-index:10;
    /* algo de decoración */
    border-radius: 10px;
    padding:20px;
  }
</style>

El estilo utiliza la pseudo-clase nth-child que, lamentablemente, no está implementada en Internet Explorer salvo a partir de su versión 9 así que, lo primero que habría que hacer es intentar que la galería se vea en IE8. Eso, es algo que puede hacerse de distinto modos, ninguno es ideal pero ... es lo que hay.

Por ejemplo, podemos agregar el script ie9js que es un script que agrega una cantidad de funciones extras, ayudando a que las versiones más viejas de IE interpreten propiedades que normalmente no están implementadas. Se coloca antes de </head>:

<!--[if lt IE 9]>
<script src='http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js'/>
<![endif]-->

En este caso, la solución es parcial ya que, de todos modos, la rotación de las imagenes deberá hacerse utilizando filtros lo que también implcia cambair los margenes y por lo tanto, será necesario usar condicionales así que deberemos agregarles algún ID a cada etiqueta LI; en este caso, las llamé IE1, LE2, IE3 e IE4.

<!--[if IE]>
<style type='text/css'>
  ul.thumb li { zoom: 1; }
  #IE1 {
    margin-left: -30px;
    margin-top: -20px;
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9396926207859084, M12=-0.3420201433256687, M21=0.3420201433256687, M22=0.9396926207859084, sizingMethod='auto expand');
  }
  #IE2 {
    margin-left: -20px;
    margin-top: 15px;
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.8660254037844387, M12=0.49999999999999994, M21=-0.49999999999999994, M22=0.8660254037844387, sizingMethod='auto expand');
  }
  #IE3 {
    margin-left: -30px;
    margin-top: 50px;
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9659258262890683, M12=0.25881904510252074, M21=-0.25881904510252074, M22=0.9659258262890683, sizingMethod='auto expand');
  }
  #IE4 {
    margin-left: 0px;
    margin-top: 90px;
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.984807753012208, M12=-0.17364817766693033, M21=0.17364817766693033, M22=0.984807753012208, sizingMethod='auto expand');
  }
  ul.thumb li:hover {
filter: progid:DXImageTransform.Microsoft.Matrix(enabled='false') !important;
  }
</style>
<![endif]-->

• 
• 
• 
• 

Maecenas congue ornare fermentum. Aliquam orci ipsum, fringilla id vehicula eget, consequat ut lorem. Nunc commodo ornare diam, at varius felis imperdiet et. Aenean commodo malesuada nibh eu eleifend. Sed et ante vitae nisi ullamcorper pretium. In id convallis tellus. Phasellus feugiat, arcu ac scelerisque interdum, purus dui rutrum diam, et sollicitudin ante diam ac diam? Duis nec erat metus. Duis placerat eros vel elit feugiat ornare blandit urna laoreet. Phasellus dapibus lorem sit amet tortor adipiscing non mollis felis pretium. In vitae lectus nec justo viverra eleifend. Duis hendrerit est quis nulla faucibus quis suscipit ante condimentum. Etiam scelerisque lacus ac neque eleifend rhoncus. Suspendisse potenti. Mauris vulputate varius elementum. Proin semper leo nec augue massa nunc.