From e2022b22295af6075ed1ac8d8b1af49769cedb6f Mon Sep 17 00:00:00 2001
From: Chris Widhelm <cwidhelm@contego.net>
Date: Mon, 30 Jan 2012 09:01:28 -0600
Subject: [PATCH] Added functionality to use custom overlayClass

These modifications allow a user to define a custom overlayClass
instead of using the default 'overlay'.  This means that if they are
using jQuery UI instead of redefining the ui-widget-overlay into their
own stylesheet, they can just reference the one defined by jQuery UI
stylesheet.
---
 css/style.css                 |   4 +++-
 images/08_diagonals_thick.png | Bin 0 -> 251 bytes
 index.html                    |  21 +++++++++++++++++++++
 js/jquery.overlay.js          |  11 +++++++++--
 js/site.js                    |   8 ++++++++
 5 files changed, 41 insertions(+), 3 deletions(-)
 create mode 100644 images/08_diagonals_thick.png

diff --git a/css/style.css b/css/style.css
index 1981c65..f44476e 100644
--- a/css/style.css
+++ b/css/style.css
@@ -7,4 +7,6 @@ p { margin: 10px 0 10px 0; }
 ul li { margin: 0 0 0 25px; list-style-type: disc; }
 
 #container { padding: 10px; }
-#small-container { width:640px; height: 380px; border: 1px solid #000; }
\ No newline at end of file
+#small-container { width:640px; height: 380px; border: 1px solid #000; }
+
+.ui-widget-overlay { background: #666666 url(../images/08_diagonals_thick.png) 50% 50% repeat; opacity: .50;filter:Alpha(Opacity=50); }
diff --git a/images/08_diagonals_thick.png b/images/08_diagonals_thick.png
new file mode 100644
index 0000000000000000000000000000000000000000..64ece5707d91a6edf9fad4bfcce0c4dbcafcf58d
GIT binary patch
literal 251
zcmV<X00jSuP)<h;3K|Lk000e1NJLTq001Ze001Zm1^@s6jQ+T70002ONkl<ZScUD^
zT?&IR7(~(AY#^)6!n1<<Vj)fQYm^M-n@5r1C}@~h2;ohZ7-N3vC*J$+J$LlEJIhL0
z?fU|%;UEDj;@||T;sBg74hkR1O4$<++XU{$LE{Z7;GhCj!9fA2go6yIhJysCh=UWT
ziUV-UI2ia*&y+p!utUI|$6*(^`>bvPcjKS|RKP(6sDcCAB(_QB%0978a<$Ah$!b|E
zwn;|HO0i8cQ<lay$(1s&O|n)t8rvkbvR?jjlN@>j@~)s!ajF0S002ovPDHLkV1oEp
BYH0uf

literal 0
HcmV?d00001

diff --git a/index.html b/index.html
index 9f194d4..ea0e33c 100644
--- a/index.html
+++ b/index.html
@@ -133,6 +133,27 @@ <h3>
           });
         });
       </pre>
+      <h2>
+        Customer Overlay Class
+      </h2>
+      <p>
+        You can also used an overlay class already defined in your app from another library (i.e. jQuery UI). Click on the photo below to see the overlay class form jQuery UI used.
+      </p>
+      <div id="photo-trigger-2" style="width:720px;height: 478px;">
+        <img src="http://a3.sphotos.ak.fbcdn.net/hphotos-ak-snc6/259966_10100500093774910_4902926_62592512_5420140_n.jpg" alt="" />
+      </div>
+      <h3>
+        Code Used
+      </h3>
+      <pre class="brush: js">
+		  $('#photo-trigger-2').click(function() {
+		    $(this).overlay({
+		      overlayClass: 'ui-widget-overlay',
+		      effect: 'fade',
+		      container: '#photo-trigger-2'
+		    });
+		  });
+      </pre>
     </div>
 	</body>
 </html>
diff --git a/js/jquery.overlay.js b/js/jquery.overlay.js
index 7b3421e..6ee2ad0 100644
--- a/js/jquery.overlay.js
+++ b/js/jquery.overlay.js
@@ -14,6 +14,12 @@
 	$.fn.overlay = function(options) {
 
     var opts = $.extend({}, $.fn.overlay.defaults, options);
+	// If overlayClass is defined we don't want to use opts.color since it will override 
+	// the background from the element.
+	if( opts.overlayClass ) {
+		delete opts.color;
+	}
+	
 		return this.each(function(evt) {
       if(!$(this).hasClass('overlay-trigger')) {
         show(create($(this), opts), opts);
@@ -49,7 +55,7 @@
     if($src.css('position') === 'relative') {
     
     	overlay = $('<div></div>')
-    	.addClass('overlay')
+    	  .addClass(opts.overlayClass)
 	      .css({
 	        background: opts.color,
 	        opacity: opts.opacity,
@@ -66,7 +72,7 @@
     } else {
     
 	    overlay = $('<div></div>')
-	      .addClass('overlay')
+	      .addClass(opts.overlayClass)
 	      .css({
 	        background: opts.color,
 	        opacity: opts.opacity,
@@ -209,6 +215,7 @@
    
 	$.fn.overlay.defaults = {
     color: '#000',
+	overlayClass: 'overlay',
     opacity: 0.5,
     effect: 'none',
     onShow: null,
diff --git a/js/site.js b/js/site.js
index 45be5b9..095358d 100644
--- a/js/site.js
+++ b/js/site.js
@@ -62,4 +62,12 @@ $(function() {
       }
     });
   });
+
+  $('#photo-trigger-2').click(function() {
+    $(this).overlay({
+      overlayClass: 'ui-widget-overlay',
+      effect: 'fade',
+      container: '#photo-trigger-2'
+    });
+  });
 });
\ No newline at end of file