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
|
1. *--------------------------------------------------------------------------*/
2. /* Lightbox
3. * This is a script for creating modal dialog windows (like the ones your operating
4. * system uses)
5. *
6. */
7.
8. var Lightbox = {
9. /* hideAll - closes all open lightbox windows */
10. hideAll: function(){
11. lboxes = document.getElementsByClassName('lbox')
12. lboxes.each(function(box){
13. Element.hide(box)
14. }
15. )
16. if ($('overlay')){
17. Element.remove('overlay');
18. }
19. }
20. }
21. Lightbox.base = Class.create();
22. Lightbox.base.prototype = {
23.
24. initialize: function(element, options){
25. //start by hiding all lightboxes
26. Lightbox.hideAll();
27.
28. this.element = $(element);
29. this.options = Object.extend({
30. lightboxClassName : 'lightbox',
31. closeOnOverlayClick : false,
32. externalControl : false
33. }, options || {} )
34.
35. //create the overlay
36. new Insertion.Before(this.element, "<div id='overlay' style='display:none;'></div>" );
37.
38. Element.addClassName(this.element, this.options.lightboxClassName)
39.
40. //also add a default lbox class to the lightbox div so we can find and close all lightboxes if we need to
41. Element.addClassName(this.element, 'lbox')
42.
43. //Tip: make sure the path to the close.gif image below is correct for your setup
44. closer = '<img id="close" src="http://blog.feedmarker.com/wp-content/themes/feedmarker/lightbox/images/close.gif" alt="Close" title="Close this window" />'
45.
46. //insert the closer image into the div
47. new Insertion.Top(this.element, closer);
48.
49. Event.observe($('close'), 'click', this.hideBox.bindAsEventListener(this) );
50.
51. if (this.options.closeOnOverlayClick){
52. Event.observe($('overlay'), 'click', this.hideBox.bindAsEventListener(this) );
53. }
54. if (this.options.externalControl){
55. Event.observe($(this.options.externalControl), 'click', this.hideBox.bindAsEventListener(this) );
56. }
57.
58. this.showBox();
59. },
60.
61. showBox : function(){
62. //show the overlay
63. Element.show('overlay');
64.
65. //center the lightbox
66. this.center();
67.
68. //show the lightbox
69. Element.show(this.element);
70. return false;
71. },
72.
73. hideBox : function(evt){
74. Element.removeClassName(this.element, this.options.lightboxClassName)
75. Element.hide(this.element);
76. //remove the overlay element from the DOM completely
77. Element.remove('overlay');
78. return false;
79. },
80.
81. center : function(){
82. var my_width = 0;
83. var my_height = 0;
84.
85. if ( typeof( window.innerWidth ) == 'number' ){
86. my_width = window.innerWidth;
87. my_height = window.innerHeight;
88. }else if ( document.documentElement &&
89. ( document.documentElement.clientWidth ||
90. document.documentElement.clientHeight ) ){
91. my_width = document.documentElement.clientWidth;
92. my_height = document.documentElement.clientHeight;
93. }
94. else if ( document.body &&
95. ( document.body.clientWidth || document.body.clientHeight ) ){
96. my_width = document.body.clientWidth;
97. my_height = document.body.clientHeight;
98. }
99.
100. this.element.style.position = 'absolute';
101. this.element.style.zIndex = 99;
102.
103. var scrollY = 0;
104.
105. if ( document.documentElement && document.documentElement.scrollTop ){
106. scrollY = document.documentElement.scrollTop;
107. }else if ( document.body && document.body.scrollTop ){
108. scrollY = document.body.scrollTop;
109. }else if ( window.pageYOffset ){
110. scrollY = window.pageYOffset;
111. }else if ( window.scrollY ){
112. scrollY = window.scrollY;
113. }
114.
115. var elementDimensions = Element.getDimensions(this.element);
116.
117. var setX = ( my_width - elementDimensions.width ) / 2;
118. var setY = ( my_height - elementDimensions.height ) / 2 + scrollY;
119.
120. setX = ( setX < 0 ) ? 0 : setX;
121. setY = ( setY < 0 ) ? 0 : setY;
122.
123. this.element.style.left = setX + "px";
124. this.element.style.top = setY + "px";
125.
126. }
127.
128.
129. } |
Partager