For iFrame display, how to modify the template (ie: remove prev and next buttons, etc)

This might be covered with the issue #592232: Make JS output of lightbox2 module themeable when it gets resolved. But until then, some heavy duty CSS and javascript might also help you out. The previous/next buttons could probably be hidden with a display:hidden. But moving the close button to the top right takes a little trickery.

#bottomNav{
  position: absolute;
  top: 0;
  left: 50%;
}

This css puts the #bottomNavdiv at the top. Unfortunately, the absolute positioning then uncenters the div, so it gets placed with its left edge starting in the middle of the page (50%).

#bottomNavClose {
  position: relative;
  left: -50%;
}

Then to move it back, the inner content is moved back to the left -50%, relative to its parent container - in other words, half the distance of the lightbox, putting it back on the left side of the modal box.

You may also need to increase its z-index to make sure the functionality works.

In overriding the default Lightbox2 themeing, it may be necessary to add CSS through javascript to override the inline css, or even do rewrites and modifications to the Lightbox methods. It admittedly may not be the prettiest or best solution, but it's better than hacking the module.

Let me give a more detailed example. Let's say that instead of just moving the bottom nav button, I wanted to move the whole bottom section to the top (the outer #imageDataContainer and the inner #imageData divs). I might have css something like this:

#imageDataContainer {
  position: absolute;
  top: 0;
  left: 50%;
  height: 30px;
  z-index: 10501;
}
#imageData {
  position: relative;
  left: -50%;
}

The #imageDataContainer div is now 30 pixels high and absolutely positioned, making it now removed from the flow of the box, causing it to overlap the top of the main content. There will also be a problem that #imageDataContainer has a background color set by Lightbox, which will be offset to the middle right of the page.

The first thing is to offset the main content, moving it down 30 pixels to make room for #imageDataContainer. I can do that by adding a 30 pixel border to the top of the different ids Lightbox2 uses. (I'm using blue, but it can be any color you want.)

#modalContainer, #frameContainer, #imageContainer {
  border-top: 30px solid #0000cc;
}

You could probably do a margin-top with a background image/color instead, if you wanted.

Now to deal with the trickier part - getting rid of the background color on #imageDataContainer. It needs to be set to transparent, andCSS won't do it, because it is being put in with lightbox.js (creating inline css). And setting it to transparent in the lightbox settings won't work - it is expecting a hex number, and adds a '#' before it. Therefore it needs to be overridden with javascript/jQuery:

$('#imageDataContainer').css('background-color','transparent');

The last problem you will notice is that now the bottom is being clipped by 30 pixels. Offsetting the main content with the 30 pixel border didn't make the modal container any bigger, and the resizing is also set in lightbox.js. So again, the solution lies in javascript:

Drupal.behaviors.mymodule = function(context) {
  if(typeof Lightbox.origResize != 'function') {
    Lightbox.origResize = Lightbox.resizeContainer;
    Lightbox.resizeContainer = function(imgWidth, imgHeight) {
      Lightbox.origResize(imgWidth, imgHeight + 30);
    }
  }
  $('#imageDataContainer').css('background-color','transparent');
};

In this code, I am defining a new method 'origResize' in the Lightbox object to be the same as the method 'resizeContainer' (and making sure it only happens once), then I'm redefining 'resizeContainer' to call that new method with the 30 pixel offset included. When Lightbox.resizeContainer is called, it will include the 30 pixel offset.

Hopefully, these examples can help you with your own modal popup customization.