Le script LightBox permet de faire un effet de zoom dans une galerie photo

J’ai eu l’occasion de jeter un oeil dans le code pour le personnaliser, voici donc quelques trucs qui sont facilement modifiables et qui n’ont pas à ma connaissance “d’effets secondaires”.

Dans le fichier lightbox.js

function start()

    //    start()

    //    Display overlay and lightbox. If image is part of a set, add siblings to imageArray.

    start: function(imageLink) {

    hideSelectBoxes();

    // stretch overlay to fill page and fade in

    var arrayPageSize = getPageSize();

    Element.setHeight('overlay', arrayPageSize[1]);

    new Effect.Appear('overlay', { duration: 0.2, from: 0.0, to: 0.8 });

Que pouvons-nous changer ?

Faire varier la duration sur la 3eme ligne –> rendre le fond plus sombre plus ou moins rapidement

0.0 instantané
0.5 moyen
0.9 lent

faire varier le from: et le to: –> permet de faire varier le fondu

0.0 blanc
0.8 noir 80%

Configuration

    //    Configuration

    var fileLoadingImage = "../images/lightbox/loading.gif";

    var fileBottomNavCloseImage = "../images/lightbox/closelabel.gif";

    var resizeSpeed = 1;    // controls the speed of the image resizing   (1=slowest and 10=fastest)

    var borderSize = 10;    //if you adjust the padding in the CSS, you will need to update this variable

Que pouvons-nous changer ?

modifier les images de chargement et de fermerture du lightbox

faire varier la vitesse de chargement
faire varier la taille de la bordure : attention implique souvent une mise à jour du css,
il semble que l’image soit en valign=”top”
Les images de navigation (previous et next) sont dans la feuille de style

La taille du lightbox s’adapte à la taille de l’image, meme si l’image est plus grande que votre ecran.
Dans ce dernier cas, les scrolls bars apparaissent sur les côtés.

UpdateDetails

    //    updateDetails()

    //    Display caption, image number, and bottom nav.

    //

    updateDetails: function() {

    Element.show('caption');

    Element.setInnerHTML( 'caption', imageArray[activeImage][1]);

    // if image is part of set display 'Image x of x'

    if(imageArray.length > 1){

        Element.show('numberDisplay');

        Element.setInnerHTML( 'numberDisplay', "Image " + eval(activeImage + 1) + " of " + imageArray.length);

    }

    new Effect.Parallel(

        [ new Effect.SlideDown( 'imageDataContainer', { sync: true, duration: resizeDuration + 0.25, from: 0.0, to: 1.0 }),

          new Effect.Appear('imageDataContainer', { sync: true, duration: 1.0 }) ],

        { duration: 0.65, afterFinish: function() { myLightbox.updateNav();} }

    );

    },

Que pouvons-nous changer ?

la premiere partie fait afficher le title du href. (defini dans la fonction start)

la deuxieme partie permet d’ajouter un texte dans un element html défini au préalable
Ils sont definis dans la function Initialize
exemple :

dans la fct initialize ajout de

    //Ajout TEST

    var objCaption = document.createElement("span");

    objCaption.setAttribute('id','testMag');

    objImageDetails.appendChild(objCaption);

dans la fct updateDetails ajout de

    Element.show('testMag');

    Element.setInnerHTML( 'testMag', "Coucou ! ");

la troisieme partie permet de gerer un effet pour l’affichage de la bar de nav (image 1 de 4 et bouton fermer)

    Effect.Appear('imageDataContainer', { sync: true, duration: 1.0 }) ],

            { duration: 0.65, afterFinish: function() { myLightbox.updateNav();} }

si on met 0.0 ça sera automatique : pas de fondu

Ajout d’une donnée provenant de notre objet Image

    //on met le texte de l'image dans un des attributs du <a ></a> (ici shape)

    < a href="{$BASE}/{$urlImage}" {if $lightbox eq '1'}

    rel="lightbox[{$objetCourant.$titreLang}]" {/if}

    title="{$imageCourante.$titreLang}"

    shape="{$imageCourante.$texteLang}">

    //on récupère cette info dans le tableau des images dans le lightbox.js

    imageArray.push(new Array(anchor.getAttribute('href'),  anchor.getAttribute('title'), anchor.getAttribute('shape')));

    //On affiche cette info dans un span (au préalable défini)

    Element.show('texte');

    Element.setInnerHTML( 'texte', "<br />" + imageArray[activeImage][2]);

imageArray[activeImage][0] l’url de l’image
imageArray[activeImage][1] le title de l’image
imageArray[activeImage][2] le texte de l’image

KeyboardAction

    //

    //    keyboardAction()

    //

    keyboardAction: function(e) {

    if (e == null) { // ie

        keycode = event.keyCode;

        } else { // mozilla

            keycode = e.which;

        }

        key = String.fromCharCode(keycode).toLowerCase();

        if((key == 'x') || (key == 'o') || (key == 'c')){    // close lightbox

            myLightbox.end();

        } else if(key == 'p'){    // display previous image

            if(activeImage != 0){

                myLightbox.disableKeyboardNav();

                myLightbox.changeImage(activeImage - 1);

            }

        } else if(key == 'n'){    // display next image

            if(activeImage != (imageArray.length - 1)){

                myLightbox.disableKeyboardNav();

                myLightbox.changeImage(activeImage + 1);

            }

    }

},

Que pouvons-nous changer ?

permet de definir les touches claviers qui entrainent des actions
fermer, precedent et suivant
On peut activer ou désactiver cette option appelée dans la fonction updateNav();

    this.enableKeyboardNav();

J’ai intégré le script lightbox à une solutions de cms, il a été un peu modifié pour qu’il s’adapte aux besoins demandés

Cet article présente les modifications apportées et les autres choses etudiées (facilement modifiables)

Si vous avez des questions, n’hésitez pas !