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.

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

  • fade = the lightbox fades in
  • elastic = the lightbox size is animated
  • none = the lightbox will simply show
close_effect fade close_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_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]

Still having trouble? Head over to the forums.

Forums