Inicio

Lightbox en Blogger: Resolviendo conflictos

19.5.18

Coding

Lightbox en Blogger, soluciones
Cuando agregamos una imagen en Blogger, por defecto esta queda envuelta en un enlace hacia su alejamiento.

Es una de las razones para que existe Lightbox, para que al lector pulsar dicha imagen, en vez de salir del blog, ésta le sea mostrada en una galería modal.

Pero no siempre sucede esto, y con este artículo te comparto mis propuestas para trabajar en los principales escenarios donde Lightbox no realiza su cometido.



¿Por qué no está activo y operativo mi Lightbox?

Según mi experiencia en Blogger, hay tres motivos:
  1. Optaste por desactivarlo desde el Panel de Configuración.
  2. Eliminaste widget.js de tu tema para optimizarlo.
  3. Usas una plantilla diseñada por terceros donde no se cumplen los requerimientos para que Lightbox funcione.


¿Cómo soluciono esto?

1. Si desactivaste Lightbox

Puesto que no deseas usar Lightbox, recomiendo eliminar el enlace a cada imagen de cada post y puedes hacerlo manualmente, imagen por imagen, o puedo elaborar un script a tu medida que inhabilite las imágenes como enlaces cuando dirijan hacia su propio alojamiento.




2. Si eliminaste widget.js

Podrías seguir la recomendación para el caso anterior si tu intención era no usar Lightbox junto con el resto de scripts de Blogger. Pero si sí te gustaría esta funcionalidad y mantener la optimización que has hecho, prueba instalar Featherlight.js.

Dentro del b:skin de tu tema, agrega los estilos CSS (puedes personalizarles):
/* Featherlight - ultra slim jQuery lightbox v1.7.13 - https://noelboss.github.io/featherlight/ | Copyright 2018, Noël Raoul Bossart (https://www.noelboss.com) MIT Licensed */
html.with-featherlight{overflow:hidden}.featherlight{display:none;position:fixed;top:0;right:0;bottom:0;left:0;z-index:2147483647;text-align:center;white-space:nowrap;cursor:pointer;background:#333;background:rgba(0,0,0,0)}.featherlight:last-of-type{background:rgba(0,0,0,.8)}.featherlight:before{content:'';display:inline-block;height:100%;vertical-align:middle}.featherlight .featherlight-content{position:relative;text-align:left;vertical-align:middle;display:inline-block;overflow:auto;padding:25px 25px 0;border-bottom:25px solid transparent;margin-left:5%;margin-right:5%;max-height:95%;background:#fff;cursor:auto;white-space:normal}.featherlight .featherlight-inner{display:block}.featherlight link.featherlight-inner,.featherlight script.featherlight-inner,.featherlight style.featherlight-inner{display:none}.featherlight .featherlight-close-icon{position:absolute;z-index:9999;top:0;right:0;line-height:25px;width:25px;cursor:pointer;text-align:center;font-family:Arial,sans-serif;background:#fff;background:rgba(255,255,255,.3);color:#000;border:0;padding:0}.featherlight .featherlight-close-icon::-moz-focus-inner{border:0;padding:0}.featherlight .featherlight-image{width:100%}.featherlight-iframe .featherlight-content{border-bottom:0;padding:0;-webkit-overflow-scrolling:touch}.featherlight iframe{border:0}.featherlight *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}@media only screen and (max-width:1024px){.featherlight .featherlight-content{margin-left:0;margin-right:0;max-height:98%;padding:10px 10px 0;border-bottom:10px solid transparent}}@media print{html.with-featherlight>*>:not(.featherlight){display:none}}

Ahora localiza </body> y antes de esto coloca:
<b:if cond='data:view.isPost or data:view.isPage'>
<script src="//cdn.rawgit.com/noelboss/featherlight/1.7.13/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script>
<script>
// Activación de Featherlight.js mediante comparación entre src y href, por ANMATT Studio
//<![CDATA[
$(document).ready(function(){$(".post-body img").attr("src")==$(".post-body a").attr("href")&&$(".post-body img").parent().featherlight({targetAttr:"href"})});
//]]>
</script>
</b:if>

El último script es una activación automática que he desarrollado en Jquery y que solamente funcionará si el enlace de la imagen coincide con su alojamiento y está dentro del cuerpo del post. Featherlight está escrito también en Jquery, por lo que es imprescidible hacer uso de esta librería. Existen otras galerías que se pueden trabajar con Vanilla JS, escríbeme y hacemos los ajustes que tu tema requiera.



3. Si tu plantilla de terceros invalida Lightbox

Me encantaría decir que es algo fácil de solucionar mediante un tutorial, pero no. Y esto debido a que según cómo fue construida la plantilla, la activación de Lightbox y su correcto funcionamiento puede variar.

Para empezar, hay tres requerimientos para Lightbox en Blogger:
  • Sólo funciona dentro del gadget Blog1.
  • La etiqueta que rodea el cuerpo del post debe tener la clase post-body.
  • La imagen en cuestión debe tener un enlace hacia su propio alojamiento.

Con esto en mente, revisa minuciosamente tu tema y haz los cambios pertinentes. Si lo deseas, puedo encargarme de este menester y ajustar cuidadosamente todo a tu gusto, estoy a un correo de distancia y en pocas horas todo funcionará como lo deseas.




---


Sea cual sea el sistema que uses, si el oficial de Blogger o uno personalizado como Featherlight, lo importante es tener un Lightbox funcional y evitar así aumentar el Bounce Rate de tus analíticas, a la vez de ofrecer una experiencia más agradable a los lectores; o al menos, evitar que las imágenes contengan enlace a su propio almacenamiento.




yo, cyball

Escrito por Cyball Ruiz

Creadora de ANMATT Studio, donde encuentras recursos y consejos para tu espacio en Blogger.

SEGUIR




Facebook icon Email icon Twitter icon Messenger icon WhatsApp icon Telegram icon


Otros artículos...



    Si tienes dudas u observaciones, puedes comentarlas.

    /* ¡No dejes spam! */

    Para poder comentar es necesario que cuentes con una cuenta Google, ya que esto implica que de antemano has aceptado la gestión de tus datos personales por parte de Google LLC, propietario de Blogger. En este caso, el envío del comentario es una aceptación explícita e inequívoca de la gestión tanto de tus datos como del comentario mismo para uso de ANMATT Studio. La finalidad de la recogida de los datos, además de permitir mostrar tu comentario, es para poder responderte por este medio.
    Consulta más información en > Legalidades.