Prepare to Geek Out

Ok, this post will bore my mother. She will skip it.

You may find reading this post easier over at my developing WordPress blog as it uses color-coded and indented syntax structure that highlights the area of code under consideration and allows you to easily copy and paste the code from the page.

But I need to write this so I can remember what I've done when I transition my work blog over to WordPress. This post is about getting my favorite lightbox utility to work in WordPress and customizing it's appearance.

The lightbox is, of course, mediaboxAdv by John Einselen over at iaaian7. mediaboxAdv opens a significant number of file formats, including video and HTML "windows", in a lightbox popup on top of the dimmed web page window.

The successful implementation of mediaboxAdv via the Mootools framework in WordPress is provided by Cheon Nii, at CheonNii's blog. Cheon adapted the mediaboxAdv javascript into the Lightbox M plugin. (Fortunately Cheon uses enough English to make his download understandable for me. I couldn't figure out his native language to translate it.) WordPress has huge issues running Mootools as other plugins frequently seem to use javascript frameworks that conflict with Mootools. Cheon's plugin seems to get around this successfully and can be configured to only implement the javascript code on the pages that require it.

The totally cool customization solution comes from Enric, at Sonic Bite Desarrollo y Diseño Web. I used Google translate to translate it to English. He describes how to include a logo-styled image overlay in a corner on top of the lightbox popup. Great for branding. Nice touch.

The Process

1. Download and install the Lightbox M plugin.
2. Using your FTP client, open the mediaboxAdv-1.2.0.js file (in wp-content --> plugins --> lightbox-m --> js folder)
3. At line 32 in mediaboxAdv-1.2.0.js, add line 1 of the code below (lines 2 - 10 should already be in mediaboxAdv-1.2.0.js. Roroland will become a div for the logo element.
   
   new Element("div", {id: "roroland"}).injectInside(center);
image = new Element("div", {id: "mbImage"}).injectInside(center);
bottom = new Element("div", {id: "mbBottom"}).injectInside(center).adopt(
new Element("a", {id: "mbCloseLink", href: "#"}).addEvent("click", close),
nextLink = new Element("a", {id: "mbNextLink", href: "#"}).addEvent("click", next),
prevLink = new Element("a", {id: "mbPrevLink", href: "#"}).addEvent("click", previous),
title = new Element("div", {id: "mbTitle"}),
number = new Element("div", {id: "mbNumber"}),
caption = new Element("div", {id: "mbCaption"})
);
    
   
4. Open the mediaboxAdvBlack.css file (or the mediaboxAdvWhite.css file if that's the one you are using in the Lightbox M settings panel) and add the custom div below. I just added mine to the bottom of the css file.
   
   /* custom div containing logo */
#roroland {
position: absolute;
z-index: 9999;
width:100px;
height: 113px ;
top:-30px;
left:-40px;
background-image: url(../images/logo.png);
background-repeat:no-repeat;
}
    
   
5. Find the block of code below, in the same css file in step 4, and change it to the block of code in the lower code window. This comments out the css that would otherwise hide any portion of your logo image that extends beyond the boundaries of the lightbox popup.
   
   #mbCenter {
position: absolute;
z-index: 9999;
left: 50%;
overflow: hidden;
background-color: #000;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-moz-box-shadow: 0px 10px 40px rgba(0,0,0,0.70);
-webkit-box-shadow: 0px 10px 40px rgba(0,0,0,0.70);
} 

#mbCenter {
position: absolute;
z-index: 9999;
left: 50%;
/* overflow: hidden; THIS IS COMMENTED OUT TO DISPLAY THE LOGO WHICH PARTIALLY APPEARS OUTSIDE THE MEDIABAXADVACED LIGHTBOX */
background-color: #000;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-moz-box-shadow: 0px 10px 40px rgba(0,0,0,0.70);
-webkit-box-shadow: 0px 10px 40px rgba(0,0,0,0.70);
} 
    
   
6. In an application like Photoshop, create your logo image using a transparent background.
7. Save it as a png-24 file, preserving the transparency, with the name "logo.png" --without the quotation marks, of course.
8. Using your FTP client, upload the logo.png file to the wp-content --> plugins --> lightbox-m --> images folder.
9. Go to wp-content --> plugins -->lightbox-m and edit the lightbox.php file by adding a single line of code to the $lightbox_files = Array statement at line 26. We need to include the logo image in the array. If you used a different name for your logo image, change the name here accordingly. So, this block of code (notice you have to scroll down to see it all):
   
   $lightbox_files = Array(
'css/mediaboxAdvBlack.css',
'css/mediaboxAdvWhite.css',
'images/50.gif',
'images/80.png',
'images/BlackClose.gif',
'images/BlackLoading.gif',
'images/BlackNext.gif',
'images/BlackPrevious.gif',
'images/MinimalClose.png',
'images/MinimalLoading.gif',
'images/MinimalNext.png',
'images/MinimalPrevious.png',
'images/WhiteClose.gif',
'images/WhiteLoading.gif',
'images/WhiteNext.gif',
'images/WhitePrevious.gif',
'js/mediaboxAdv-1.2.0.js',
'js/mootools-1.2.4-core-yc.js',
'swf/NonverBlaster.swf',
'swf/player.swf',
'lightbox.php'
); 
   
   should become this block of code (notice you have to scroll down to see it all):
   
   $lightbox_files = Array(
'css/mediaboxAdvBlack.css',
'css/mediaboxAdvWhite.css',
'images/50.gif',
'images/80.png',
'images/BlackClose.gif',
'images/BlackLoading.gif',
'images/BlackNext.gif',
'images/BlackPrevious.gif',
'images/MinimalClose.png',
'images/MinimalLoading.gif',
'images/MinimalNext.png',
'images/MinimalPrevious.png',
'images/WhiteClose.gif',
'images/WhiteLoading.gif',
'images/WhiteNext.gif',
'images/WhitePrevious.gif',
'images/logo.png',
'js/mediaboxAdv-1.2.0.js',
'js/mootools-1.2.4-core-yc.js',
'swf/NonverBlaster.swf',
'swf/player.swf',
'lightbox.php'
); 
   
   
10. If you use a different name for your logo file, you must update the name in the background-image statement of the roroland div added in step 4.

Now, quite frankly, I don't like my logo image at all at the moment. I'll tweak that later. Just figuring all of this out to get it to work was challenging enough for one day.

Configuring WordPress for Implementation

• After doing the above 10 steps, make sure your Lightbox M plugin is activated.
• At the present time, I export a photo out of Lightroom at 1024 pixels wide, which, based on my visitors' stats, will fill most of my viewers monitors. [This means they will not see all of my logo image unless I adjust the css. Oh well... The world needs more giant monitors!]
• I went to the Media Settings in my WordPress Admin console (You get there from the left column of the Dashboard.) to configure the media settings.
• Since the main body section of my blog is 680 pixels wide, I use a maximum image size of 620. 620 plus a 10 pixel margin on each side plus the 20 pixel margin of the main text area (each side) equals the 680 pixel width of the body area. [Note to self: the 620 image size does not work well when embedded in an indented bulleted list (see below) as it doesn't accommodate the additional indentation.] I have the following media settings (Click to see full size image):
   
  
  
   
  
• I have the following Lightbox M settings (Click to see full size image):
   
  
  
  
  
• And these are the settings I use in the Upload/Insert dialog that appears when I place an image on the server and into a post.
   
  
  
  
  
• The only part of the implementation that is awkward, when placing a picture in a post, is having to copy the title="Top_Line_Title::Bottom_Line_Title" information from the HTML image source code into the hyperlink code as well to have the title also appear in the bottom left corner of the lightbox popup. You don't have to do this, but I really like it.
• I also write my titles in the format shown in the above step and here: title="Top_Line_Title::Bottom_Line_Title." to use both top and bottom lines of the title area in the popup window. The double colons do not appear in the popup lightbox but rather separate the title into two lines at that point.

Again, unless you are into such things, you will not have made it to the end of this post. But it has taken me weeks to sort through all of the weird variables and plugins that are out there for WordPress in my undying effort to figure out how to get the mediaboxAdv plugin to work—a must for my transition from MovableType to WordPress.

Now that I better understand WordPress and the whole media toolset it offers, along with so many other features, I am really getting into WordPress!! And a special thanks to John Einselen, Cheon Nii, and Enric for freely and kindly sharing their expertise with the web community. I could never have done any of this without their brains! You guys are Awesome! Awesome! Awesome!