loading avec lightbox ! comment faire
Bonjour encore une fois moi : etant débutant ! je vouderai implemanté le fameux loading qui s'affiche quand je suis entrain de faire un traitement ( souvant je le fait avec du XMLHTTPREQUEST j'arrive a bidouilé une image dans un div et avec un show , block je le gère mais mon but c'est que ca soit jolie :) donc j'ai regarder partout et j'ai vu quelques chose du genre lightbox : j'ai un exemple qui marche mais avec un <a href... donc avec un click sur un liens il fait ce qu'on lui demande ( page noircisse puis loading image au milieu )
ce que je veut c'est que cela soit comme une fonction que je peut lancer quand je veut et non pas par un click sur un liens ainsi je peut le mettre dans
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
/// affiche le loading
showLoading();
xhr_obj.onreadystatechange = function()
{
if (xhr_obj.readyState == 4) {
document.getElementById("loading").style.display = "none";
if (xhr_obj.status ==200) {
{
/// Fini :)
hideLoading ()
}
}
else {
alert("Problem: " + xhr_obj.statusText);
}
}
} |
donc voila le ik c'est que je sait vraiement pas comment le faire , je file le code que j'ai probablement quelqu'un pourr trouvé la modification aproprié .
Merci
CSS :
Code:
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
|
body {
font-family:arial, helvetica, sans-serif;
}
#overlay{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:90;
background-color:#000;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
#overlay[id]{ /* IE6 and below Can't See This */
position:fixed;
}
.lightbox{
width:300px;
background:#ddd;
padding:10px;
border:2px solid #eee;
}
#close{
position:absolute;
top:-5px;
right:-5px;
cursor:pointer;
} |
Javascript
lightbox
Code:
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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
|
/*--------------------------------------------------------------------------*/
/* Lightbox
* This is a script for creating modal dialog windows (like the ones your operating
* system uses)
*
*/
var Lightbox = {
/* hideAll - closes all open lightbox windows */
hideAll: function(){
lboxes = document.getElementsByClassName('lbox')
lboxes.each(function(box){
Element.hide(box)
}
)
if ($('overlay')){
Element.remove('overlay');
}
}
}
Lightbox.base = Class.create();
Lightbox.base.prototype = {
initialize: function(element, options){
//start by hiding all lightboxes
Lightbox.hideAll();
this.element = $(element);
this.options = Object.extend({
lightboxClassName : 'lightbox',
closeOnOverlayClick : false,
externalControl : false
}, options || {} )
//create the overlay
new Insertion.Before(this.element, "<div id='overlay' style='display:none;'></div>");
Element.addClassName(this.element, this.options.lightboxClassName)
//also add a default lbox class to the lightbox div so we can find and close all lightboxes if we need to
Element.addClassName(this.element, 'lbox')
//Tip: make sure the path to the close.gif image below is correct for your setup
closer = '<img id="close" src="http://blog.feedmarker.com/wp-content/themes/feedmarker/lightbox/images/close.gif" alt="Close" title="Close this window" />'
//insert the closer image into the div
new Insertion.Top(this.element, closer);
Event.observe($('close'), 'click', this.hideBox.bindAsEventListener(this) );
if (this.options.closeOnOverlayClick){
Event.observe($('overlay'), 'click', this.hideBox.bindAsEventListener(this) );
}
if (this.options.externalControl){
Event.observe($(this.options.externalControl), 'click', this.hideBox.bindAsEventListener(this) );
}
this.showBox();
},
showBox : function(){
//show the overlay
Element.show('overlay');
//center the lightbox
this.center();
//show the lightbox
Element.show(this.element);
return false;
},
hideBox : function(evt){
Element.removeClassName(this.element, this.options.lightboxClassName)
Element.hide(this.element);
//remove the overlay element from the DOM completely
Element.remove('overlay');
return false;
},
center : function(){
var my_width = 0;
var my_height = 0;
if ( typeof( window.innerWidth ) == 'number' ){
my_width = window.innerWidth;
my_height = window.innerHeight;
}else if ( document.documentElement &&
( document.documentElement.clientWidth ||
document.documentElement.clientHeight ) ){
my_width = document.documentElement.clientWidth;
my_height = document.documentElement.clientHeight;
}
else if ( document.body &&
( document.body.clientWidth || document.body.clientHeight ) ){
my_width = document.body.clientWidth;
my_height = document.body.clientHeight;
}
this.element.style.position = 'absolute';
this.element.style.zIndex = 99;
var scrollY = 0;
if ( document.documentElement && document.documentElement.scrollTop ){
scrollY = document.documentElement.scrollTop;
}else if ( document.body && document.body.scrollTop ){
scrollY = document.body.scrollTop;
}else if ( window.pageYOffset ){
scrollY = window.pageYOffset;
}else if ( window.scrollY ){
scrollY = window.scrollY;
}
var elementDimensions = Element.getDimensions(this.element);
var setX = ( my_width - elementDimensions.width ) / 2;
var setY = ( my_height - elementDimensions.height ) / 2 + scrollY;
setX = ( setX < 0 ) ? 0 : setX;
setY = ( setY < 0 ) ? 0 : setY;
this.element.style.left = setX + "px";
this.element.style.top = setY + "px";
}
} |
merci pour l'aide !
