#c# #cloud #css #docker #git #javascript #linux #php #python #sql
Eaf lightbox. Lightbox que se ajusta al tamaño de la ventana

Hay muchos lightbox en internet. Uno muy bueno y que utilizo es prettyPhoto. El problema y creo que único defecto de este es que las imagenes de dimensiones mayores al tamaño de la ventana del browser, ya sea firefox, internet explorer (IE), opera, chrome etc. Esta se presenta en un tamaño muy pequeño y si la redimensionas a su tamaño real se sale de la ventana. Es por esto y porque no consegui ninguno que se autoajustara de forma proporcionada en la pantalla. Decidí crear mi propio lightbox. (eaf_lightbox)
Para ver eaf_lightbox en ejecución haz click aquí. Para descargar eaf_lightbox haz click aquí.
El código:

//VARIABLES GLOBALES
var G_isLightboxCreado = false;
var G_arImagenCargada = new Array();
var G_eArAnchors = new Array();

//Esta variable se encarga de guardar la url de la imagen que se esta viendo
//y sus dimensiones, porque cuando se reedimensione la ventana se usaran estos datos
//para recalcularla
G_arImagenCargada.url = "";
G_arImagenCargada.ancho = 0;
G_arImagenCargada.alto = 0;

//Seleccionar o deseleccionar todo
$(document).ready
(
    function()
    {  
        //Asigno onclick a los anchors
        crear_evento_hrefs();
    }//fin argumento function()
);//Fin .ready()


window.onresize = function ()
{
    if(G_isLightboxCreado)
    {
        redimensionar_ventana();
    }
}

function redimensionar_ventana()
{
    //Elimino el fondo
    oDivFondo = $(&rsquo;#divFondo&rsquo;); 
    oDivFondo.remove();
    //Lo creo nuevamente segun los calculos
    crear_div_fondo();
    
    oVentana = $(window);
    iAnchoVentana = oVentana.width();
    iAltoVentana = oVentana.height();  
    //Obtengo el tamaño real de la imagen cargada
    iAnchoImagen = G_arImagenCargada.ancho;
    iAltoImagen = G_arImagenCargada.alto;

    iProporcion = get_porcentaje(iAnchoImagen,iAltoImagen,iAnchoVentana,iAltoVentana);
    iAnchoImagen = (iAnchoImagen * iProporcion);
    iAltoImagen = (iAltoImagen * iProporcion);
    //Fix para la altura, siempre se sale y crea scroll
    iAltoImagen --;
    arCoord = get_centrado(iAnchoVentana,iAltoVentana,iAnchoImagen, iAltoImagen);
    
    oImagen = $(&rsquo;#imgImagen&rsquo;);
    oImagen.width(iAnchoImagen);
    oImagen.height(iAltoImagen);
    
    //Actualizo las coordenadas del div    
    oDivImagen = $(&rsquo;#divImagen&rsquo;);
    iScrollTop = oVentana.scrollTop();   
    oDivImagen.css(&rsquo;top&rsquo;,arCoord[&rsquo;y&rsquo;] + iScrollTop);
    oDivImagen.css(&rsquo;left&rsquo;,arCoord[&rsquo;x&rsquo;]);
}

function get_porcentaje(iAnchoImagen, iAltoImagen, iAnchoVentana, iAltoVentana)
{
    //alert("get_porcentaje");
    iProporcion = 1;
    
    if(iAltoImagen > iAltoVentana && iAnchoImagen <= iAnchoVentana)
    {
        iProporcion = iAltoVentana / iAltoImagen;
    }
    else if(iAltoImagen <= iAltoVentana && iAnchoImagen > iAnchoVentana)
    {
        iProporcion = iAnchoVentana / iAnchoImagen;
    }
    else if(iAltoImagen > iAltoVentana && iAnchoImagen > iAnchoVentana)
    {
        iProporcionAlto = iAltoVentana / iAltoImagen;
        iProporcionAncho = iAnchoVentana / iAnchoImagen;
        
        if(iProporcionAlto < iProporcionAncho)
        {
            iProporcion = iProporcionAlto;
        }
        else
        {
            iProporcion = iProporcionAncho;  
        }
    }
    
    return iProporcion;
}

function crear_evento_hrefs()
{
    //Bug con jquery en IE con .attr(&rsquo;rel&rsquo;);
    G_eArAnchors = get_anchors_by_rel("eafbox");
    
    $.each
    (
        G_eArAnchors,
        function(index, anchor)
        {
            //alert(eAnchor);
            oAnchor = $(anchor);
            oAnchor.bind
            (  
                "click", 
                function(e) 
                {
                    
                    sUrlImagen = $(this).attr(&rsquo;href&rsquo;);
                    crear_eaf_lightbox(sUrlImagen);
                    e.stopPropagation();
                    return false;
                }
            );
        }
    );

}


function crear_eaf_lightbox(sUrlImg)
{
    //Tamaño de la imagen
    var arImagen = new Array();
    var arCoord = new Array();
    //Se actualiza la global por si se redimensiona despues
    G_arImagenCargada.url = sUrlImg;

    //Creamos el contenedor mas grande #divLightbox
    crear_div_lightbox(); 

    //Creamos el fondo negro con opacidad #divFondo  
    crear_div_fondo(); 
    
    oVentana = $(window);
    iAnchoVentana = oVentana.width();
    iAltoVentana = oVentana.height();

    //Crea el div ocntenedor para la imagen #divImagen
    crear_div_imagen();
    
    //24 tamaño del gif en el loader
    arCoord = get_centrado(iAnchoVentana, iAltoVentana, 24, 24);
    //alert(arCoord[&rsquo;x&rsquo;]+" "+arCoord[&rsquo;y&rsquo;]);
    crear_div_preload(arCoord[&rsquo;x&rsquo;],arCoord[&rsquo;y&rsquo;]);
    
    eImg = new Image();
    oImagen = $(eImg);
    oImagen.attr(&rsquo;id&rsquo;,&rsquo;imgImagen&rsquo;);
    oImagen
    // once the image has loaded, execute this code

      .hide() //Hide it
      //call makes sure .load() only fires once
	  .one  
      (
        &rsquo;load&rsquo;,
        function() 
        {
            //Set something to run when it finishes loading
            iAnchoImagen = G_arImagenCargada.ancho = this.width;
            iAltoImagen = G_arImagenCargada.alto = this.height;
            //alert(iAnchoVentana);
            iProporcion = get_porcentaje(iAnchoImagen,iAltoImagen,iAnchoVentana,iAltoVentana);
            iAnchoImagen = (iAnchoImagen * iProporcion);
            iAltoImagen = (iAltoImagen * iProporcion);
            //Fix para la altura, siempre se sale y crea scroll
            iAltoImagen --;
            arCoord = get_centrado(iAnchoVentana,iAltoVentana,iAnchoImagen, iAltoImagen);
            
            oImagen.width(iAnchoImagen);
            oImagen.height(iAltoImagen);

            oDivImagen = $(&rsquo;#divImagen&rsquo;);
            iScrollTop = oVentana.scrollTop();
            oDivImagen.css(&rsquo;top&rsquo;,arCoord[&rsquo;y&rsquo;] + iScrollTop );
            oDivImagen.css(&rsquo;left&rsquo;,arCoord[&rsquo;x&rsquo;]);

            oDivPreload.remove();
            oDivImagen.append(oImagen);
            oImagen.fadeIn();
            //Indico que se ha creado el lightbox
            G_isLightboxCreado = true;
        }
      )
      .attr(&rsquo;src&rsquo;, sUrlImg) //Set the source so it begins fetching
      .each
      (
        function()
        {
            //Cache fix for browsers that don&rsquo;t trigger .load()
            if(this.complete)
            {
                $(this).trigger("load");
            }
        }
      )
      //Elimino el lightbox cuando hago click en la imagen
      .bind
      (
        &rsquo;click&rsquo;,
        function()
        {
            eliminar_lightbox();
        }
      );
}

function crear_div_fondo() 
{
    oVentana = $(window);
    oBody = $(&rsquo;body&rsquo;);
    
    iAnchoBody = oBody.width();
    iAltoBody = oBody.height();

    iAnchoDiv = oVentana.width();
    iAltoDiv = oVentana.height();
    
    if(iAnchoBody > iAnchoDiv)
    {
        iAnchoDiv = iAnchoBody;
    }
    
    if(iAltoBody > iAltoDiv)
    {
        iAltoDiv = iAltoBody;
    }
        
    eDivFondo = document.createElement("div");
    oDivFondo = $(eDivFondo);
    oDivFondo.attr(&rsquo;id&rsquo;,&rsquo;divFondo&rsquo;);
    oDivFondo.width(iAnchoDiv);
    //iY = oVentana.scrollTop(); 
    oDivFondo.height(iAltoDiv);
    
    //Contenedor principal
    oDivLigthbox = $(&rsquo;#divLightbox&rsquo;);    
    oDivLigthbox.append(oDivFondo);
    
    oDivFondo.fadeIn();
    oDivFondo.bind
    (
        &rsquo;click&rsquo;,
        function()
        {
            eliminar_lightbox();
        }
    );
}  

function crear_div_preload(iPosX,iPosY) 
{

    eDivPreload = document.createElement("div");
    oDivPreload = $(eDivPreload);
    oDivPreload.attr(&rsquo;id&rsquo;,&rsquo;divPreload&rsquo;);
    
    oVentana = $(window);
    iScrollTop = oVentana.scrollTop();      
    oDivPreload.css(&rsquo;top&rsquo;,iPosY + iScrollTop);
    oDivPreload.css(&rsquo;left&rsquo;,iPosX);
    //Contenedor principal
    oDivLigthbox = $(&rsquo;#divLightbox&rsquo;);    
    oDivLigthbox.append(oDivPreload);
} 

function crear_div_imagen() 
{
    eDivImagen = document.createElement("div");
    oDivImagen = $(eDivImagen);
    oDivImagen.attr(&rsquo;id&rsquo;,&rsquo;divImagen&rsquo;);
    oDivImagen.css(&rsquo;display&rsquo;,&rsquo;hidden&rsquo;);
    //Contenedor principal
    oDivLigthbox = $(&rsquo;#divLightbox&rsquo;);    
    oDivLigthbox.append(oDivImagen); 
} 


function get_centrado(iContAncho, iContAlto, iAncho, iAlto)
{
    arCoord = new Array();
    arCoord[&rsquo;x&rsquo;] = 0;
    arCoord[&rsquo;y&rsquo;] = 0;
    
    arCoord[&rsquo;x&rsquo;] = ((iContAncho - iAncho)/2);
    arCoord[&rsquo;y&rsquo;] = ((iContAlto - iAlto)/2);
    
    return arCoord;
}

function describir_objeto(eObjeto)
{
    sObjeto = &rsquo;&rsquo;; 
    for (sPropiedad in eObjeto)
    {
        sObjeto += "oAnchor["+sPropiedad +"] = "+this[sPropiedad];
        sObjeto += "\n<br/>"; 
    }
    //alert(sObjeto);  
    document.write(sObjeto);    
}

//Hecho con javascript puro porque no funciona 
//con jQuery
function get_anchors_by_rel(sReltext)
{
    G_eArAnchors = document.getElementsByTagName("a");
    eArAnchorFound = [];
    for (i = 0; i < G_eArAnchors.length; i++) 
    {
        if( G_eArAnchors[i].hasAttribute("rel") && G_eArAnchors[i].rel == sReltext ) 
        {
            eArAnchorFound.push(G_eArAnchors[i]);
        }
    }
    return eArAnchorFound;
}

function crear_div_lightbox()
{
    eBody = document.body;
    oBody = $(eBody);
    oBody.append(&rsquo;<div id="divLightbox"></div>&rsquo;);
}

function eliminar_lightbox()
{
    $(&rsquo;#omgImagen&rsquo;).remove();
    $(&rsquo;#divImagen&rsquo;).remove();
    $(&rsquo;#divFondo&rsquo;).remove();
    $(&rsquo;#divLightbox&rsquo;).remove();             
    G_isLightboxCreado = false;
}
Autor: Eduardo A. F.
Publicado: 27-02-2011 22:11
Actualizado: 10-06-2012 17:55
#c# #cloud #css #docker #git #javascript #linux #php #python #sql