How to close your Lightbox with an onclick event

Use case: an image gallery view has a grid of image thumbnails, each with an "Edit Description" link in them. You want to open the Edit form in a lightframe and when the user hits "Save" you want the lightframe to close rather than display the node "View" page. How do you close that lightframe?

In your save button's onclick event call :

parent.Lightbox.end();

Works great.

Much thanks to cvelde for answering my question on irc #drupal-support and culminating my 2 hr attempt at solving this with his one line solution.

= EDIT - 2013/1/22 - sardbaba =

To be really useful (and to reach a large audience) this post must be more clear in how to do that.

What follows are the steps that involve the creation of a simple module that adds the right code to handle the close event on click when we are in the node delete page (just as example) and we want to exit from the lightbox frame when clicking on the "Cancel" link.

Create a folder named "mymodule" (replace it and all the occurences of "mymodule" that follows, with the name you prefer) under sites/all/modules.

Into this folder create 3 files:

• mymodule.info
• mymodule.module
• mymodule.js

The content of mymodule.info follows:

name = My Module
description = "My cool module"
core = 7.x
version = 7.x-1.0
files[] = mymodule.module
dependencies[] = lightbox2

The content of mymodule.module follows:

<?php
/**
 * Implements hook_init()
 */
function mymodule_init() {
	$module_path = drupal_get_path('module', 'mymodule');
	drupal_add_js($module_path . '/mymodule.js', array( 'scope' => 'header', 'weight' => 0 ));
}
?>

The code of mymodule.js follows:

jQuery(document).ready(function ($) {
    $('form#node-delete-confirm #edit-cancel').click(function() {
    	if (parent.Lightbox.isLightframe) {
    		parent.Lightbox.end();
    	}
    });
    
    if (parent.Lightbox.isLightframe) {
    	$('body.lightbox-processed').css('padding-top', '0px');
    	$('body.lightbox-processed div#toolbar').remove();
    	$('body.lightbox-processed div.add-or-remove-shortcuts').remove();
    	$('body.lightbox-processed ul.tabs.primary').remove();
    	$('body.lightbox-processed div.breadcrumb').remove();
    }
});

That's all.

Now you can play with others forms/buttons.