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.

AttachmentSize
mymodule.tar_.gz10 KB

Comments

ddunn’s picture

Hi, this is exactly what I need. However, I can't figure out how to implement the solution. Could you possibly break it down for me? Thanks.

sayela’s picture

Great solution. You saved me hours of searching. Thank you.

tebdilikiyafet’s picture

I am a newbie and I don't know where should I put this code.

Can you please explain how can we implement this solution?

barbbar’s picture

Hi,

I have a lightbox opening with a node edit form. I want it to close the lightbox on "Save" and refresh the underlying page. I'm not sure what I need to change "form#node-delete-confirm #edit-cancel" to to make this work. Can you help?

Thanks!