AurumLightBox: LightBox sin plugins

lightbox_iconEl efecto LightBox en las imágenes de una web o blog permite ver las imágenes en un mayor tamaño sin necesidad de abrir una pestaña o ventana nueva obligando así al usuario a abandonar la página actual.

He estado buscando un efecto LightBox para WordPress, pero ninguno de los que he encontrado me satisfacía totalmente. Lo que yo quería era algo sencillo y ligero. Al final he acabado escribiendo mi propio script. Lo he bautizado AurumLightBox, muy ocurrente, lo sé, je je. Está escrito íntegramente en Javascript y para que veáis cómo funciona os dejo a continuación un par de imágenes con tamaños y orientaciones diferentes sobre las que podéis hacer click.

aurumlightbox_paisaje1

aurumlightbox_paisaje2

 

 

Como podéis comprobar, el script cambia el puntero del ratón a modo “pointer” y al hacer click sobre una imagen la abre hasta un tamaño máximo del 90% de alto o de ancho, dependiendo de la orientaciñon de la imagen. Además, a diferencia de algunos plugins para WordPress, funciona con imágenes enlazadas externamente. Para cerrar la vista de imagen basta con hacer click en cualquier parte de la pantalla. Vaya sencillo, sencillo… Ahora os dejo el script. Basta con copiarlo en un widget de texto y ubicar éste al final del footer.

//AurumLightBox - LightBox effect for blog or web
//By Aurumque
function aurumlightbox(){
    var list = document.getElementsByTagName('article')[0].getElementsByClassName('entry-content')[0].getElementsByTagName("img");
    for(i=0;i<list.length;i++){
      list[i].style.cursor = 'pointer';
      list[i].setAttribute('onclick','zoomImg(this)');
      list[i].style.borderRadius = '3px';
      list[i].addEventListener('mouseover',function(){this.style.opacity = '0.8';});
      list[i].addEventListener('mouseout',function(){this.style.opacity = '1';});
    }
}
function zoomImg(elm){
  var c = document.createElement('div');
    c.style.position = 'fixed';
    c.style.top = '0';
    c.style.left = '0';
    c.style.width = '100%';
    c.style.height = '100%';
    c.style.background = 'rgba(0,0,0,0.8)';
    c.style.opacity = '0';
    c.style.display = 'table';
    c.style.zIndex = '1000';
    c.setAttribute('id','zoomImg');
    c.setAttribute('onclick','removeImg()');
  
  var p = document.createElement('div');
    p.style.top = '0';
    p.style.left = '0';
    p.style.width = '100%';
    p.style.height = '100%';
    p.style.display = 'table-cell';
    p.style.textAlign = 'center';
    p.style.verticalAlign = 'middle';

  var f = document.createElement('img');
    f.src = elm.src;
    f.style.boxShadow = '0 0 15px #000';
    f.style.background = '#fff';
    f.style.borderRadius = '3px';

  var w = f.width;
  var h = f.height;
  var maxW = window.innerWidth;
  var maxH = window.innerHeight;

  if((w>h) && (w>(maxW * 0.9))){f.style.width = (maxW * 0.9)+'px';}
  else if(h>(maxH * 0.9)){f.style.height = (maxH * 0.9)+'px';}
    
  var m = document.createElement('div');
    m.style.position = 'absolute';
    m.style.top = '0';
    m.style.left = '0';
    m.style.width = '100%';
    m.style.textAlign = 'center';
    m.style.fontFamily = 'Sans';
    m.style.fontStyle = 'italic';
    m.style.fontSize = '12px';
    m.style.color = '#fff';
    m.innerHTML = 'Click anywhere to close';
  
  c.appendChild(p);
  c.appendChild(m);
  p.appendChild(f);
  
  document.getElementsByTagName("body")[0].appendChild(c);
    var opa = 0;
    var opaInt = setInterval(function(){
      if(opa > 1) clearInterval(opaInt);
      c.style.opacity = opa;
      opa += 0.2;
    },50);
      
}

function removeImg(){
  var parent = document.getElementsByTagName("body")[0];
  var child = document.getElementById("zoomImg");
  parent.removeChild(child);
}

 

 

Importante:

Yo quería que el script funcionase con las imágenes contenidas en la sección “primary” (las que están en el div con id “primary”). Si quieres que funcione con todas la imágenes de tu blog o web, sustituye la segunda línea por ésta:

var list = document.getElementsByTagName("body")[0].getElementsByTagName("img");

A mi me basta tal y como está, pero si os interesa algo un poquito más elaborado y con algún efecto más, podéis pedirlo en los comentarios y me pongo a ello.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *