SharePoint 2010 Custom Application Page jQuery Lightbox Plug-in Fix

I used a fantastic jQuery lightbox plug-in which can be found at http://leandrovieira.com/projects/jquery/lightbox/. There was almost no setup involved. That is, until it meets SharePoint 2010 custom application pages. Since the page doesn't use the body scroll bars and creates faux-scroll bars in the s4-workspace div, it is possible that the image is too large for the visible area and there are no functional scroll bars to view the rest of the picture. I should suffix my last statement with the fact that this probably would have happened with any lightbox plug-in; it just happened that this is the plug-in I used.

I was tasked with finding a fix and below is the result. I only had to add code to the beginning of two functions: _set_interface and _finish. The short of it is that I cache the important styles that I am going to change, then I modify the styles to enable the page scroll bars. When the lightbox is closed, the cached styles are restored.

?

function _set_interface():

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

var htmlbody = $("BODY"),     bodyMaster = $("body.v4master"),     bodyWorkspace = $("body #s4-workspace"),     savedCSS = {         BodyOverflow: htmlbody.css("overflow"),           BodyMasterHeight: bodyMaster.css("height"),         BodyMasterWidth: bodyMaster.css("width"),         BodyMasterOverflow: bodyMaster.css("overflow"),           BodyWorkspaceOverflowY: bodyWorkspace.css("overflow-y"),         BodyWorkspaceOverflowX: bodyWorkspace.css("overflow-x"),         BodyWorkspaceHeight: bodyWorkspace.css("height")     };     settings.SavedCSS = savedCSS;               htmlbody.css({ "overflow": "auto" }); bodyMaster.css({ "height": "inherit", "width": "inherit", "overflow": "visible" }); bodyWorkspace.css({ "overflow-y": "auto", "overflow-x": "auto", "height": "auto" });

?

function _finish():

1 2 3 4 5 6 7 8

var htmlbody = $("BODY"),     bodyMaster = $("body.v4master"),     bodyWorkspace = $("body #s4-workspace"),     savedCSS = settings.SavedCSS;   htmlbody.css({ "overflow": savedCSS.BodyOverflow }); bodyMaster.css({ "height": savedCSS.BodyMasterHeight, "width": savedCSS.BodyMasterWidth, "overflow": savedCSS.BodyMasterOverflow }); bodyWorkspace.css({ "overflow-y": savedCSS.BodyWorkspaceOverflowY, "overflow-x": savedCSS.BodyWorkspaceOverflowX, "height": savedCSS.BodyWorkspaceHeight });