Last updated January 22, 2013. Created by pjsz on November 30, 2011.
Edited by sardbaba. Log in to edit this page.
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[] = lightbox2The 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.
| Attachment | Size |
|---|---|
| mymodule.tar_.gz | 10 KB |
Comments
How do I call this to the save button event
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.
Great solution. You saved me
Great solution. You saved me hours of searching. Thank you.
www.samuelayela.com
I am a newbie and I don't
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?