Lightbox popup

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.

OptionDefaultExampleDescription
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_top25padding_top="10"Add a CSS padding-top to the lightbox in pixels.
padding_right25padding_right="10"Add a CSS padding-right to the lightbox in pixels.
padding_bottom25padding_bottom="10"Add a CSS padding-bottom to the lightbox in pixels.
padding_left25padding_left="10"Add a CSS padding-left to the lightbox in pixels.
open_effectfadeopen_effect="elastic"Determines the animation type when opening the lightbox

  • fade = the lightbox fades in
  • elastic = the lightbox size is animated
  • none = the lightbox will simply show
close_effectfadeclose_effect="elastic"Determines the animation type when closing the lightbox

  • fade = the lightbox fades out
  • elastic = the lightbox size is animated
  • none = the lightbox will simply hide
open_speed250open_speed="1000"The speed of the open animation in milliseconds, 1000 = 1 second
close_speed250close_speed="1000"The speed of the close animation in milliseconds, 1000 = 1 second
close_on_overlay_click1close_on_overlay_click="0"When active the lightbox will close when the user clicks on the overlay
close_button1close_button="0"Adds a close button to the lightbox
trigger_on_page_load0trigger_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]

Still having trouble? Head over to the forums.

Forums