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 usar el siguiente script que has de agregar desde la Edición HTML:
<b:if cond='data:view.isPost or data:view.isPage'>
<script>
// Evitar imagenes con enlace hacia su alojamiento por ANMATT Studio
$(document).ready(function(){$("#Blog1 a[href*='blogspot']:has(img)").css({cursor:"default","pointer-events":"none","-webkit-user-select":"none","-khtml-user-select":"none","-moz-user-select":"none","-o-user-select":"none","user-select":"none"}).click(function(){return!1})});</script>
</b:if>

Este pequeño script evitará que las imagenes rodeadas con enlaces hacia su alojamiento en Blogger sean clickables. Si usas imagenes dentro del post para enlazar hacia otra url (cómo un post patrocinado por ejemplo) el script no le afectará.


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 y que solamente funcionará si el enlace de la imagen coincide con su alojamiento y está dentro del cuerpo del post.


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.


Los scripts aquí compartidos requieren Jquery para su funcionamiento y deben ser colocados DESPUÉS de éste.

- - -

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.






Otros artículos...