Blog AlferSoft

caja de luz jQuery es un plugin muy inspirado en el conocido JS mesa de luz de Lokesh Dhakar.

Después de comenzar a usarlo me di cuenta de que las cosas se convirtió en sucio con imágenes grandes, así que hice una pequeña modificación para limitar el tamaño de la imagen al tamaño de la ventana del navegador actual.

También he añadido una opción para ocultar la información de la imagen. Las imágenes utilizadas para navegar entre las imágenes y cerca de la vista previa en Inglés, así que he modificado las imágenes para ser más neutral (solo iconos)

Código
Dos nuevas opciones se han añadido:

fitToWindow: true,		// option to fit preview to window size if the
                                // image is too big
showInfo:    true		// option to show or hide image info

To fit the preview to the window size, I’ve replaced the call to _resize_container_image_box() with _adjust_image_size().

Here is the definition of the new function:

function _adjust_image_size(objImagePreloader) {
    // get image size
    var imgWidth = objImagePreloader.width;
    var imgHeight = objImagePreloader.height;

    var arrayPageSize = ___getPageSize();
    // calculate proportions
    var imageProportion = imgWidth / imgHeight;
    var winProportion = arrayPageSize[2] / arrayPageSize[3];
    if (imageProportion > winProportion) {
        // calculate max width base on page width
        var maxWidth = arrayPageSize[2] - (settings.containerBorderSize * 2) - (arrayPageSize[2] / 10);
        var maxHeight = Math.round(maxWidth / imageProportion);
    } else {
        // calculate max height base on page height
        var maxHeight = arrayPageSize[3] - (settings.containerBorderSize * 2) - (arrayPageSize[3] / 10) - 40;
        var maxWidth = Math.round(maxHeight * imageProportion);
    }
    if (imgWidth > maxWidth || imgHeight > maxHeight) {
        imgWidth = maxWidth;
        imgHeight = maxHeight;
    }
    $('#lightbox-image').attr('width', imgWidth);
    $('#lightbox-image').attr('height', imgHeight);
    _resize_container_image_box(imgWidth, imgHeight);
};

Finally, to optionally hide or show the image info, just canged the following line:

if ( settings.imageArray.length > 1 ) {

to:

if ( settings.showInfo && (settings.imageArray.length > 1) ) {

Download modified code here – jQuery lightBox 0.5 AlferSoft Mod