Popup Lightbox
Use this component to create a pop-up lightbox of images that can be opened from a link or button (or any other clickable component) on the page. Two styles are available: "Wide" and "Compact".
"Wide" Layout
Gallery
Settings used for this example:
Component Inspector
| Media Folder | travels-and-landscapes |
| Lightbox Type | Wide |
| Attach-to | #gallery-button |
Page HTML
<button id="gallery-button" class="btn btn-primary">Click me!</button>Explanation: We set the "Attach-to" property in the component inspector to the ID of the button element that we want to trigger the gallery from. The script will then add an "on-click" event handler to this button that opens the gallery when it is clicked. We also select the folder of images that we wish to display and set the lightbox type to "Wide". The button that we added to the page is shown in the Page HTML box above.
// Options that can be set from the OctoberCMS component inspector:
gallery_theme: "lightbox" //This is included automatically for all "Popup Lightbox" galleries
lightbox_type: "wide", //compact / wide - please use the OctoberCMS component inspector to set this option!"Compact" Layout
Gallery
Settings used for this example:
Component Inspector
| Media Folder | travels-and-landscapes |
| Lightbox Type | Compact |
| Attach-to | #gallery-button-2 |
| Script options | lightbox_show_numbers: false,lightbox_slider_image_border_width: 20 |
Page HTML
<button id="gallery-button-2" class="btn btn-primary">Click me!</button>Explanation: We set the "Attach-to" property in the component inspector to the ID of the button element that we want to trigger the gallery from. The script will then add an "on-click" event handler to this button that opens the gallery when it is clicked. We also select the folder of images that we wish to display and set the lightbox type to "Compact". We also add some script options to hide the image numbers and change the image border from the default of 10 to a wider 20 pixels. The button that we added to the page is shown in the Page HTML box above.
// Options that can be set from the OctoberCMS component inspector:
gallery_theme: "lightbox" //This is included automatically for all "Popup Lightbox" galleries
lightbox_type: "compact", //compact / wide - please use the OctoberCMS component inspector to set this option!Additional Options
All Available Component Inspector Options for Popup Lightbox Galleries
| Code | OctoberCMS Component Inspector Property | Description |
|---|---|---|
| alias | Alias | Standard OctoberCMS stuff, you refer to the component in your page via this unique identifier, the default is “embeddedGallery” but you can change it to anything you want (don’t use spaces or special characters though!) |
| mediaFolder | Media Folder | Select the folder that you uploaded the images to in the OctoberCMS Media manager. Only folders under the “Base Media Folder” set on the November Gallery settings page are valid. |
| maxItems | Max Images | The maximum number of images to display |
| sortBy | Order by | Order to display the gallery items in; note: Image Title, Description, and Sort Order only work for images uploaded using the Galleries page! Options are: (1) title / Image Title (2) description / Image Description (3) sortOrder / Image Order in Gallery (4) width / Image Width (5) height / Image Height (6) orientation / Image Orientation (7) fileName / Filename (8) fileSize / File Size (9) uploaded / Date/Time Uploaded; and all options are also available in reverse order (append DESC onto the option code). |
| attachTo | Attach to | JQuery selector for the element(s) that the user can click on to open the lightbox; for example: #gallery-button |
| additionalLightboxOptions | Script options | Additional JS options that you want passed onto the UniteGallery script, for example: theme_panel_position: 'bottom' |
Script options applicable to all "Popup Lightbox" galleries...
//lightbox options:
lightbox_hide_arrows_onvideoplay: true, //hide the arrows when video start playing and show when stop
lightbox_arrows_position: "sides", //sides, inside: position of the arrows, used on compact type
lightbox_arrows_offset: 10, //The horizontal offset of the arrows
lightbox_arrows_inside_offset: 10, //The offset from the image border if the arrows placed inside
lightbox_arrows_inside_alwayson: false, //Show the arrows on mouseover, or always on.
lightbox_overlay_color:null, //the color of the overlay. if null - will take from css
lightbox_overlay_opacity:1, //the opacity of the overlay. for compact type - 0.6
lightbox_top_panel_opacity: null, //the opacity of the top panel
lightbox_close_on_emptyspace:true, //close the lightbox on empty space
lightbox_show_numbers: true, //show numbers on the right side
lightbox_numbers_size: null, //the size of the numbers string
lightbox_numbers_color: null, //the color of the numbers
lightbox_numbers_padding_top:null, //the top padding of the numbers (used in compact mode)
lightbox_numbers_padding_right:null, //the right padding of the numbers (used in compact mode)
lightbox_slider_image_border: true, //enable border around the image (for compact type only)
lightbox_slider_image_border_width: 10, //image border width
lightbox_slider_image_border_color: "#ffffff", //image border color
lightbox_slider_image_border_radius: 0, //image border radius
lightbox_slider_image_shadow: true, //enable border shadow the image
lightbox_slider_control_swipe:true, //true,false - enable swiping control
lightbox_slider_control_zoom:true, //true, false - enable zooming control
//lightbox text panel:
lightbox_show_textpanel: true, //show the text panel
lightbox_textpanel_width: 550, //the width of the text panel. wide type only
lightbox_textpanel_enable_title: true, //enable the title text
lightbox_textpanel_enable_description: false, //enable the description text
lightbox_textpanel_padding_top:5, //textpanel padding top
lightbox_textpanel_padding_bottom:5, //textpanel padding bottom
lightbox_textpanel_padding_right: 11, //cut some space for text from right
lightbox_textpanel_padding_left: 11, //cut some space for text from left
lightbox_textpanel_title_color:null, //textpanel title color. if null - take from css
lightbox_textpanel_title_font_family:null, //textpanel title font family. if null - take from css
lightbox_textpanel_title_text_align:null, //textpanel title text align. if null - take from css
lightbox_textpanel_title_font_size:null, //textpanel title font size. if null - take from css
lightbox_textpanel_title_bold:null, //textpanel title bold. if null - take from css
lightbox_textpanel_css_title:{}, //textpanel additional css of the title
lightbox_textpanel_desc_color:null, //textpanel description font family. if null - take from css
lightbox_textpanel_desc_font_family:null, //textpanel description font family. if null - take from css
lightbox_textpanel_desc_text_align:null, //textpanel description text align. if null - take from css
lightbox_textpanel_desc_font_size:null, //textpanel description font size. if null - take from css
lightbox_textpanel_desc_bold:null, //textpanel description bold. if null - take from css
lightbox_textpanel_css_description:{}, //textpanel additional css of the description
You can read more and see a lot of examples at the UniteGallery website!