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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
|
var Lightbox = Class.create(Lightbox, {
initialize: function($super) {
$super();
(function() {
var initMarges = Math.round((document.viewport.getDimensions().width - parseInt(this.outerImageContainer.getStyle("width").replace(/px/,"")))/2)
this.outerImageContainer.setStyle({
marginLeft: + initMarges + "px",
marginRight: + initMarges + "px"
});
}).bind(this).defer();
},
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();
}
this.imageDataContainer.setStyle({
top: (-this.outerImageContainer.getHeight()) + "px",
height: (this.outerImageContainer.getHeight()) + "px",
left: this.outerImageContainer.getStyle("left")
})
var newMarges = Math.round((document.viewport.getDimensions().width - this.lightboxImage.getWidth() - this.imageDataContainer.getWidth())/2);
new Effect.Parallel(
[
new Effect.Move(this.imageDataContainer, { sync: true, duration: this.resizeDuration, mode:"absolute", x: this.imageDataContainer.getWidth(), y:-this.outerImageContainer.getHeight() }),
//new Effect.SlideDown(this.imageDataContainer, { sync: true, duration: this.resizeDuration, from: 0.0, to: 1.0 }),
new Effect.Appear(this.imageDataContainer, { sync: true, duration: this.resizeDuration }),
new Effect.Morph(this.outerImageContainer, {sync:true,style:"margin-left:" + newMarges + "px;" + "margin-right:" + newMarges + "px"})
],
{
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)
}
);
},
//
// resizeImageContainer()
//
resizeImageContainer: function(imgWidth, imgHeight) {
// get current width and height
var widthCurrent = this.outerImageContainer.getWidth();
var heightCurrent = this.outerImageContainer.getHeight();
// get new width and height
var widthNew = (imgWidth + LightboxOptions.borderSize * 2);
var heightNew = (imgHeight + LightboxOptions.borderSize * 2);
// scalars based on change from old to new
var xScale = (widthNew / widthCurrent) * 100;
var yScale = (heightNew / heightCurrent) * 100;
// calculate size difference between new and old image, and resize if necessary
var wDiff = widthCurrent - widthNew;
var hDiff = heightCurrent - heightNew;
if (hDiff != 0) new Effect.Scale(this.outerImageContainer, yScale, {scaleX: false, duration: this.resizeDuration, queue: 'front'});
// if (wDiff != 0) new Effect.Scale(this.outerImageContainer, xScale, {scaleY: false, duration: this.resizeDuration, delay: this.resizeDuration});
if (wDiff != 0) {
var newMarges = Math.round((document.viewport.getDimensions().width - widthNew/* - this.imageDataContainer.getWidth()*/)/2);
new Effect.Parallel([
new Effect.Scale(this.outerImageContainer, xScale, {sync:true, scaleY: false, duration: this.resizeDuration, delay: this.resizeDuration}),
new Effect.Morph(this.outerImageContainer, {sync:true,style:"margin-left:" + newMarges + "px;" + "margin-right:" + newMarges + "px"})
]);
}
// if new and old image are same size and no scaling transition is necessary,
// do a quick pause to prevent image flicker.
var timeout = 0;
if ((hDiff == 0) && (wDiff == 0)){
timeout = 100;
if (Prototype.Browser.IE) timeout = 250;
}
(function(){
this.prevLink.setStyle({ height: imgHeight + 'px' });
this.nextLink.setStyle({ height: imgHeight + 'px' });
//this.imageDataContainer.setStyle({ width: widthNew + 'px' });
this.showImage();
}).bind(this).delay(timeout / 1000);
}
}); |
Personnaliser la lightbox (aide JS)
Répondre avec citation
Envoyé par xerel
)
Partager