The lightbox shortcode allows you to display content within a lightbox popup using Fancybox 2. The shortcode uses two other helper shortcodes inside it – [lightbox_trigger] and [lightbox_content], the content of these will set the trigger text and content respectively. The options for this shortcode are shown below. See examples here.
| Option | Default | Example | Description |
|---|---|---|---|
| width | (empty) | width="400" | Sets the pixel width of the lightbox. If not set it will automatically size to wrap the content. |
| height | (empty) | height="400" | Sets the pixel height of the lightbox. If not set it will automatically size to wrap the content. |
| padding_top | 25 | padding_top="10" | Add a CSS padding-top to the lightbox in pixels. |
| padding_right | 25 | padding_right="10" | Add a CSS padding-right to the lightbox in pixels. |
| padding_bottom | 25 | padding_bottom="10" | Add a CSS padding-bottom to the lightbox in pixels. |
| padding_left | 25 | padding_left="10" | Add a CSS padding-left to the lightbox in pixels. |
| open_effect | fade | open_effect="elastic" | Determines the animation type when opening the lightbox
|
| close_effect | fade | close_effect="elastic" | Determines the animation type when closing the lightbox
|
| open_speed | 250 | open_speed="1000" | The speed of the open animation in milliseconds, 1000 = 1 second |
| close_speed | 250 | close_speed="1000" | The speed of the close animation in milliseconds, 1000 = 1 second |
| close_on_overlay_click | 1 | close_on_overlay_click="0" | When active the lightbox will close when the user clicks on the overlay |
| close_button | 1 | close_button="0" | Adds a close button to the lightbox |
| trigger_on_page_load | 0 | trigger_on_page_load="1" | Triggers the popup when the user enters the page. |
| extra_trigger_classes | (empty) | extra_trigger_classes="extra_class" | Adds any CSS class to the trigger, to help with styling. Separate multiple classes with spaces. |
| extra_content_classes | (empty) | extra_content_classes="extra_class" | Adds any CSS class to the content, to help with styling. Separate multiple classes with spaces. |
Example
[lightbox open_effect="elastic" close_effect="none" close_on_overlay_click="0"] [lightbox_trigger] Click here to show lightbox [/lightbox_trigger] [lightbox_content] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ullamcorper, risus sit amet pellentesque fringilla, augue purus pellentesque libero, quis vehicula libero lorem ultricies odio. Aliquam lobortis ultrices erat sed dignissim. Curabitur in mattis nisl, non bibendum ligula. Pellentesque blandit quam vel purus ultricies fringilla. Nulla molestie, magna vel pellentesque ullamcorper, est risus interdum velit, vel venenatis arcu augue a neque. Vivamus laoreet volutpat felis eu mattis. Integer pharetra quis nisl sit amet sodales. Etiam venenatis nulla nec nunc molestie dapibus. Etiam tincidunt nibh lorem, ac congue elit suscipit nec. Cras ornare nibh vitae augue vehicula, eget gravida felis vulputate. Cras at dui turpis. Nulla ac arcu at purus consectetur laoreet ut id erat. Nullam commodo quis dolor ac tincidunt. Duis rhoncus rhoncus ante eget molestie. [/lightbox_content] [/lightbox]