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

Lightbox2 - How to display video content

It's possible to show video content in the lightbox. In this case the "rel" attribute should be set to lightvideo. It's possible to group videos and to control the size of the lightbox by setting the 'width' and 'height' properties. The properties can be configured like lightvideo[group|width:300px; height: 200px;]. The properties should all be of the format "property: value;" - note the closing semi-colon. If no properties are set, then the default width and height of 400px will be used. See below for more detailed examples.

Basic example:

<a href="http://video.google.com/videoplay?docid=1811233136844420765" rel="lightvideo">Google video example - default size</a>

Basic example with caption:

<a href="http://video.google.com/videoplay?docid=1811233136844420765" rel="lightvideo[][my caption]">Google video example - default size</a>

Basic example with caption:

<a href="http://video.google.com/videoplay?docid=22349072348092348324" rel="lightvideo[groupname][my caption]">Grouped video 1</a>
<a href="http://video.google.com/videoplay?docid=1811233136844420765" rel="lightvideo[groupname][my caption]">Grouped video 2</a>

Controlling lightbox size example:

Lightbox2 - How to add a lightbox to webpage links

It's possible to show webpage content in the lightbox, using iframes. In this case the "rel" attribute should be set to lightframe. Again it's possible to group the items, (e.g. lightframe[search]) but in addition to that, it's possible to control some of the iframe properties. It's possible to set the 'width', 'height' and 'scrolling' properties of the iframe. The properties are separated from the group name by a |, for example lightframe[search|width:100px;]. If no grouping is being used, then the | is still used and the format would be lightframe[|width:100px;]. The properties should all be of the format "property: value;" - note the closing semi-colon. If no iframe properties are set, then the default width and height of 400px will be used. See below for more detailed examples.

Basic example:

<a href="http://www.google.com" rel="lightframe">Search google</a>

Basic example with caption:

<a href="http://www.google.com" rel="lightframe[][my caption]">Search google</a>

Grouped example:

<a href="http://www.google.com" rel="lightframe[search]">Search google</a>
<a href="http://www.yahoo.com" rel="lightframe[search][Search Yahoo]">Search yahoo</a>

Controlling iframe property example:

Subscribe with RSS Subscribe to RSS - Lightbox2