Wednesday, January 6, 2010

Using Milkbox with SharePoint

Recently we needed to integrate Milkbox (Lightbox that supports Flash and other things) to our SharePoint-based Intranet Site.



In order to do this you need to do the following to your master page.




  1. Download the Milkbox Code. Depending on how you plan to implement this solution you can store the files in a number of places, either in a doc library or on the file system in the 12 hive. In this example I created an STSDEV solution and added the downloaded files into the solution so they would deploy to the TEMPLATE/LAYOUTS directory in the 12 hive. If you choose to save it to another location, be sure to update your references from the '_layouts/...' references I gave to the .js and .css files.
     

  2. Ensure the following DOCTYPE declaration is at the top of your masterpage:


    <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>

  3. Ensure the following assembly registration is in the top of your master page:

    <%@ Register Tagprefix="PublishingWebControls" Namespace="Microsoft.SharePoint.Publishing.WebControls" Assembly="Microsoft.SharePoint.Publishing, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

  4. In the <head> section of your master page add the following (Also, pay attention that the version numbers match up with the most current version you've downloaded):

    <PublishingWebControls:EditModePanel PageDisplayMode="Display" runat=server id="MilkboxPanel">
    <!--Lightbox -->
    <script type="text/javascript" src="/_layouts/Lightbox/milkbox-2.3.2/js/mootools-1.2.3-core-yc.js"></script>\>
    <script type="text/javascript" src="/_layouts/Lightbox/milkbox-2.3.2/js/mootools-1.2.3.1-assets.js"></script>
    <script type="text/javascript" src="/_layouts/Lightbox/milkbox-2.3.2/js/milkbox.js"></script>
    <style type="text/css">
    @import url(/_layouts/Lightbox/milkbox-2.3.2/css/milkbox/milkbox.css);
    </style>
    <!--End Lightbox-->
    </PublishingWebControls:EditModePanel>

    *Notice the Edit Mode panel wrapping the <style> and <script> tags. This is to prevent a javascript error that appears when the page is in edit mode and you try to edit a text field. This fix was proposed by Steve Mann of RDA, thanks for the help!

  5. In your page content area, ensure that your links include the milkbox 'rel' attribute:

    <a href="img/01b.jpg" rel="milkbox" title="Caption goes here...">image #1</a>

After this setup, you should be able to use Milkbox as it is documented on the page

No comments: