jueves, 3 de noviembre de 2011

Oloblogger

Oloblogger


Marcar imágenes ampliables con un puntero distinto

Posted: 02 Nov 2011 08:08 AM PDT

Ahora que en Blogger se dispone de un sistema de ventanas modales para imágenes -el inicialmente problemático y ya muy conocido lightbox- quizás quieras destacar esa nueva propiedad de tus gráficos para que se sepa fácilmente que se pueden ver a un tamaño mayor. Y si eres de los que sigues usando un sistema externo distinto para el mismo fin, sigue leyendo, que también vamos a ver cómo se puede hacer esto mismo en ese otro caso.

La idea es simple, poner un puntero distinto en las imágenes con esa característica, usando algún tipo de icono alusivo a su posibilidad de ser ampliadas.

La forma genérica si todas las imágenes de tus posts son ampliables, como ocurre en el caso del lightbox de serie de Blogger, es incluir una propiedad cursor a la clase correspondiente a las entradas. En la mayoría de plantillas esta clase es denominada post y en ella es dónde tendremos que incluir la nueva propiedad:

.post img {
cursor: url(https://lh4.googleusercontent.com/-OokCVah1ves/Tj7Jl2WKO_I/AAAAAAAAOjs/6ab31vUeMZI/lupa.gif), auto !important;
}

El !important es posible que no sea necesario según que casos, pero ante la duda lo pondremos para dar prioridad a este cursor sobre otros que pudiera haber en la plantilla.

El resultado es que en lugar de salir una mano en las imágenes indicando que hay un enlace (o una flecha cuando no lo hay), tras esa modificación saldrá un dibujito distinto, que en el caso del ejemplo ha sido una especie de lupa:

La extinción de los dinosaurios



Para las utilidades externas ya tenemos que echar mano de los selectores CSS, que nos permitirán filtrar entre todas las imágenes del blog, aquellas a la que se les aplique algún tipo de ventana modal.

Lo normal en estos casos es que haya que añadir algo al enlace de una imagen, para que se active la ventana modal. Por ejemplo, con lytebox es necesario agregar la etiqueta rel="lytebox" para que el programa identifique que una determinada imagen será ampliada al hacer click en ella.

Sabiendo esto podemos crear una regla, que diga que todos los enlaces que incluyan esa etiqueta (rel) y que contengan también un valor igual a lytebox, sean cambiados en cuanto a aspecto del puntero. Usamos el * para incluir todos los casos posibles que se pueden dar con lytebox, ya que la etiqueta puede tener otros formatos. Por ejemplo, las galerías llevarían la expresión rel="lytebox[galeria]".

a[rel*='lytebox'] {
cursor: url(URL_IMAGEN), auto !important;
}

De la misma manera, los que usan lightwindow necesitan añadir a las imágenes ampliables un class="lightwindow", por lo que en este caso el código sería así:

a[class*='lightwindow'] {
cursor: url(URL_IMAGEN), auto !important;
}

Ejemplo con Lightwindow:



Si usáis otro tipo de ventanas modales distintas de las anteriores, sólo tendréis que saber la etiqueta que utiliza esa aplicación para distinguir las imágenes ampliables de las otras y ajustar el código del ejemplo para que filtre adecuadamente.


No hay comentarios:

Publicar un comentario

Correo Vaishnava