How to implement Lightbox for a Web application?
Nowadays Light-box is very common in all the Web applications. To implement a Light-box JQuery Tools provides a plugin called 'Overlay'. You can download the JQuery Tools UI Library from here.
After including the js file for JQuery tools in your page, you can call the Overlay method to show the corresponding div in a light-box.
If you want to open a div with id 'my-overlay-div' in a light-box, first you have to create a link called 'trigger' with a 'rel' attribute having value as the id of the div ie., 'my-overlay-div'.
<a id="my-overlay-trigger" href="#" rel="#my-overlay-div">Show Lightbox</a>
This trigger can be any HTML element but it should have the 'rel' attribute. For ex: img, input
Now to show the div in a Light-box, you can simply call overlay method.
$("#my-overlay-trigger").overlay();
This will open the div with class name 'my_overlay_div' in a light-box.
There are many options available to use with the JQuery Overlay. For more details visit Jquery Overlay.
blog comments powered by Disqus
After including the js file for JQuery tools in your page, you can call the Overlay method to show the corresponding div in a light-box.
If you want to open a div with id 'my-overlay-div' in a light-box, first you have to create a link called 'trigger' with a 'rel' attribute having value as the id of the div ie., 'my-overlay-div'.
<a id="my-overlay-trigger" href="#" rel="#my-overlay-div">Show Lightbox</a>
This trigger can be any HTML element but it should have the 'rel' attribute. For ex: img, input
Now to show the div in a Light-box, you can simply call overlay method.
$("#my-overlay-trigger").overlay();
This will open the div with class name 'my_overlay_div' in a light-box.
There are many options available to use with the JQuery Overlay. For more details visit Jquery Overlay.