ps: If you are focusing on our team activity those days, you should have read the post DNN Architecture Design Diagram, which I mentioned that I will complete a detailed tutorial to share how to utilize the built-in lightbox(or facebox) feature when you want to show more big and clear presentation in your post. Today the guide was finally done as follows.

Facebox is a jQuery-based, Facebook-style lightbox which can display images, divs, or entire remote pages. And now, you can use it with your DNN module to make your DNN module more interactive. Luckily our ultimate dnn blog module – SunBlogNuke had integrated with facebox plugin and implemented it into some excellent features. Today I would like to show you how to apply lightbox effect for some big image within dnn blog post. Note that we just demonstrated the process in Window Live Writer. Actually we also recommend that you should manage your posts with WLW, which will make your post management simply and easily. Now you just follow the simple steps below:

1) Open up your WLW and get started to write your post.

2) Just copy your big graphs or images into the content section of WLW and it will be scaled in to a little one. Also you can apply some options for some customized effects, like size, text wrapping, borders.

dnn-deployment-option1 in 4 Simple Steps to Apply Facebox Effect within DNN Blog                             dnn-deployment-option2 in 4 Simple Steps to Apply Facebox Effect within DNN Blog

3) Set the option [Link to] as Source Picture and click the Options below. Then it should pop up the Source Picture Options window and there you can set it as follows and click "OK":

Source-Picture-Options in 4 Simple Steps to Apply Facebox Effect within DNN Blog

4) Switch the source tab at the left-bottom of content panel, find out the image tag section and insert the rel property for facebox detected. The following code should look like:

dnn-blog-facebox in 4 Simple Steps to Apply Facebox Effect within DNN Blog

Okey, that’s all. Now the built-in facebox plugin will automatically attach the Facebook-style lightbox for your picture.

In the end I presented an illustration depicting a common scenario for DotNetNuke Deployment in the Enterprise. Click the image to zoom it for a higher-res version with built-in facebox.

DNN-Deployment-Scenario in 4 Simple Steps to Apply Facebox Effect within DNN Blog