Colorbox in PeopleSoft

My new favorite lightbox for PeopleSoft is Jack Moore's Colorbox.  It is released under the MIT License and is free to use and customize to your liking.  I use iScripts to deliver the Colorbox to my applications; all you need to do to implement the Colorbox in your instance is follow these instructions below.

Download the Colorbox and pick the example you like best from one of the 5 examples in the download.

After you have made your selection you need to open the images folder under the example# that you chose and start loading the example's images into PeopleSoft.  I chose example1, so I loaded 5 photos into Application Designer.

Then you need to create and HTML object and copy the CSS from the example you chose and replace the relative urls for the images with %bind(:#) variables.

/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

/* 
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#000;}
#colorbox{outline:0;}
    #cboxTopLeft{width:21px; height:21px; background:url(%BIND(:2)) no-repeat -101px 0;}
    #cboxTopRight{width:21px; height:21px; background:url(%bind(:2)) no-repeat -130px 0;}
    #cboxBottomLeft{width:21px; height:21px; background:url(%bind(:2)) no-repeat -101px -29px;}
    #cboxBottomRight{width:21px; height:21px; background:url(%bind(:2)) no-repeat -130px -29px;}
    #cboxMiddleLeft{width:21px; background:url(%bind(:2)) left top repeat-y;}
    #cboxMiddleRight{width:21px; background:url(%bind(:2)) right top repeat-y;}
    #cboxTopCenter{height:21px; background:url(%bind(:3)) 0 0 repeat-x;}
    #cboxBottomCenter{height:21px; background:url(%bind(:3)) 0 -29px repeat-x;}
    #cboxContent{background:#fff; overflow:hidden;}
        .cboxIframe{background:#fff;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{margin-bottom:28px;}
        #cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;}
        #cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;}
        #cboxLoadingOverlay{background:url(%bind(:4)) no-repeat center center;}
        #cboxLoadingGraphic{background:url(images/loading.gif) no-repeat center center;}

        /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
        #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }
        
        /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
        #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}

        #cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
        #cboxPrevious{position:absolute; bottom:0; left:0; background:url(%bind(:2)) no-repeat -75px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxPrevious:hover{background-position:-75px -25px;}
        #cboxNext{position:absolute; bottom:0; left:27px; background:url(%bind(:2)) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxNext:hover{background-position:-50px -25px;}
        #cboxClose{position:absolute; bottom:0; right:0; background:url(%bind(:2)) no-repeat -25px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxClose:hover{background-position:-25px -25px;}

/*
  The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
  when an alpha filter (opacity change) is set on the element or ancestor element.  This style is not applied to or needed in IE9.
  See: http://jacklmoore.com/notes/ie-transparency-problems/
*/
.cboxIE #cboxTopLeft,
.cboxIE #cboxTopCenter,
.cboxIE #cboxTopRight,
.cboxIE #cboxBottomLeft,
.cboxIE #cboxBottomCenter,
.cboxIE #cboxBottomRight,
.cboxIE #cboxMiddleLeft,
.cboxIE #cboxMiddleRight {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
}

Please note, that I modified the css in example one to use a background of black for the overlay.

#cboxOverlay{background:#000;}

Next copy the "jquery.colorbox.js" into an html object and save it using your local naming standards.  Note, I used the "jquery.colorbox-min" initially but I kept getting JavaScript errors and when I used the file above it worked without issue.

Then create a new weblib record and add the ISCRIPT1 field to your record and save this new definition as a derived work record then add the following code to your ISCRIPT1 FieldFormula PeopleCode and modify the code to match your sites naming standards and image that you have previously imported.  If you use my modified CSS then your Bind variables will match.

Here is my iScript code

Function IScript_colorbox_css   
   &bind1 = %Response.GetImageURL(Image.ZZ_CB_OVERLAY);
   &bind2 = %Response.GetImageURL(Image.ZZ_CB_CONTROLS);
   &bind3 = %Response.GetImageURL(Image.ZZ_CB_BORDER);
   &bind4 = %Response.GetImageURL(Image.ZZ_CB_LOADING_BACKGROUND);
   &bind5 = %Response.GetImageURL(Image.ZZ_CB_LOADING);
   
   %Response.SetContentType("text/css");
   %Response.Write(GetHTMLText(HTML.ZZ_CB_CSS, &bind1, &bind2, &bind3, &bind4, &bind5));
End-Function;



Function IScript_ColorBoxJs
   %Response.SetContentType("text/javascript");
   %Response.Write(GetHTMLText(HTML.ZZ_COLORBOX_JS));
End-Function;