Mas Agung

Integrating Facebox into DotNetNuke Module

If you join with Facebook, then you will see a lot of Facebook's style popup message like below:

Rounded rectangle with transparent in every border corner. When you click outside of the Facebox area or in the trigger button, then the Facebox will dissapear. Simple and intuitive. The good news is, now you can use it in your DotNetNuke module too!

Hey, how to do that?

Enter Facebox javascript library to create Facebook's style popup message. :)

This is the sample:

Require some modification in your css:

When you click on the Edit image button then the Facebox will shown. Click anywhere outside the Facebox area, it will dissapears. You can combine it inside a gridview or repeater or datalist. Nice feature isn't it? :)

Ok, stop talking. Let's try!

This is the step by step:

1. Download the great jQuery library framework. The size is only 30.3 KB for pack file (jquery-1.2.6.pack.js).
2. Download Facebox javascript library from this website. The total size is only 14.7 KB!
3. Extract it into some folder.
   
   
4. Copy facebox folder into your DNN module folder.
   
   [root]
       DesktopModules
             YourModule
                     facebox
   
5. Open facebox.css and change default facebox image background path with your module path like below:
   
   Original value:

   #facebox .b {
     background:url(/facebox/b.png);
   }

   #facebox .tl {
     background:url(/facebox/tl.png);
   }

   #facebox .tr {
     background:url(/facebox/tr.png);
   }

   #facebox .bl {
     background:url(/facebox/bl.png);
   }

   #facebox .br {
     background:url(/facebox/br.png);
   }

    

   Your updated value:

   #facebox .b {
     background:url(/DesktopModules/YourModuleFolder/facebox/b.png);
   }

   #facebox .tl {
     background:url(/DesktopModules/YourModuleFolder/facebox/tl.png);
   }

   #facebox .tr {
     background:url(/DesktopModules/YourModuleFolder/facebox/tr.png);
   }

   #facebox .bl {
     background:url(/DesktopModules/YourModuleFolder/facebox/bl.png);
   }

   #facebox .br {
     background:url(/DesktopModules/YourModuleFolder/facebox/br.png);
   }
   

6. Open your module control code behind (.ascx.cs) to register facebox.css and facebox.js inside Page_Load event like below:
   

   Control oCSS = this.Page.FindControl("CSS");
   if (oCSS != null) {
        HtmlGenericControl faceboxCSS = new HtmlGenericControl("link");
        faceboxCSS.Attributes["type"] = "text/css";
        faceboxCSS.Attributes["media"] = "screen";
        faceboxCSS.Attributes["rel"] = "stylesheet";
        faceboxCSS.Attributes["href"] = ModulePath + "facebox/facebox.css";
        oCSS.Controls.Add(faceboxCSS);

        HtmlGenericControl faceboxJS = new HtmlGenericControl("script");
        faceboxJS.Attributes["type"] = "text/javascript";
        faceboxJS.Attributes["src"] = ModulePath + "facebox/facebox.js";
        oCSS.Controls.Add(faceboxJS);

   }

    

   Notes:
   You should register jQuery first before Facebox because it is jQuery plug-in. You can refer to my article about How to integrate jQuery into your DotNetNuke module. If you want your Facebox available in every DNN pages, then you should register Facebox in skin level and not in module level. By registering Facebox in skin level, you can make it available for all pages and modules. :)

   In this article, I have been registering jQuery library in my skin. So, jQuery can be accessed for all modules.

7. Open your module control presentation file (.ascx) to register BLOCKED SCRIPT
   
   <script type="text/javascript">
     jQuery(document).ready(function() {
       jQuery('a[rel*=facebox]').facebox({
         loading_image : '<%= ModulePath %>facebox/loading.gif',
         close_image: '<%= ModulePath %>facebox/closelabel.gif'
       })
     })
   </script>
   
   
   Notes:
   You can refer to Facebox documentation to add more functionality by adding more parameters. You can also combine it with Ajax too. Nice! :)
    
   
8. Create your 'div' container as content that Facebox will dynamically loaded (I took from Facebox's sample):
   

   <div id="info" style="display:none;">
     <p> Hey, I'm the 'info' div! </p>
     <p> I look like this: </p>
     <code>
       &lt;div id="info" style="display:none;"&gt; <br/>
         &nbsp;&nbsp;text<br/>
       &lt;/div&gt;
     </code>
   </div>
   

9. Wrap your HTML tag which Facebox will be loaded. Some of them are below (you can refer to Facebox documentation to make it more dynamic):
   
   Make edit.jpg image as Facebox trigger. #info in anchor tag is just a DIV tag with id="info" (see point 8 above):
   
   <a href="#info" title="Click to edit" rel="facebox"><img alt="edit" border="0" src="<%= ModulePath %>edit.jpg" style="width: 46px; height: 21px" /></a>
   
   Make string as Facebox trigger:
   
   <a href="#info" title="View my profile" rel="facebox">Click here to see my profile?</a>
   
   View '/Portals/0/logo.gif' in the Facebox
   
   <a href="/Portals/0/logo.gif" title="View logo" rel="facebox">View DNN logo</a>
    
   
10. That's it! Now your module is Facebox's ready! :)

By combining jQuery + it's plug-ins into DNN development, you are opening a new horizon in how DNN interact with users.

Facebox is simple, nice, and intuitive plug-in for jQuery. And now, you can use it with your DNN module to make your DNN module more interactive.

Hope this help.

Share this post: | | | |