Personnalisation de LightBox

Posted On 4 juin 2007

Filed under Tests

Comments Dropped 7 responses

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 !

Publicités

7 Responses to “Personnalisation de LightBox”

  1. Sam

    Excellent article mais petite question as-tu réussi à adapter l’image à l’écran?? explication, je maîtrise pas le format d’image affiché car elles proviennent de scan réalisé par le client.
    Je vais refaire des tests mais je le sens pas trop…

  2. Jérôme

    Bonjour

    J’ai parcouru ton site et je suis tombé sur ton article.
    Il semblerait que tu saches rajouter un champs de texte dans la lightbox et cela m’intéresse.
    j’ai essayé de suivre tes conseils mais je ne comprend pas ce qu’il faut faire.

    Peux tu m’aider ?

    Merci

    J.

  3. Simon

    Bonjour,

    Petit complément 1 an après :

    Script similaire et moins buggé (sous IE6 par exemple) : http://www.digitalia.be/software/slimbox

    Site sur lequel télécharger les images des boutons en Français (utilisables pour slimbox et lightbox) : http://sauvez.dpi.googlepages.com/

    Bonne journée,

    Simon

  4. magaliemarion

    dommage que l’on doive installer aussi mootools, pour le faire fonctionner, si vous avez de grands besoins d’interactivité ok, ça sera réutilisable, c’est parfait, mais sinon ça fait 2 librairies, alors que Lightbox est plus « light »

  5. falk

    Peux t-on ajouter le like bouton facebook dans les « images lightbox »

    Merci

    • magaliemarion

      désolée, je n’ai jamais eu besoin d’essayer, cela doit dépendre, il existe aujourd’hui beaucoup de variantes de Lightbox, une d’entre elles doit le faire

      • Pascal Stifani

        Bonjour,

        Non, pour le moment, je n’ai absolument rien trouvé de tel. Ce qui est assez dommage 🙂

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s