loading avec lightbox ! comment faire

**spax** · 07/10/2008, 10h55

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 :

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
 
 
/// 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 :

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
 
 
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 :

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
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 !

**spax** · 07/10/2008, 11h27

voila finalement je fait un truc dans le genre :

Code :

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

1
2
 
load = new Lightbox.base(document.getElementById("loading")).showBox() ;

mais quand je fait par la suite :

Code :

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

1
2
 
load .hideBox() ;

j'ai une erreur comme quoi hideBox() c'est pas une fonction ??

**Bovino** · 07/10/2008, 11h57

Code :

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

load.hideBox() ;

**spax** · 07/10/2008, 14h00

c'est ce que javais fait désolé c'est en ecrivant ici que j'ai mis un espace " "

**spax** · 07/10/2008, 14h26

ce que je cherche c'est simplement pouvoir dire au div "loading de disparaitre j'ai tout essaié mais aparement je tombe toujours sur :

Lightbox.hideBox is not a function

**Bovino** · 07/10/2008, 14h51

Essaye peut-être

Code :

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

load.hideBox;

load est une variable globale ? Sinon, le show et le hide sont appelés dans la même fonction ? Il faut nous montrer le contexte !

**spax** · 07/10/2008, 14h57

je montre le tout

donc partie HTML : je crée mon div a afficher pendant le loading de la requet XMLHTTP REQUEST :

Code :

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

1
2
3
 
// div image + text 
echo "<div id='lightbox' style='display:none'>Loading...</div>" ;

puis partie Javascript :

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
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
131
132
133
134
135
136
137
 
 
// le code  de lightbox !!
 
 
<script type="text/javascript">
 
 
/*--------------------------------------------------------------------------*/
/*	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";
 
	}
 
 
}

et dans le même fichier en suite ...

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
function execute (page, id, timestamp , args ){
 var xhr_obj = null;
 
 if(window.XMLHttpRequest)  //Firefox
 {
    xhr_obj = new XMLHttpRequest();
	}
	
 else if(window.ActiveXObject) // Internet Explorer
	{
    try {
		xhr_obj= new ActiveXObject("Msxml2.XMLHTTP");
		}
	catch (e) {
		xhr_obj = new ActiveXObject("Microsoft.XMLHTTP");
		}
 
 }
  else {
    alert("Votre navigateur ne supporte pas les objets XMLHttpRequest");
    return;
 }
 
 /*
*/
	var data     = null; 
	var server = document.getElementById("lsserver").value ;
	var feature = document.getElementById("feature").value ;
	data = page+"?server="+server+"&feature="+feature+"&id="+id+"&timestamp=" + timestamp+""+args ;

	load = new Lightbox.base(document.getElementById("lightbox")).showBox() ;
 xhr_obj.open("GET", data, true);  // Mode synchone
 
 /**/

   xhr_obj.onreadystatechange = function()
 {

		if (xhr_obj.readyState == 4) {
//Lightbox.base(document.getElementById("loading")).hideBox();
		load.hideBox();
			if (xhr_obj.status ==200) {
				if( id.search('update') !=-1)
				{
					document.getElementById('divTab').innerHTML = xhr_obj.responseText;
					}
			}
			else {
				alert("Problem: " + xhr_obj.statusText);
			}
		}
		}
 xhr_obj.send(null);



}

j'espère que cela va aider

**Bovino** · 07/10/2008, 15h24

Code :

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

1
2
load.hide();
$('overlay').remove();

devrait fonctionner... En fait, ta box est sensée se fermer sur un événement et fait donc référence à l'élément qui a provoqué l'événement, donc dans ton cas, il n'y a pas d'événement donc une erreur...

**spax** · 07/10/2008, 16h06

ca me fait le même message d'erreur it's not a function :s

**Bovino** · 07/10/2008, 16h10

Code :

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

1
2
$('lightbox').hide();
$('overlay').remove();

alors...

**spax** · 07/10/2008, 17h54

toujours rien je commence a laisser tombé

loading avec lightbox ! comment faire

JavaScript

Discussions similaires

Partager

Partager