Replacing the Gallery Popup Window

This script replaces an existing function of the image Gallery. The original script opens the gallery window inside the same window you see when you click the edit button inside your content boxes. It has a white background and is inside an iframe, making it much more difficult to add custom styles. So I went with this alternative method (the way it originally was set up) and open the image inside a facebox window.

Because this script needs to replace the existing function, this script needs to be in a free form text/HTML content box below (and to the right) or in the Footer HTML of the image gallery.

<script type="text/javascript">
var showGalleryImage = function(sGalleryImgPath, sDescription){
 imgHolder.fadeOut('2500', function(){
  imgHolder.attr("src", sGalleryImgPath);
  imgHolder.bind("click", function(){jQuery.facebox('<center><img src="'+sGalleryImgPath+'"><br><br><div class="desc">'+sDescription+'</div>') });
  imgHolder.parent().attr("href", "javascript:void(0);");
  jQuery("#imgCaptionDiv").html(sDescription);
  imgHolder.fadeIn('1500', function() {});
 });
}
</script>

I added a class around the description so you can add CSS to format the description text inside the facebox window. Here is an example of the CSS:

#facebox .desc { color:#ffffff; font-weight:bold; font-size:18px; }

You can see what this looks like on my test-site 3 Home tab.

I also updated the Modifying the Image Gallery post with this code.

Edit (7/28/2009): Fixed an error in the code.