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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP5cnZE_8gmxhSrWlsedfgoHKUU9yPjADKVh1TWPKphpmi9xDudHIsqXDzDKlJ1sTATwyiN2wlug4CavSgJ5saxcHdSFPrQF-jsQr7UcvDrMqpVzS_lq7gx1xAm80nRByBmgtSIbRFIq_K/), auto !important;
}
cursor: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP5cnZE_8gmxhSrWlsedfgoHKUU9yPjADKVh1TWPKphpmi9xDudHIsqXDzDKlJ1sTATwyiN2wlug4CavSgJ5saxcHdSFPrQF-jsQr7UcvDrMqpVzS_lq7gx1xAm80nRByBmgtSIbRFIq_K/), 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;
}
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;
}
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.
¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.
Y muchos más artículos interesantes si nos sigues en...
Hola Oloman.
ResponderEliminarMe ha parecido muy interesante y me gustaría meter la lupa en mi página, pero tengo el inconveniente de que el LightBox no funciona conmigo.
He calcado la plantilla para un blog de prueba y en éste si me funciona (al igual que el avatar de los comentarios, también desaparecidos en el principal).
Al lío: las imágenes se abren en una ventana distinta, cosa que no me gusta lo más mínimo, a tamaño original... ¿funcionaría en este caso?.
Y abusando de tu generosidad, ¿cómo puedo recuperar los avatares de los comentarios?.
Gracias de antemano.
Un saludo.
for mozilla browse just add like it
ResponderEliminarcursor: -moz-zoom-in
xixixi...
Hola, buen día.
ResponderEliminar¿Aquí en donde están regalando perritos puppy? Me gustaría adquirir uno.
Tapestryworkerman, si te refieres a cambiar el puntero, sí. Si te funcionará. En tu caso tendrías que usar el primer trozo de código pero cambiando .post por .post-body. Lo de que no funcione el lightbox depende de las modificaciones que tenga hecha la plantilla, pero no sé cuáles son exactamente las que afectan. A mí tampoco me funciona aquí, por eso sigo usando Lightwindow. Además lo prefiero.
ResponderEliminarBuen día Pepée Pilato. No no regalamos perritos aquí :)
Oloman! muchas gracias por este espacio es realmente útil a tanta gente...yo desde luego siempre vengo aquí, soy una novata total de todo esto y lo explicas todo tan claro...
ResponderEliminarSi no te importa te hago un par de consultas...
1. He hecho lo del cursor y me funciona perfectamente, pero en mi blog tengo los posts resumidos con imagen en miniatura y con el botón "leer más" y me gustaría que no se pusiera la lupa al pasar por encima de ellas, solo dentro del post. ¿podrías ayudarme?
2. Otra cosa, yo me manejo siempre con Chrome y hace poco me he dado cuenta que mi blog visto en IE es una autentica mierda porque el fondo se ve gris cuando debería verse blanco. ¿tengo alguna solución? nadie sabe ayudarme....
Gracias, gracias, gracias......
1. Ahora mismo no tienes ese efecto, pero si decides volver a ponerlo, además del código que conté, añade detrás .post-body span img {cursor: default;} En teoría eso hará que las imágenes de los sumarios (que incluyen un SPAN) tengan un cursor normal.
Eliminar2. Eso ya es más complicado, pero tengo que decirte que yo tengo IE8 y el fondo se ve igual que con Chrome.
uyyyy muchisisimas gracias ahora mismo voy a probarlo... me alegra que me digas lo de IE
EliminarSaludos!!
¿podrías ayudarme? imagino que no te sobre ni el tiempo ni las ganas con tantísimos comentarios pero te lo agradecería muchísimo.
ResponderEliminarGracias Oloman
MUY BUENO OLOMAR TODO LA VERDAD DESCANSA UN POCO TRAES MUCHAS COSAS MUY BUENOS UN SALUDO
ResponderEliminar