I'd like to add additional close button to the Top Right Corner of the Light Box. I can't seem to figure it out.

I think i need to change the .js but can't figure it out. Anyone Know how to do it?


leenwebb’s picture

I would also love to have the close button in the top right -- Does anyone have any tips? Thanks!

vinmassaro’s picture

Subscribing, would like to know if this is possible as well. I wasn't able to change the position with CSS because the close button container is not inside the same container as the lightbox content, and the lightbox container div holding everything is set to position:absolute, so the close button cannot be absolutely positioned relative to it.

hefox’s picture

Subscribe, wasn't able to do figure a way either. Found an old issue (then lost it) from 2008 that maintainer suggested changing the module css and js file to do it, witch I'm loath to do.

hefox’s picture

(function ($) {
  Drupal.behaviors.move_lightbox2_data = function (context) {
    $("#lightbox", context).prepend($("#imageDataContainer", context));

Add to a js file in theme like any other theme js file

SWMdave’s picture

I can not get it to work-

I have the most up to date version of Lightbox2, and jquery update module enabled just in case.

I added this to page.tpl.php:

<script type="text/javascript" src="<?php echo $base_path . $directory; ?>/top-box-buttons.js"></script>

I also created a file called :


In that file All I have:

(function ($) {
  Drupal.behaviors.move_lightbox2_data = function (context) {
    $("#lightbox", context).prepend($("#imageDataContainer", context));

It's not working for me

hefox’s picture

err, it needs to run after lightbox, my guess is you added that before $scripts variable?

Anyhow, you can add a js file via your .info file (visit admin/build/themes to refresh your theme info -- just visiting the page will refresh it). May need to clear cache.

SWMdave’s picture

I added that after-

I since removed it and added;

scripts[] = top-box-buttons.js

to my themes .info file.

Cleared the theme registry and still no buttons.

waldbeek’s picture

For me the JS solution did not work. But i managed to put the close button to the top via css.

#bottomNavClose {
position: absolute;
top: 0;
margin-left: 540px;
text-align: right;
margin-top: 2px;
padding: 0;
float: none;

krishnaa’s picture

Hi hefox,

you solution worked fantastically for me !!!


stella’s picture

Status:Active» Closed (works as designed)

Or why not use the alternative layout which puts the X in the top right corner.

ShaneOnABike’s picture

Could we update the documentation (below the alternative checkbox to indicate what it does). When I first saw this I didn't realise it meant that the X would appear at the top and thus didn't use that option. But it was exactly what I wanted in the end :/

Ritty’s picture

Could you provide me the proper CSS coding to place the "X" at the top for the updated lightbox sheet? Here's the default script:

.lb-data .lb-close {
width: 35px;
float: right;
padding-bottom: 0.7em;
outline: none;

Thank you.

muhammad.tanweer’s picture

This solution worked. You just need to check the checkbox saying "user alternative layout" and the close icon shows on top rather than on bottom. Thanks.


CaraCaraWatcher’s picture

I too am trying to get lightbox2 to display its title and close box on top.
Although I've tried hard, I've not succeeded it pulling this off.
I've downloaded lightbox2 and it works great but would someone mind telling me how I can get to the point to select "use alternative layout"?
Thanks all! Glenn

acbramley’s picture

Issue summary:View changes

The Use alternative layout option is on the configuration page under /admin/config/user-interface/lightbox2