default lightbox code

itf/static/css/noel/inner.css

@@ -374,3 +374,35 @@ border-radius:3px;
 
 #clearBoth
 {clear:both;}
+
+
+/* Begin LightBox CSS */
+
+#lightbox
+{display:none; 
+background-color:#000; 
+opacity:0.9; 
+filter:alpha(opacity=90); 
+position:fixed; 
+top:0px; 
+left:0px; 
+bottom:0px;
+right:0px;
+width:100%; 
+height:100%; 
+z-index:1000;} /*everything except the lightbox panel should be below this z-index*/
+ 
+#lightboxPanel { 
+display:none; 
+position:fixed; 
+top:200px; 
+left:0;
+right:0;
+margin:0 auto;
+width:400px; 
+background-color:#FFF; 
+padding:15px;
+z-index:1001;} /*must have the highest z-index, just more than the lightbox*/
+
+
+/* End LightBox CSS */

itf/static/js/insidepage.js

@@ -33,9 +33,11 @@ $('.thumbsDetails').live("click", function(e) {
 //    alert($(this).attr("data-bigimage")); 
     var bigImge = $(this).attr("data-bigimage");
     var $img = $('<img />').attr("src", bigImage);
-    $('#lightboxContent').empty().append($img);    
+    $('#lightbox, #lightBoxPanel').fadeIn(400);
+    $('#lightBoxPanel').empty().append($img);    
 });
 
+
 $('.toggleNext').live("click", function(e) {
     e.preventDefault();
     var $next = $(this).next();
@@ -68,6 +70,9 @@ function getLi(item) {
 }
 
 $(function() {
+    $('#lightbox').click(function() {
+        $('#lightbox, #lightBoxPanel').fadeOut(400);
+    });
 
     /* search button toggle */
     $('.searchInnerField').hide();

itf/templates/noel/insidepage.html

@@ -15,11 +15,11 @@
 
 
 {% block content %}
-<div id="lightBox">
-    <div id="lightBoxContent">
+<div id="lightBoxPanel">
 
-    </div>
 </div>
+<div id="lightbox"></div>
+
 <div id="centerInner">
 	<div id="woodPng">
 	</div>