AlferSoft Blog

jQuery Lightbox ist eine großartige Plugin in der bekannten inspiriert LightboxJS von Lokesh Dhakar.

Nach dem Start mit mir klar, dass es Dinge unordentlich mit großen Bildern wurde, so machte ich eine kleine Modifikation, um die Bildgröße auf die aktuelle Größe des Browserfensters zu begrenzen.

Auch ich wurde eine Option hinzugefügt, um die Bildinformationen zu verstecken. Die Bilder verwendet werden, um zwischen den Bildern navigieren, und schließen Sie das Vorschaufenster sind in Englisch, so dass ich die Bilder verändert zu sein, neutral (nur Icons)

Code
Zwei neue Optionen wurden hinzugefügt:

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