Blog AlferSoft

LightBox jQuery è un ottimo plugin ispirata al famoso Lightbox JS da Lokesh Dhakar.

Dopo aver iniziato ad usarlo mi sono reso conto che le cose si disordinato, con grandi immagini, così ho fatto una piccola modifica per limitare le dimensioni dell'immagine alle dimensioni della finestra corrente del browser.

Inoltre ho aggiunto una opzione per nascondere le informazioni sull'immagine. Le immagini usate per navigare tra le immagini e chiudere l'anteprima sono in inglese, così ho modificato le immagini per essere più neutro (solo icone)

Codice
Due nuove opzioni sono state aggiunte:

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