Discussion :

[xerel]

Bonjour, je veux personnaliser la lightbox alors j'ai commencé a faire quelques modifs sur le script lightbox ainsi que le css, maintenant j'aimerais que l'imageDataContainer ( la zone de texte) n'apparaisse pas en bas de l'image, mais sur la droite toujours avec le même effet d'apparition.

J'ai trouvé l'effet SlideRightIn qu'il me faut ici http://scriptaculous.jakewendt.com/effects.html#

J'ai récuperé le javascript qui correspond :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
/* from SlideDown */
Effect.SlideRightIn = function(element) {
/*
	SlideRightIn needs to have the content of the element wrapped in a container element with fixed width!
*/
	element = $(element).cleanWhitespace();
	var elementDimensions = element.getDimensions();
	return new Effect.Scale(element, 100, 
		Object.extend({ 
			scaleContent: false, 
			scaleY: false, 
			scaleFrom: window.opera ? 0 : 1,
			scaleMode: {originalHeight: elementDimensions.height, originalWidth: elementDimensions.width},
			restoreAfterFinish: true,
			afterSetup: function(effect) {
				effect.element.makePositioned();
				effect.element.down().makePositioned();
				if(window.opera) effect.element.setStyle({left: ''});
				effect.element.makeClipping().setStyle({width: '0px'}).show(); 
			},
			afterUpdateInternal: function(effect) {
				effect.element.down().setStyle({right: (effect.dims[1] - effect.element.clientWidth) + 'px' }); 
			},
			afterFinishInternal: function(effect) {
				effect.element.undoClipping().undoPositioned();
				effect.element.down().undoPositioned();
			}
		}, arguments[1] || {})
	);
}
 
 
 
 
Effect.SlideUp = function(element) {
  element = $(element).cleanWhitespace();
  var oldInnerBottom = element.down().getStyle('bottom');
  var elementDimensions = element.getDimensions();
  return new Effect.Scale(element, window.opera ? 0 : 1,
   Object.extend({ scaleContent: false, 
    scaleX: false, 
    scaleMode: 'box',
    scaleFrom: 100,
    scaleMode: {originalHeight: elementDimensions.height, originalWidth: elementDimensions.width},
    restoreAfterFinish: true,
    afterSetup: function(effect) {
      effect.element.makePositioned();
      effect.element.down().makePositioned();
      if (window.opera) effect.element.setStyle({top: ''});
      effect.element.makeClipping().show();
    },  
    afterUpdateInternal: function(effect) {
      effect.element.down().setStyle({bottom:
        (effect.dims[0] - effect.element.clientHeight) + 'px' });
    },
    afterFinishInternal: function(effect) {
      effect.element.hide().undoClipping().undoPositioned();
      effect.element.down().undoPositioned().setStyle({bottom: oldInnerBottom});
    }
   }, arguments[1] || { })
  );
};

Lightbox, est construit a partir de la bibliothèque protoype.js et les effets de scriptaculous

La ligne correspondant a mon problème se situe ligne 341 dans lightbox.js et 682 dans effects.js

Je voudrais remplacé le SlideDown par un SlideRightIn, sauf qu'en replaçant le code récuperé, rien ne se passe, si quelqu'un pouvait m'aider

Merci

[xerel]

Je n'est pas dit que c'était des lignes d'erreur et je ne peux pas vous balancer les script effect.js et lightbox.js qui sont bien trop long, en revanche il sont téléchargeable ici http://www.huddletogether.com/projec...box2/#download . Ce sont simplement les lignes auxquels j'ai besoin d'apporter des modifs.

L'effet d'origine est le SlideDown pour la lightbox. Cet effet est réalisé a partir des effets scriptaculous qui sont contenu dans le fichiers effect.js
Et pour celui ci la hauteur est déja fixe puisque c'est l'effet d'origine et qu'il fonctionne.

J'ai récuperé ici http://scriptaculous.jakewendt.com/effects.html le code de l'effet SlideRightIn qui est dans mon 1er message.

Et je voudrais remplacer, le slideDown par le slideRightIn pour que la zone de texte défile sur la droite de l'image et non en dessous.

Si besoin d'autres élément ne pas hésité a me le dire

[gwyohm]

L'effet d'origine est le SlideDown pour la lightbox. Cet effet est réalisé a partir des effets scriptaculous qui sont contenu dans le fichiers effect.js
Et pour celui ci la hauteur est déja fixe puisque c'est l'effet d'origine et qu'il fonctionne.

Oui mais dans ton premier message, il est indiqué dans le code que la largeur du conteneur de l'élément sur lequel on applique l'effet doit être fixe

SlideRightIn needs to have the content of the element wrapped in a container element with fixed width!

[xerel]

Merci de me l'avoir signalé, je ne l'avais même pas vu, mais ça m'avance pas beaucoup, du moins je n'arrive pas à faire quelque chose avec ça...

[gwyohm]

Je te déconseille de modifier effects.js de scriptaculous. La définition d'un nouvel effet peut être faite ailleurs après l'inclusion de scriptaculous. Créé donc un js myeffects.js contenant uniquement le code de ton nouvel effet (en attendant que tu étoffes encore cette bibliothèque )

De même, si tu utilises prototype dans une version >= 1.6, tu peux créer une classe qui hérite de lightbox pour redéfinir la méthode updateDetails:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
var MyLightbox = Class.create(Lightbox, {
      updateDetails: function() {
        // if caption is not null
        if (this.imageArray[this.activeImage][1] != ""){
            this.caption.update(this.imageArray[this.activeImage][1]).show();
        }
        // if image is part of set display 'Image x of x' 
        if (this.imageArray.length > 1){
            this.numberDisplay.update( LightboxOptions.labelImage + ' ' + (this.activeImage + 1) + ' ' + LightboxOptions.labelOf + '  ' + this.imageArray.length).show();
        }
 
        new Effect.Parallel(
            [ 
                new Effect.SlideRightIn(this.imageDataContainer, { sync: true, duration: this.resizeDuration, from: 0.0, to: 1.0 }), 
                new Effect.Appear(this.imageDataContainer, { sync: true, duration: this.resizeDuration }) 
            ], 
            { 
                duration: this.resizeDuration, 
                afterFinish: (function() {
	                // update overlay size and update nav
	                var arrayPageSize = this.getPageSize();
	                this.overlay.setStyle({ height: arrayPageSize[1] + 'px' });
	                this.updateNav();
                }).bind(this)
            } 
        );
    }
});

Tout ceci te permettra de faciliter les montées en version des librairies...

Enfin, montre nous comment tu as changé updateDetails (quelle que soit la méthode de surcharge que tu utilises)

[xerel]

J'utilise effectivement protoype en version > 1.6

J'ai fait comme tu m'a dit l'insertion du code dans un nouveau .js
En faite j'avais juste copié colle le SlideRightIn dans le fichier effect.js
Au niveau du updateDetails, c'est celui d'origine car je n'ai rien changer au final vu que lorsque je changais new Effect.SlideDown par new Effect.SlideRightIn, je n'avais pas l'effet désiré, en effet la zone de texte restait toujours en bas, juste l'effet d'apparition diffère.
Je ne sais pas ou apporter les mofifs. Du coup je me retrouve au point mort, j'ai réellement besoin d'aide...

Maintenant que j'ai mon effet SlideRightIn dans mon fichier myeffect.js, comment le mettre en lien avec le fichier lightbox.js comme l'est le fichier effect.js ??
Et qu'est ce que m'apporte la creation d'une classe ? je ne peux pas changer directement l'updateDetails ?